<template>
  <div>
    <a-form v-bind='formItemLayout'>
      <a-form-item :label="$t('functional-analysis.top-modal.hook-structure')">
        {{ checkedNode.description }}
      </a-form-item>
      <a-form-item required :label="$t('functional-analysis.top-modal.import-file')">
        <a-upload
            name='file'
            action=''
            accept='.xls,.xlsx'
            :fileList='fileList'
            :customRequest="uploadFile"
            :max-count="1"
            :remove='removeFile'>
          <a-button>
            <a-icon type="upload"/>
            {{ $t('global-btn.select-file') }}
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>

    <div class="dialog-footer text-right mt10">
      <a-button @click="downloadExcel" type="primary" class="fl mr20">
        {{ $t('global-btn.download-template') }}
      </a-button>
      <a-button @click="importFile" type="primary" :loading="importLoading">
        {{ $t('global-btn.import') }}
      </a-button>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 3},
          xl: {span: 3},
          lg: {span: 3},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        },
        wrapperCol: {
          xxl: {span: 21},
          xl: {span: 21},
          lg: {span: 21},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      /** 文件上传集合 */
      fileList: [],
      /** 导入Loading */
      importLoading: false
    };
  },
  props: {
    checkedNode: {
      type: Object,
      default: {}
    }
  },
  methods: {
    /**
     * 刷新左侧树
     */
    initLeftTree() {
      this.$emit("initLeftTree");
    },
    /**
     * 刷新右侧树
     */
    initRightTree() {
      this.$emit("initRightTree");
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.$emit("closeModal");
    },
    /**
     * 下载模板
     */
    downloadExcel() {
      let url = this.$api.baseUrl + "/DFMEA/rdfmImport/Rb04261C3/download";
      window.open(url);
    },
    /**
     * 校验文件
     * @param file 文件
     */
    validateFile(file) {
      if (file.size > 52428800) {
        this.$message.warning(this.$t('global-message.warn.uploaded-files-cannot-exceed'));
        this.fileList = [];
        return false;
      }
      return true;
    },
    /**
     * 上传文件
     * @param obj 回调对象
     */
    uploadFile(obj) {
      // 校验
      if (!this.validateFile(obj.file)) return;
      this.fileList = [];
      this.fileList.push(obj.file);
    },
    /**
     * 文件删除
     * @param file 文件
     */
    removeFile(file) {
      let files = this.fileList;
      for (let i = files.length - 1; i >= 0; i--) {
        if (file.uid === files[i].uid) files.splice(i, 1);
      }
    },
    /**
     * 导入文件
     */
    importFile() {
      let _that = this;
      if (_that.fileList.length === 0) {
        _that.$message.warn(this.$t('global-message.warn.select-file'), 1);
        return;
      }
      /************** 数据组装 Start **********/
      let formData = new FormData();
      // 添加额外的参数
      formData.append("file", _that.fileList[0]);
      formData.append("struId", _that.checkedNode.id);
      formData.append("fmeaId", _that.$store.getters.rfmeaId);
      formData.append("struName", _that.checkedNode.name);
      /************** 数据组装 End **********/

      _that.importLoading = true;
      _that.$api.newVersionImport(
          formData
      ).then((res) => {
        if (res.flag) {
          // 添加成功，关闭弹窗，刷新左、右侧树
          _that.$message.success(res.message, 1);
          _that.closeModal();
          _that.initLeftTree();
          _that.initRightTree();
        } else {
          // 错误提示
          if (res.message == 'E009924') {
            _that.$message.error(_that.$t('global-message.warn.sheetName-file'), 1);
          } else if (res.message == 'E099921') {
            _that.$message.error(_that.$t('global-message.warn.noBean-file'), 1);
          } else if (res.message == 'E099922') {
            _that.$message.error(_that.$t('global-message.warn.get-file'), 1);
          } else if (res.message == 'E099923') {
            _that.$message.error(_that.$t('global-message.warn.read-file'), 1);
          } else if (res.message == 'E099925') {
            _that.$message.error(_that.$t('global-message.warn.config-file'), 1);
          } else if (res.message == 'E099926') {
            _that.$message.error(_that.$t('global-message.warn.write-file'), 1);
          } else if (res.message == 'E099927') {
            _that.$message.error(_that.$t('global-message.warn.readCell-file'), 1);
          } else if (res.message == 'E099928') {
            _that.$message.error(_that.$t('global-message.warn.template-file'), 1);
          } else if (res.message == 'E099929') {
            _that.$message.error(_that.$t('global-message.warn.differentData-file'), 1);
          } else if (res.message == 'E099917') {
            _that.$message.error(_that.$t('global-message.warn.noData-file'), 1);
          } else {
            _that.$message.error(_that.$t('global-message.warn.operation-failed'), 1);
          }
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      }).finally(() => {
        _that.importLoading = false;
      });
    }
  },
};
</script>
<style lang="less" scoped>

</style>
