<template>
  <div class="upload">
    <el-upload ref="upload" action="" :file-list="fileList" :on-change="handleFileChange"
      :on-remove="() => fileList = []" :auto-upload="false">
      <!--      下载模板-->
      <el-button size="small" type="primary" style="margin-left: 10px;" @click="handleDownload"
        :loading="downloading">{{ $t('import.download') }}</el-button>
      <!--      选择文件-->
      <el-button slot="trigger" size="small" type="primary">{{ $t('import.choseFile') }}</el-button>
      <!--      开始导入-->
      <el-button style="margin-left: 10px;" size="small" :loading="uploading" @click="handleUpload">{{
        $t('import.start') }}</el-button>
    </el-upload>
  </div>
</template>

<script>

import { downloadTemplate, check } from '@/api/excel'

export default {
  name: 'UploadBasic',
  props: {
    fileName: {
      type: String,
      required: true
    },
    tableType: {
      type: Number,
      // required: true
    },
    defaultParams: {
      type: Object,
      default: () => {
      },
      desc: '为上传表格设置默认条件',
    },
  },
  data() {
    return {
      uploading: false,
      downloading: false,
      fileList: []
    }
  },
  methods: {
    handleDownload() {
      this.downloading = true
      downloadTemplate({ fileName: `${this.fileName}.xlsx`, tableName: this.fileName, tableType: this.tableType, ...this.defaultParams })
        .finally(() => this.downloading = false)

      // downloadTemplate({ fileName: `${this.fileName}.xlsx`, tableName: this.fileName })
      //this.downloadFile(downloadTemplate({ fileName: `${this.fileName}.xlsx`, tableName: this.fileName }))
      //this.download('/excel/downloadTemplate', { fileName: `${this.fileName}.xlsx`, tableName: this.fileName }, `${this.fileName}.xlsx`)
    },
    handleFileChange(file, fileList) {
      if (this.beforeUpload(file)) {
        this.fileList = [file]
      } else {
        this.fileList = []
      }
    },
    beforeUpload(file) {
      const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isExcel) {
        this.$message.error("只能上传excel文件!");
      }
      if (!isLt50M) {
        this.$message.error("上传文件不能超过50M!");
      }
      return isExcel;
    },
    handleUpload() {
      if (this.fileList.length === 0) {
        // this.$message.error('请选择文件')
        this.$message.error(this.$t('import.choseFileW'))
        return
      }

      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('file', file.raw)
      })

      if (this.defaultParams) {
        //如果存在默认数据
        //则需要多设置查询条件
        let keys = Object.keys(this.defaultParams)
        keys.forEach(key => {
          formData.append(key, this.defaultParams[key])
        })
      }
      formData.append('tableType', this.tableType)
      this.uploading = true
      check(formData).then(res => {
        if (res.code === 200 && res.data) {
          this.$emit('forward')
          this.$emit('uploadSuccess', res.data)
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.uploading = false
      })
    },
    clear() {
      this.fileList = []
    }
  }

}
</script>

<style scoped>
.upload {
  padding-top: 30px;
  text-align: center;
  height: 150px;
}
</style>
