<template>
  <div>
      <el-upload
        :ref="upload.ref"
        multiple
        :accept="upload.acceptFile"
        action
        :on-change="handleImportChanged" 
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          <p style="font-size:16px">温馨提示：</p>
          <p>1、文件目前仅支持xlsx,xls,csv格式</p>
          <p>2、导入数据量大时请耐心等待</p>
          <p>3、数据导入中，请勿关闭本页面</p>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer" style="text-align:center;margin-top:20px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>
<script>
import {UploadImport} from '@/utils/excel'
export default {
  name:"FileUpload",
  props:[
    'upload',
  ],
  data() {
    return {
    };
  },
  computed: {
  },
  methods: {
    handleImportChanged(files,fileList){
        this.upload.file=files.raw;
        if(fileList.length>1){//单文件上传，后者覆盖前者 配合参数设置 1去除limit=1设置 2允许多传 multiple
            fileList.splice(0,1);
        }
    },
    submitForm () { // 提交上传文件
      if(this.checkFile(this.upload.file)){
        //  this.$emit('onFileSubmit',this.upload.file);
        UploadImport(this.upload.file).then((data)=>{
            this.$emit(this.upload.emitEventName,data);
        // this.dealFile(data)
            this.handleSuccess();
        }).catch((err)=>{
            this.$message.error(this.upload.submitErrorMsg);
            this.handleSuccess();
            console.log('err',err);
        });
      }
      else{
        return false;
      }
    },
    cancel(){
        this.upload.open=false;
    },
    checkFile(){
        let fileSuffix=this.upload.file.name.substring(this.upload.file.name.lastIndexOf('.')+1);
        console.log('whiteList',this.upload.whiteList);
        if(this.upload.whiteList.indexOf(fileSuffix)===-1){
            this.$message.error(this.upload.formatMsg);
            return false;
        }
        else{
            return true
        }
    },
    handleSuccess () { // 文件上传成功处理
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      // this.upload.open = false
    },
    handleFileUploadProgress () {// 文件上传中处理
      this.upload.isUploading = true
    },
  },
  created() {
  },
};
</script>