<template>
  <div class="export">
    <el-button
      type="primary"
      size="small"
      plain
      :disabled="importData.disabled"
      @click="openDialog"
      icon="el-icon-upload2"
      >{{importData.header}}</el-button
    >
    <el-dialog
      :visible="dialogImportVisible"
      :title="importData.title"
      width="600px"
      :before-close="cancelConfirm"
      :destroy-on-close="true"
      :modal="false"
      :close-on-click-modal="false"
      top="8vh"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="auto"
        label-position="right "
        :inline="true"
      >
        <el-row :gutter="24" v-if="importData.show==true?false:true">
          <el-col :span="24">
            <el-form-item label="默认模板">
              <a
                class="download-btn"
                :download="importData.templateName"
                :href="importData.downloadUrl"
              >
                <i class="el-icon-download"></i>
                模板下载
              </a>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-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="form"
                :auto-upload="false"
                ref="upload"
              >
                <el-button
                  type="primary"
                  class="download-btn"
                  icon="el-icon-upload"
                  >选择Excel文件</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelConfirm()">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submitImport"
          plain
          element-loading-text="拼命导入中"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'importFile',
  props: {
    importData: {
      type: Object,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: [],
      disabled: false,
      form: {},
      importDataParams: {},
      dialogImportVisible: false,
      fullscreenLoading: false
    }
  },
  created() {},
  computed: {
    uploadHeaders: function() {
      return {
        Authorization:
          this.$store.state.login.currentUser &&
          'Bearer ' + this.$store.state.login.currentUser.token
      }
    }
  },
  // watch:{
  //    importDataParams(){
  //      return this.importDataParams=this.importData
  //    }
  // },
  methods: {
    openDialog() {
      this.dialogImportVisible = true
      this.form = {
        title: this.importData.title,
        show:this.importData.show
      }
    },
    cancelConfirm() {
      this.$refs.upload.clearFiles()
      this.dialogImportVisible = false
      this.$refs.upload.uploadFiles = []
    },
    submitImport() {
      console.log(this.importData.showProject, 'this.importData.showProject')
      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
        this.$emit('load', response.value)
      } else {
        this.$message.error(response.message)
      }
    },
    onExceed() {
      this.$message.warning('只能选择一个Excel文件!')
    },
    beforeUpload(file) {
      this.fileInfo = 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 {
  width: 140px !important;
  color: #fff;
  background: #66b1ff;
  border-color: #66b1ff;
  padding: 10px 15px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.export {
  margin-left: 10px;
}
/deep/ .el-form-item__label {
  width: 150px !important;
}
.rulesStyle /deep/ .el-form-item__label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
