<template>
  <div>
    <el-dialog v-model="dialogVisible" :width="width" :top="top" :title="`${title}`" :destroy-on-close="true" draggable>
      <el-form class="drawer-multiColumn-form" label-width="100px">
        <el-form-item label="文件上传">
          <el-upload
            ref="uploadRef"
            action="#"
            class="upload"
            :drag="true"
            :auto-upload="false"
            :limit="limit"
            :multiple="multiple"
            :show-file-list="true"
            :http-request="uploadExcel"
            :before-upload="beforeExcelUpload"
            :on-exceed="handleExceed"
            :on-success="excelUploadSuccess"
            :on-error="excelUploadError"
            :accept="fileType.join(',')"
          >
            <slot name="empty">
              <el-icon class="el-icon--upload">
                <upload-filled />
              </el-icon>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </slot>
            <template #tip>
              <slot name="tip">
                <div class="el-upload__tip text-center">
                  <el-checkbox v-model="isCover">是否更新已存在的数据</el-checkbox>
                </div>
                <div class="el-upload__tip text-center">
                  请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ fileSize }}M。
                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="downloadTemp"> 模板下载 </el-link>
                </div>
              </slot>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <TaskDialog ref="taskDialogRef" /> -->
  </div>
</template>
<script>
export default {
  name: 'ImportExcel',
  components: {},
  props: {
    parameter: {
      type: Object,
      default: function () {
        return {
          // tempApi:
        }
      }
    },
    width: {
      type: Number,
      default: 500
    },
    // 离顶部距离
    top: {
      type: String,
      default: '20vh'
    },
    // 数量限制
    limit: {
      type: Number,
      default: 1
    },
    // 名称
    title: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 500
    },
    // 文件类型
    fileType: {
      type: Array,
      default: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
    }
  },
  data() {
    return {
      dialogVisible: false,
      isCover: false
    }
  },
  mounted() {},
  methods: {
    /**
     * @description 文件上传之前判断
     * @param file 上传的文件
     * */
    beforeExcelUpload(file) {
      const isExcel = this.fileType?.includes(file.type)
      const fileSize = file.size / 1024 / 1024 < this.fileSize
      if (!isExcel)
        ElNotification({
          title: '温馨提示',
          message: '上传文件只能是 xls / xlsx 格式！',
          type: 'warning'
        })
      if (!fileSize)
        setTimeout(() => {
          ElNotification({
            title: '温馨提示',
            message: `上传文件大小不能超过 ${this.fileSize}MB！`,
            type: 'warning'
          })
        }, 0)
      return isExcel && fileSize
    },

    // 文件数超出提示
    handleExceed() {
      ElNotification({
        title: '温馨提示',
        message: '最多只能上传一个文件！',
        type: 'warning'
      })
    },

    // 上传错误提示
    excelUploadError() {
      ElNotification({
        title: '温馨提示',
        message: `批量添加${this.title}失败，请您重新上传！`,
        type: 'error'
      })
    },

    // 文件上传
    async uploadExcel(param) {
      let excelFormData = new FormData()
      excelFormData.append('file', param.file)
      excelFormData.append('updateSupport', isCover)
      // await parameter.value.importApi?(excelFormData)
      // parameter.value.getTableList && parameter.value.getTableList()
      dialogVisible.value = false
    },
    excelUploadSuccess() {
      this.dialogVisible = false
      // taskDialogRef.value?.openImportDialog()
    },

    // Excel 导入模板下载
    downloadTemp() {
      if (!parameter.value.tempApi) return
      useDownload(parameter.value.tempApi, `${parameter.value.title}_template_${new Date().getTime()}`)
    },
    handleSubmit() {
      this.$refs.uploadRef.submit()
    }
  }
}
</script>
