<template>
  <div class="uploadDialog">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="cancelUpload">
      <div class="view-plan-entry-table-dialog-content">
        <el-input disabled v-model="fileName" placeholder="请选择文件"></el-input>
        <el-upload class="upload-demo" :action="action" :auto-upload="false" ref="upload" :on-change="fileChange" :show-file-list="false" :headers="headerObj" :data="fileData" :before-upload="beforeUpload" :on-error="fileError" :on-success="fileSuccess">
          <el-button type="primary">选择文件</el-button>
        </el-upload>
      </div>
      <div class="el-icon-warning" style="margin-top: 10px">只能导入zip文件</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload">取 消</el-button>
        <el-button type="primary" @click="submitUpload">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { getItem } from '@/utils/index'
import { useMessage } from '@/utils/element-ui'
export default {
  name: 'UploadDialog',
  props: {
    title: {
      type: String
    },
    postData: {
      type: Object,
      default: () => ({})
    },
    postUrl: {
      type: String
    }
  },
  components: {},
  data() {
    // 这里存放数据
    return {
      headerObj: { Authorization: getItem('token') },
      dialogVisible: false,
      fileName: '',
      // 文件
      action: process.env.VUE_APP_BASE_API + this.postUrl,
      fileData: null,
      loading: null
    }
  },
  mounted() {},
  methods: {
    open() {
      this.fileData = { ...this.postData }
      this.dialogVisible = true
    },
    cancelUpload() {
      this.dialogVisible = false
      this.fileName = ''
      this.$refs.upload.clearFiles()
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    fileChange(file) {
      this.fileName = ''
      if (file.status == 'ready') {
        this.fileName = file.name
      }
    },
    beforeUpload(file) {
      if (file.type != '' || file.type != null || file.type != undefined) {
        // 截取文件后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, '').toLowerCase()
        if (['zip'].includes(FileExt)) {
          this.loading = this.$loading({
            lock: true,
            text: '处理中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          return true
        } else {
          useMessage('error', 2000, '只能导入xls或xlsx文件')
          return false
        }
      }
    },
    fileError(file) {
      if (file.code == 200) {
        this.loading.close()
        useMessage('success', 1000, file.msg)
      } else {
        this.loading.close()
        useMessage('error', 1000, file.msg)
      }
    },
    fileSuccess(file) {
      if (file.code == 200) {
        this.loading.close()
        this.cancelUpload()
        this.$emit('uploadSuccess')
        useMessage('success', file.msg)
      } else {
        this.loading.close()
        useMessage('error', file.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// @import './index.scss';
.view-plan-entry-table-dialog-content {
  display: flex;
}
</style>
