<!-- 导入数据组件 -->
<template>
  <div class="export-import-container">
    <el-button type="primary" plain @click="openDialog" icon="el-icon-upload2"
      >导入</el-button
    >
    <el-dialog
      :close-on-click-modal="false"
      title="导入"
      top="10vh"
      width="500px"
      appendToBody
      :visible.sync="dialogShow"
      @close="cancel"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="默认模板 :">
          <el-button
            type="primary"
            icon="el-icon-download"
            :disabled="noTemp"
            @click="downloadTemp"
            :loading="downLoading"
            >模板下载</el-button
          ><i
            class="el-icon-warning"
            v-if="noTemp"
            style="color: #e6a23c; margin-left: 10px"
            >尚无默认导入模板，请配置后再下载！</i
          >
        </el-form-item>
        <el-form-item label="模板配置 :">
          <el-button type="primary" icon="el-icon-setting" @click="setTemp"
            >模板配置</el-button
          >
        </el-form-item>
        <el-form-item label="文件导入 :">
          <el-row>
            <el-col :span="10">
              <el-upload
                style="display: inline-block"
                ref="upload"
                accept=".xlsx,.xls"
                :limit="1"
                :auto-upload="false"
                :action="importUrl"
                :headers="uploadHeaders"
                :before-upload="beforeUpload"
                :on-exceed="onExceed"
                :on-error="handleUploadResult"
                :on-success="handleUploadResult"
              >
                <el-button
                  size="small"
                  type="primary"
                  plain
                  icon="el-icon-folder-opened"
                  >选择Excel文件</el-button
                >
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-button
                style="display: inline-block"
                type="primary"
                icon="el-icon-upload"
                @click="submitImport"
                element-loading-text="拼命导入中"
                v-loading.fullscreen.lock="uploading"
              >
                导 入
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </span>
    </el-dialog>
    <DataTemplateSetting
      ref="DataTemplate"
      type="import"
      :bizCode="bizCode"
      :tempFiles="tempFiles"
      :dataBaseOptions="dataBaseOptions"
      :originAPIOptions="originAPIOptions"
      @reload="checkTemp"
    />
  </div>
</template>

<script>
const DataTemplateSetting = () =>
  import('@/components/ImportExportData/DataTemplateSetting')
import portal from '@/api/portal'
export default {
  name: 'ImportData',
  components: {
    DataTemplateSetting
  },
  props: {
    // 页面组件别名
    bizCode: {
      type: String,
      default: '',
      required: true
    },
    // 模板文件名称
    tempFiles: {
      type: String,
      default: '',
      required: true
    },
    originAPIOptions: {
      type: Object,
      default: () => {},
      required: true
    },
    dataBaseOptions: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  computed: {
    uploadHeaders: function(mapState) {
      return {
        Authorization: 'Bearer ' + this.$store.state.login.currentUser.token
      }
    },
    importUrl: function() {
      return (
        window.context[this.originAPIOptions.moduleRoot] +
        '/config/excel/v1/upload' +
        // this.originAPIOptions.url +
        '?export=import&tempId=' +
        this.bizCode
      )
    }
  },
  data() {
    return {
      dialogShow: false,
      noTemp: false, // 是否有模板
      downLoading: false,
      uploading: false,
      tempId: ''
    }
  },

  mounted() {},
  methods: {
    cancel() {
      this.$refs.upload.clearFiles()
      this.dialogShow = false
      this.tempId = ''
      this.noTemp = false
      this.downLoading = false
    },
    checkTemp() {
      let data = this.qs.stringify({
        type: 2,
        bizCode: this.bizCode
      })
      portal.checkTemp(data).then(res => {
        if (res) {
          this.noTemp = false
          this.tempId = res.excelTemp.id
        } else {
          this.noTemp = true
          this.tempId = ''
        }
      })
    },
    openDialog() {
      this.dialogShow = true
      this.checkTemp()
    },
    downloadTemp() {
      this.downLoading = true
      let params = {
        originAPIOptions: this.originAPIOptions,
        bizCode: this.bizCode
      }
      console.log(params, 'params')
      portal.downloadTemp(params).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = `${this.tempFiles}.xls`
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
        this.downLoading = false
      })
    },
    setTemp() {
      this.$refs.DataTemplate.openDialog(this.tempId)
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
        this.$message.warning('只能导入Excel文件!')
        return false
      }
      this.uploading = true
    },
    //导入
    onExceed(file) {
      this.$message.warning('只能选择一个Excel文件!')
    },
    handleUploadResult(response, file, fileList) {
      this.uploading = false
      if (response.state) {
        this.$message.success(response.message)
        this.$emit('reload')
      } else {
        this.$message.error(response.message + '：' + response.value)
      }
    },
    submitImport() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的数据文件!')
        return false
      }
      this.$refs.upload.submit()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../style.scss';

.export-import-container ::v-deep .el-form-item__content {
  margin-left: 80px !important;
}
</style>
