<template>
  <div class="pagemain">
    <div class="pageTitle">
      {{ $t("route.firmwareUpdate") }}
    </div>
    <div class="pageCon">
      <div class="toptipbox">
        <div class="ltip">{{ $t("table.firmwareUpdateTip") }}</div>
      </div>
      <el-form
        class="detail-form update-form"
        label-width="160px"
        label-position="right"
        :model="form"
      >
        <el-form-item :label="$t('table.productMode')">
          <el-input v-model="form.model" disabled />
        </el-form-item>
        <!-- <el-form-item :label="$t('table.serialNumber')">
          <el-input v-model="form.mac" disabled />
        </el-form-item> -->
        <el-form-item :label="$t('table.firmwareVercion')">
          <el-input v-model="form.version" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.chooseFile')">
          <el-input v-model="form.fileName" />
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            accept=".bin"
            :show-file-list="false"
            :on-change="handleChange"
          >
            <el-button type="primary" style="width: 92px; margin-left: 12px">
              {{ $t("table.choose") }}
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="width: 10%; margin-left: 20%"
        @click="submitFirmware"
      >
        {{ $t("table.update") }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { deviceInfo, firmwareUpdate, firmwareStatus, programList } from '@/api/index.js'
export default {
  name: 'FirmwareUpdate',
  data() {
    return {
      form: {
        model: '',
        mac: '',
        version: '',
        fileName: ''
      },
      fileData: null,
      deviceInfo: {},
      surplusNum: 0, // 未格式化的剩余空间大小
      timer: null
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    getDeviceInfo() {
      deviceInfo({}).then((res) => {
        if (res.code === 200) {
          this.deviceInfo = res.data
          this.form.model = res.data.model
          this.form.mac = res.data.mac
          this.form.version = res.data.version
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleChange(files) {
      if (files.size > this.surplusNum) {
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.fileSurplusSizeTip')
        })
        return
      }
      const type = files.name.substring(files.name.lastIndexOf('.') + 1)
      if (type !== 'bin') {
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.updateFileTypeTip')
        })
        return
      }
      if (files.size / 1024 / 1024 > 40) {
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.fileSizeTip')
        })
        return
      }
      this.form.fileName = files.name
      const formData = new FormData()
      // 添加入参
      formData.append('file', files.raw)
      this.fileData = formData
    },
    // 固件升级
    submitFirmware() {
      const fileData = this.fileData
      if (!fileData) {
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.upDateTip')
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: this.$i18n.t('table.upDateTips'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      firmwareUpdate(fileData).then(res => {
        this.timeFun(loading)
        // if (res.code === 200) {
        //   loading.close()
        //   this.$message({
        //     type: 'success',
        //     message: this.$i18n.t('table.upload') + this.$i18n.t('table.success')
        //   })
        // } else {
        //   loading.close()
        //   this.$message({
        //     type: 'error',
        //     message: this.$i18n.t('table.upload') + this.$i18n.t('table.failed')
        //   })
        // }
      }).catch(() => {
        loading.close()
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.upload') + this.$i18n.t('table.failed')
        })
      })
    },
    timeFun(loading) {
      this.timer = setInterval(() => {
        this.getFirmwareStatus(loading)
      }, 3000)
    },
    // 固件升级状态查询
    getFirmwareStatus(loading) {
      firmwareStatus({}).then(res => {
        if (res.code !== 641 && res.code !== 640) {
          loading.close()
          this.time = null
          clearInterval(this.timer)
          if (res.code === 642) {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.$store.dispatch('user/updateLogOut')
            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          } else if (res.code === 643 || res.code === 644) {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }
      }).catch(() => {})
    },
    // 文件列表
    getList() {
      programList({}).then(res => {
        if (res.code === 200) {
          this.surplusNum = res.data.surplus
        }
      })
    }
  }
}
</script>
<style lang="scss">
.update-form .el-form-item {
  width: 56%;

  .el-form-item__content {
    display: flex;
  }
}
i.el-icon-loading {
  color: #1890ff;
  font-size: 44px;
  margin-bottom: 10px;
}
</style>
<style lang="scss" scoped>
.update-form {
  margin-top: 24px;
}
</style>
