<template>
  <el-dialog title="上传附件" :visible.sync="open" width="500px" append-to-body>
    <el-upload
      ref="upload"
      :accept="enclosuresAccept"
      :headers="upload.headers"
      :before-upload="beforeUpload"
      :action="upload.url"
      :disabled="upload.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      :data="params"
      multiple
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">{{encTip}}</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import FileUpload from '@/components/FileUpload'
  import { getToken } from "@/utils/auth";
  export default {
    components: {
      FileUpload
    },
    props: {
      dataId: {
        type: Number
      },
      attachType: {
        type: String
      }
    },
    data() {
      return {
        // 项目导入参数
        enclosuresAccept: 'image/*, application/pdf, application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain,application/pdf,application/zip, application/x-rar',
        encTip: '上传格式为图片、PDF、WORD、EXCEL，ZIP，RAR，最大不超过15M',
        sizeLimit: 15,
        upload: {
          title: "导入资料附件",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/common/attach/upload"
        },
        open: false,
        disabled: false,
        form: {
          fileList: ''
        },
        rules: {
        },
        params: {
          attachType: this.attachType,
          dataId: this.dataId
        }
      }
    },
    methods: {
      init() {
        this.open = true;
        this.form.fileList = '';
        this.resetForm("form");
      },
      handleSuccess(files) {
        this.form.fileList = files;
        this.$refs.form.validateField('fileList');
      },
      beforeUpload(file) {
      	const isLTM = this.sizeLimit > 0 ? file.size / 1024 / 1024 < this.sizeLimit : true
      	let isInAccept = true
      	if (this.enclosuresAccept) {
      		isInAccept = false
      		if (file.type.indexOf('image') != -1) {
      			if (this.enclosuresAccept.indexOf('image') != -1) {
      				isInAccept = true
      			}
      		} else {
      			isInAccept = this.enclosuresAccept.indexOf(file.type) == -1 ? false : true
      		}
      		if (!isInAccept) {
      			this.$message.error(`文件格式错误`)
      		} else {
      			if (!isLTM) {
      				this.$message.error(`文件大小不能超过 ${this.sizeLimit}MB!`)
      			}
      		}
      	}
      	return isInAccept && isLTM
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.open = false;
        this.upload.isUploading = false;
        // 在全部文件完成上传后调用，清空上传列表
        let isAllSuccess = true;
        for (let item of fileList) {
        	if (item.status != "success") {
        		isAllSuccess = false;
        		break;
        	}
        }
        if (isAllSuccess) {
        	// 清空上传文件列表，否则影响上传文件数限制判断
        	this.$refs.upload.clearFiles();
          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
          this.$emit('refreshData')
        }

        // this.$refs.upload.clearFiles();

      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      cancel() {
        this.open = false;
      }
    }
  }
</script>

<style>
</style>
