<template>
  <div>
    <el-dialog
      title="导入文件"
      :visible.sync="dialogVisible"
      :width="width"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="clearFiles"
    >
      <div class="uploadFlexDiv">
        <el-upload
          ref="upload"
          class="avatar-uploader"
          action="#"
          :accept="accept"
          :multiple="false"
          :file-list="fileList"
          :auto-upload="false"
          :on-change="handleChange"
          :before-upload="beforeUpload"
        >
          <el-button
            slot="trigger"
            size="mini"
            type="primary"
            class="mosaic-primary"
            @click="changefile"
            >选取文件</el-button
          >
        </el-upload>

        <el-link
          type="primary"
          icon="el-icon-download"
          :underline="false"
          @click="uploadTemplate"
          >下载模版</el-link
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-circle-close"
          size="mini"
          class="mosaic-info"
          @click="clearFiles"
          >取消</el-button
        >
        <el-button
          icon="el-icon-top"
          size="mini"
          type="primary"
          class="mosaic-primary"
          @click="submitUpload"
          >导入</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getExcelTemplate } from '@/api/common.js'
export default {
  name: '',
  props: {
    limit: {
      type: Number,
      default: 1
    },
    width: {
      type: String,
      default: '600px'
    },
    api: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: '导入模板.xlsx'
    },
    type: {
      type: String
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      myHeaders: {},
      accept: '.xlsx, .xls' // 文件类型
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs.upload.clearFiles()
        this.fileList = []
      }
    }
  },
  computed: {
    baseURL() {
      // eslint-disable-next-line no-undef
      return global_config.BASE_URL
    }
  },
  methods: {
    //下载导入模板
    uploadTemplate() {
      getExcelTemplate(this.type).then(response => {
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(
            new Blob([response], { type: 'application/vnd.ms-excel' }),
            this.fileName + '.xls'
          )
        } else {
          let url = window.URL.createObjectURL(
            new Blob([response], { type: 'application/vnd.ms-excel' })
          )
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', this.fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          window.URL.revokeObjectURL(url)
        }
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    submitUpload() {
      if (this.fileList.length == 0) {
        this.$message.error('请选择文件')
      } else {
        this.$emit('submitImport', this.fileList)
      }
    },
    //关闭上传组件重新请求列表
    clearFiles() {
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.$emit('close')
      // this.dialogVisible = false
    },
    changefile() {
      this.$refs.upload.clearFiles()
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过10MB!')
      } else {
        // this.$refs.upload.clearFiles()
      }
      return isLt2M
    }
  }
}
</script>

<style lang="less" scoped>
.uploadFlexDiv {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  button {
    border: none;
  }
}
</style>
