<template>
  <div class="demo">
    <div class="form-item">
      <div class="form-title">
        <h5>模板下载:</h5>
      </div>
      <span class="download" @click.stop="downTemplate">global_template</span>
    </div>
    <div class="form-item">
      <div class="form-title">
        <h5>文件导入:</h5>
      </div>
      <el-upload
        size="small"
        action
        accept=".xlsx, .xls"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="useExcelHooks"
      >
        <el-button type="success">文件导入</el-button>
      </el-upload>
    </div>
    <common-table
      class="global-table"
      :table-header="tableHeader"
      :table-data="tableData"
    ></common-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import XLSX from 'xlsx';
import { downloadTemplaye } from '../../../../api/flow';

function downTemplate() {
  window.open(downloadTemplaye());
}

const tableHeader = ref([
  { label: '属性名称', name: 'name', 'min-width': '150' },
  { label: '属性ID', name: 'id', 'min-width': '150' },
  { label: '属性类型', name: 'type', 'min-width': '150' }
]);

// excel表数据处理
const tableData = ref([]);
function useExcelHooks(e: any) {
  const result = ref([]);

  // 文件读取
  function readFile(file: any) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        resolve(e.target.result);
      };
    });
  }
  function parseTableData(data: any) {
    tableData.value = [];
    if (Array.isArray(data) && data.length) {
      let el = {};
      data.forEach((item) => {
        el = {
          id: item.id,
          isValidate: item.isValidate || '',
          name: item.name || '',
          type: item.type || '',
          validateRules: {
            equal: item.equal || '',
            less: item.less || '',
            max: item.max || '',
            min: item.min || '',
            more: item.more || '',
            nullable: item.nullable || false,
            precision: item.precision || '',
            scale: item.scale || '',
            unequal: item.unequal || ''
          }
        };
        tableData.value.push(el);
      });
    }
  }

  // function unique(arr: any) {
  //   const res = new Map();
  //   return arr.filter(
  //     (a: any) =>
  //       !res.has(a.id) &&
  //       res.set(a.id, 1) &&
  //       !res.has(a.name) &&
  //       res.set(a.name, 1)
  //   );
  // }
  // excel转json
  function excelToJson() {
    const file = e.raw;
    readFile(file)
      .then((data) => {
        const workbook = XLSX.read(data, { type: 'binary' }); // 解析二进制格式数据
        console.log(workbook);
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个Sheet
        console.log(worksheet);
        result.value = XLSX.utils.sheet_to_json(worksheet); // json数据格式
        parseTableData(result.value);
        console.log(result.value);
      })
      .finally(() => {
        // props.table[props.activeName].data = unique([
        //   ...props.table[props.activeName].data,
        //   ...tableData.value
        // ]);
        return tableData.value;
      });
  }
  excelToJson();
}

defineExpose({
  tableData
});
</script>

<style scoped lang="scss">
.form-item {
  display: flex;
  align-items: center;
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 20px;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .download {
    text-decoration: underline;
  }
}
</style>