<template>
  <div
    v-loading="rebooting"
    class="l-flex--col center has-border radius has-padding"
  >
    <i
      class="o-icon has-bg u-pointer"
      @click="invoke"
    />
    <div class="has-padding u-color--black u-bold">重启设备</div>
  </div>
</template>

<script>
import baseMixin from './mixins/base'
import { send } from '../../monitor'

export default {
  name: 'DeviceReboot',
  mixins: [baseMixin],
  data () {
    return {
      rebooting: false
    }
  },
  watch: {
    online () {
      this.rebooting = false
    }
  },
  methods: {
    invoke () {
      if (this.rebooting) {
        return
      }
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      this.$confirm(
        `重启 ${this.device.name} ？`,
        { type: 'warning' }
      ).then(() => {
        send('/restart/ask').then(
          () => {
            this.rebooting = true
          },
          () => {
            this.$message({
              type: 'warning',
              message: '正在连接，请稍后再试'
            })
          }
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.o-icon {
  background-image: url("~@/assets/icon_device_reboot.png");
}
</style>
