<template>
  <el-dialog
    :visible="dialogImportVisible"
    :title="importData.title"
    width="50%"
    :before-close="cancelConfirm"
    destroy-on-close
  >
    <el-form ref="form" label-width="150px">
      <ht-form-item label="默认模板">
        <a
          class="download-btn"
          :download="importData.templateName"
          :href="importData.downloadUrl"
        >
          <i class="el-icon-download"></i>
          模板下载
        </a>
      </ht-form-item>
      <ht-form-item label="文件">
        <el-upload
          style="display: inline-block"
          :action="importData.importUrl"
          :on-success="hadleUploadResult"
          :on-error="hadleUploadResult"
          :headers="uploadHeaders"
          :on-exceed="onExceed"
          accept=".xlsx,.xls"
          :before-upload="beforeUpload"
          :limit="1"
          :data="importDataParams"
          :auto-upload="false"
          ref="upload"
        >
          <el-button size="small" icon="el-icon-upload"
            >选择Excel文件</el-button
          >
        </el-upload>
      </ht-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitImport"
        element-loading-text="拼命导入中"
        v-loading.fullscreen.lock="fullscreenLoading"
        >确 定</el-button
      >
      <el-button @click="cancelConfirm()">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'exportPoint',
  props: {
    importData: {
      type: Object,
      default: function() {
        return {isCheck: true}
      }
    }
  },
  data() {
    return {
      importDataParams: null,
      dialogImportVisible: false,
      fullscreenLoading: false
      //   importUrl: window.context.cssc + '/biz/base/pointInfo/v1/import'
    }
  },
  computed: {
    uploadHeaders: function() {
      return {
        Authorization: 'Bearer ' + this.$store.state.login.currentUser.token
      }
    }
  },
  methods: {
    open() {
      this.dialogImportVisible = true
      if (this.importData.configType) {
        this.importDataParams = {
          isCheck: true,
          configType: this.importData.configType,
          sysId: this.importData.sysId,
          fanType: this.importData.fanType,
          lineId: this.importData.lineId
        }
      } else {
        this.importDataParams = {
          isCheck: true
        }
      }
    },
    cancelConfirm() {
      this.$refs.upload.clearFiles()
      this.dialogImportVisible = false
      this.$refs.upload.uploadFiles = []
    },
    submitImport() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的数据文件!')
        return false
      }
      this.$refs.upload.submit()
    },
    hadleUploadResult(response) {
      this.fullscreenLoading = false
      if (response.state) {
        this.$message.success(response.message)
        this.dialogImportVisible = false
        if (this.importData.configType) {
          this.$parent.$refs[`htTable${this.importData.configType}`].load()
        } else {
          this.$parent.$refs.htTable.load()
        }
      } else {
        this.$message.error(response.message + '：' + response.value)
      }
    },
    onExceed() {
      this.$message.warning('只能选择一个Excel文件!')
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
        this.$message.warning('只能导入Excel文件!')
        return false
      }
      this.fullscreenLoading = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.download-btn {
  color: #fff;
  background-color: $--color-primary;
  border-color: $--color-primary;
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
</style>
