<template>
  <div 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: 'DeviceRestore',
  mixins: [baseMixin],
  methods: {
    invoke () {
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      this.$confirm(
        `将 ${this.device.name} 恢复出厂？`,
        { type: 'warning' }
      ).then(() => {
        send('/restore/ask').catch(() => {
          this.$message({
            type: 'warning',
            message: '正在连接，请稍后再试'
          })
        })
      })
    }
  }
}
</script>

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