<template>
  <div class="l-flex--row">
    <div class="l-flex__fill l-flex--row c-sibling-item c-device-dashboard-info">
      <div
        v-for="item in items"
        :key="item.id"
        class="l-flex__fill l-flex--row"
      >
        <div class="l-flex__fill c-device-dashboard-info__label u-text-center">{{ item.label }}</div>
        <auto-text
          class="l-flex__fill u-text-center"
          :text="device[item.key]"
        />
      </div>
    </div>
    <button
      class="l-flex__none c-sibling-item far o-button"
      @click="onSwitch(true)"
    >
      <i class="o-button__icon el-icon-switch-button" />
      开机
    </button>
    <button
      class="l-flex__none c-sibling-item far o-button"
      @click="onSwitch(false)"
    >
      <i class="o-button__icon el-icon-switch-button" />
      关机
    </button>
    <button
      class="l-flex__none c-sibling-item far o-button"
      @click="onReboot"
    >
      <i
        class="o-button__icon"
        :class="{ 'el-icon-loading': rebooting ,'el-icon-refresh-right': !rebooting }"
      />
      重启
    </button>
  </div>
</template>

<script>
import { publish } from '@/utils/mqtt'
import {
  addListener,
  send
} from '../monitor'

export default {
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      online: this.device.activate === 2 && this.device.onlineStatus === 1,
      rebooting: false,
      openFunctionKey: 'bootDevice',
      closeFunctionKey: 'shutdownDevice',
      items: [
        {
          label: '名称',
          key: 'name'
        },
        {
          label: 'MAC',
          key: 'mac'
        },
        {
          label: '序列号',
          key: 'serialNumber'
        },
        {
          label: '分辨率',
          key: 'resolutionRatio'
        }
      ]
    }
  },
  created () {
    addListener('online', this.onUpdate)
  },
  methods: {
    onUpdate (online) {
      this.online = online
      this.rebooting = false
    },
    onSwitch (open) {
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      this.$confirm(
        `立即${open ? '开机' : '关机'}？`,
        { type: 'warning' }
      ).then(() => {
        this.sendTopic(open ? this.openFunctionKey : this.closeFunctionKey)
      })
    },
    onReboot () {
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      if (this.rebooting) {
        return
      }
      this.$confirm(
        `立即重启？`,
        { type: 'warning' }
      ).then(() => {
        send('/restart/ask').then(
          () => {
            this.rebooting = true
          },
          () => {
            this.$message({
              type: 'warning',
              message: '正在连接，请稍后再试'
            })
          }
        )
      })
    },
    sendTopic (invoke, inputs = []) {
      publish(
        `${this.device.productId}/${this.deviceId}/function/invoke`,
        JSON.stringify({
          timestamp: Date.now(),
          function: invoke,
          inputs
        }),
        true
      ).then(
        () => {
          this.$message({
            type: 'success',
            message: '执行成功'
          })
        },
        () => {
          this.$message({
            type: 'warning',
            message: '正在连接，请稍后再试'
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard-info {
  height: 36px;
  color: #fff;
  line-height: 1;
  font-size: 12px;
  background-color: #232b45;

  &__label {
    color: #9ea9cd;
  }
}

.o-button {
  height: 36px;
  font-size: 12px;
  background-color: #2956f0;

  &:hover {
    background-color: rgba(#2956f0, 0.8);
  }
}
</style>
