<template>
  <div class="curren-upload">
    <el-upload
      ref="upload"
      class="avatar-uploader"
      drag
      action="#"
      :http-request="httpRequestfiles"
      :file-list="searchData"
      :before-upload="beforeAvatarUpload"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      multiple
      :limit="limit"
      :accept="picExt"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
  name: "currenUpload",
  props: {
    limit: {
      type: Number,
      default: 0
    },
    searchData: {
      type: Array,
      default: () => {
        return []
      }
    },
    beforeUpload: {
      type: Function,
      default: () => {
        return Function
      }
    }
  },
  data () {
    return {
      isFileType: '',
      picExt:'.xlsx'
    }
  },
  methods: {
    httpRequestfiles (val) {
      let rd = new FileReader(); // 创建文件读取对象
      let file = val.file;
      this.$emit('httpRequestfiles', file)
      rd.readAsDataURL(file); // 文件读取装换为base64类型
    },
    beforeAvatarUpload (val) {
      let suffix = val.name.substring(val.name.lastIndexOf('.') + 1)
        if (this.picExt.indexOf(suffix) === -1) {
          this.$warningMsg('上传文件只能是 ' + this.picExt + '格式!')
          return false
        }
      return this.beforeUpload(val, this.searchData)

    },
    beforeRemove (val) {
      // if (val && val.status === "success") {
      //   return this.$confirm(`确定移除 ${val.name}？`);
      // }
    },
    handleRemove (file, fileList) {
      this.$emit('handleRemove', fileList)
    },
    handleExceed (val) {
      this.$warningMsg('最多上传' + this.limit + '个文件')
    }
  }
}
</script>