<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      action="#"
      :auto-upload="false"
      :on-change="handleExcelChange"
      multiple
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
    </el-upload>

    <el-button type="primary" style="margin-top: 10px" @click="emitData"
      >确认</el-button
    >
  </div>
</template>

<script>
export default {
  name: "ReadExcel",
  data() {
    return {
      excelData: undefined,
      fileList: undefined,
    };
  },
  created() {},
  methods: {
    handleExcelChange(file, fileList) {
      const _this = this;
      const inputDOM = this.$refs.inputer;
      this.file = file;
      console.log(this.file);

      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        console.log('#1',data);
        var XLSX = require("xlsx");
        var wb;
        if (typeof data === "string") {
          wb = XLSX.read(data, {
            type: "binary",
          });
        } else {
          wb = XLSX.read(new Uint8Array(data), {
            type: "array",
          });
        }
        var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log('#outdata',outdata);
        _this.excelData = outdata;
      };
      reader.readAsArrayBuffer(this.file.raw);
      console.log(_this.excelData);
    },
    emitData() {
      const excelData = this.excelData;
      console.log('##',excelData);
      const keys = [];
      const total = [];

      let keys1 = [
        "楼盘名称",
        "楼栋",
        "面积（㎡）",
        "户型",
        "楼层",
        "房号",
        "价格",
        "房屋情况介绍",
        "状态",
      ];
      excelData.map((item) => {
        keys.push(item["手机号"]);
        total.push(item["数量"]);
      });
      const payload = {
        // batchId: this.$route.query.id,
        keys,
        // total,
      };
      this.$emit("listenToChildEvent", payload);
    },
    clearFileList() {
      this.excelData = undefined;
      this.$refs.upload.clearFiles();
    },
  },
};
</script>

<style scoped></style>
