<template>
  <div>
    <BrandSelect v-model="brand_test" is-multiple @confirm="brandSel" />
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="impotEvent">选择文件</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-grid
      ref="xGrid1"
      border
      height="300"
      :columns="tableColumn"
      :data="tableData1"
    ></vxe-grid>
  </div>
</template>

<script>
  import BrandSelect from "@/component/goods/BrandSelect1.vue";
  export default {
    name: "Test",
    components: {
      BrandSelect,
    },
    data() {
      return {
        brand_test: "",
        tableColumn: [
          { type: "checkbox", width: 60 },
          { field: "name", title: "Name" },
          { field: "role", title: "Role" },
          { field: "sex", title: "Sex", formatter: this.formatterSex },
          { field: "age", title: "Age" },
          { field: "address", title: "Address", showOverflow: true },
        ],
        tableData1: [],
      };
    },
    methods: {
      brandSel(row) {
        console.log(row);
        this.brand_test = row[0].title;
      },
      formatterSex({ cellValue }) {
        if (cellValue === "1") {
          return "男";
        } else if (cellValue === "0") {
          return "女";
        }
        return "";
      },
      impotEvent() {
        this.$refs.xGrid1
          .readFile({
            types: ["xls", "xlsx"],
          })
          .then((params) => {
            const { files } = params;
            const fileReader = new FileReader();
            fileReader.onload = (ev) => {
              const data = ev.target.result;
              const workbook = this.$XLSX.read(data, { type: "binary" });
              console.log("csvDatacsvData", workbook);
              const csvData = this.$XLSX.utils.sheet_to_csv(
                workbook.Sheets.Sheet1
              );
              const tableData = [];
              // 解析数据
              csvData.split("\n").forEach((vRow) => {
                if (vRow) {
                  const vCols = vRow.split(",");
                  const item = {};
                  vCols.forEach((val, cIndex) => {
                    const column = this.tableColumn[cIndex];
                    if (column.field) {
                      item[column.field] = val;
                    }
                  });
                  tableData.push(item);
                }
              });
              this.tableData1 = tableData;
            };
            fileReader.readAsBinaryString(files[0]);
          });
      },
    },
  };
</script>

<style scoped></style>
