<template>
  <a href="javascript:;" class="file">
    {{ file && file.name ? file.name : "选择文件" }}
    <input
      id="fileSelect"
      ref="referenceUpload"
      type="file"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
      runat="server"
      @change="upload"
    >
  </a>
</template>

<script>
import * as XLSX from 'xlsx';
export default {
  name: 'BatchUpload',
  data() {
    return {
      file: null
    };
  },
  methods: {
    upload(e) {
      // 若出现files赋值未知错误值或照片长度不对则return
      if (!e.target.files || e.target.files.length < 1) {
        return;
        // return this.$message.error('请上传excel文件')
      }
      // 如果是批量上传图片走这里
      // if (this.file) {
      //   if (!this.needFileNameList) {
      //     return this.$message.error('请选择命名参数')
      //   }
      //   if (this.needFileNameList.indexOf('name') === -1) {
      //     return this.$message.error('姓名为必填项')
      //   }
      //   if (this.needFileNameList.indexOf('idNumber') > -1 || this.needFileNameList.indexOf('cardIdEx') > -1 || this.needFileNameList.indexOf('phone') > -1) {
      //     // 找出所有图片
      //     this.getPhotoList(Array.from(files))
      //   } else {
      //     return this.$message.error('手机号、身份证、卡号任选其一必选')
      //   }
      // }

      // 处理excel
      this.file = e.target.files[0];
      this.getJsonList(this.file);
    },
    // getPhotoList(files) {
    //   const photoList = {
    //     correct: [],
    //     incorrect: []
    //   }
    //   files.forEach((item) => {
    //     const arr = item.name.split('.')
    //     const formatStyle = arr[arr.length - 1]
    //     // 若文件类型不在指定类型中，则不处理
    //     if (!this.formatStyles.includes(formatStyle)) {
    //       photoList.incorrect.push({
    //         reason: '文件格式要求为' + this.formatStyles.join(',') + ',上传的类型为' + formatStyle,
    //         file: item
    //       })
    //       return
    //     } else if (item.size > 1024 * 1024 * 2) {
    //       // 要求文件大小不大于指定值 单位：字节
    //       photoList.incorrect.push({
    //         reason: '单张图片大小要求为2M内,上传的图片大小为' + item.size / 1024 / 1024 + 'M',
    //         file: item
    //       })
    //       return
    //     }

    //     const obj = this.matchNeedFileNameList(item, arr[0])
    //     photoList[obj.status ? 'correct' : 'incorrect'].push(obj.file)
    //   })
    //   this.doUpload(photoList)
    // },
    // matchNeedFileNameList(file, fileName) {
    //   const arrContent = fileName.split('-')
    //   const obj = {
    //     status: true,
    //     file: {}
    //   }
    //   if (arrContent.length < this.needFileNameList.length ||
    //     arrContent.some((name) => {
    //       return !name
    //     })
    //   ) {
    //     return {
    //       status: false,
    //       file: {
    //         reason: '文件没有按指定要求命名,需要' + this.needFileNameList.join(','),
    //         file: file
    //       }
    //     }
    //   }
    //   this.needFileNameList.forEach((item, index) => {
    //     obj.file[item] = arrContent[index].trim() || ''
    //   })
    //   obj.file['avatar'] = file
    //   return obj
    // },
    doUpload(photoList) {
      this.$emit('getFileList', photoList);
      this.$refs.referenceUpload.value = null;
    },
    // 处理excel文件的内容
    getJsonList(file) {
      const reader = new FileReader();
      const photoList = {
        correct: [],
        incorrect: []
      };
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        // 获取传递的表格
        const binaryString = e.target.result;
        // 以二进制流方式读取到整份的excel 表格对象
        const workbook = XLSX.read(binaryString, {
          type: 'binary',
          sheetRows: 0,
          codepage: 936
        });
        let data = [];
        // 遍历每张表读取
        for (const sheet in workbook.Sheets) {
          data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
        }
        photoList['correct'] = data;
        this.doUpload(photoList);
      };
    },
    clearFile() {
      this.file = null;
    }
  }
};
</script>

<style scoped>
/*批量导入按钮*/
.file {
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 100%;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.el-button {
  margin-left: 20px;
}
</style>
