import jschardet from 'jschardet'
import Papa from 'papaparse'
/**
 * csv file to 2D arr
 * */
// 檢查編碼，引用了 jschardet
function checkEncoding(base64Str) {
  // 這種方式得到的是一種二進(jìn)制串
  var str = atob(base64Str.split(';base64,')[1])
  // console.log(str);
  // 要用二進(jìn)制格式
  var encoding = jschardet.detect(str)
  encoding = encoding.encoding
  // console.log( encoding );
  if (encoding === 'windows-1252') {	// 有時(shí)會(huì)識(shí)別錯(cuò)誤（如UTF8的中文二字）
    encoding = 'ANSI'
  }
  return encoding
}
function csv(file) {
  return new Promise((resolve, reject) => {
    // let file = this.$refs.csvData.files[0]
    const fReader = new FileReader()
    fReader.readAsDataURL(file)
    fReader.onload = function (evt) {
      const data = evt.target.result
      // console.log( data );
      const encoding = checkEncoding(data)
      // console.log(encoding);
      // 轉(zhuǎn)換成二維數(shù)組，需要引入Papaparse.js
      Papa.parse(file, {
        encoding: encoding,
        complete: function (results) {		// UTF8 \r\n與\n混用時(shí)有可能會(huì)出問題
          // console.log(results)
          const res = results.data
          if (res[res.length - 1] === '') {	// 去除最后的空行
            res.pop()
          }
          resolve(res)
        }
      })
    }
  })
}
export default {
  csv
}

<template>
  <div class="testIndex">
    <el-row>
      <el-col :span="12"> <el-button
          @click="outBtn"
          type="success"
        >導(dǎo)出</el-button></el-col>
      <el-col :span="12">
        <el-upload
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :file-list="fileListUpload"
          accept=".csv"
          :auto-upload="false"
        >
          <el-button
            size="small"
            type="primary"
          >點(diǎn)擊上傳</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 50%"
      :header-cell-style="{background:'#EEF6FD',color:'#251E25'}"
      slot="empty"
    >
      <el-table-column
        prop="number"
        label="#"
        width="50%"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="字段名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="nameRemark"
        label="備注名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="index"
        label="索引字段"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 彈框 -->
    <el-dialog
      title="數(shù)據(jù)導(dǎo)出"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form
        :model="exportForm"
        ref="exportForm"
        label-position="right"
      >
        <el-form-item
          label="導(dǎo)出格式"
          prop="exportFormat"
        >
          <el-select
            v-model="exportForm.exportFormat"
            placeholder="請(qǐng)選擇"
          >
            <el-option
              label="CSV"
              value="0"
            ></el-option>
            <el-option
              label="XML"
              value="1"
            ></el-option>
            <el-option
              label="HTML"
              value="2"
            ></el-option>
            <el-option
              label="PDF"
              value="3"
            ></el-option>
            <el-option
              label="Excel"
              value="4"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="handleExprotData"
        >確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { exportCsv } from "@/utils/testUtils";
import csv2arr from "@/assets/csv-arr";
export default {
  data() {
    return {
      dialogVisible1: false,
      exportForm: {
        id: "",
        exportFormat: "",
      },
      tableData: [
        // { id: 1, name: "XXX公司", test1: "測(cè)試11", test2: "測(cè)試22" },
        // { id: 2, name: "sdfds", test1: "測(cè)試11-2", test2: "測(cè)試22-2" },
        // { id: 3, name: "sff勝多負(fù)少", test1: "測(cè)試11-3", test2: "測(cè)試22-3" },
        // { id: 4, name: "兒童", test1: "測(cè)試11-4", test2: "測(cè)試22-4" },
      ],
      fileTemp: null,
      fileListUpload: [],
      fileList: [],
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible1 = false;
      this.exportForm = {
        id: "",
        exportFormat: "",
      };
    },
    // 導(dǎo)出按鈕，導(dǎo)出時(shí)觸發(fā)彈窗
    outBtn() {
      this.dialogVisible1 = true;
    },
    //#region 導(dǎo)出功能
    handleExprotData() {
      //表頭
      let allColumns = [
        { title: "名稱", key: "name" },
        { title: "測(cè)試1", key: "test1" },
        { title: "測(cè)試2", key: "test2" },
      ];
      let checkboxList = [
        { id: 1, name: "XXX公司", test1: "測(cè)試11", test2: "測(cè)試22" },
        { id: 2, name: "sdfds", test1: "測(cè)試11-2", test2: "測(cè)試22-2" },
        { id: 3, name: "sff勝多負(fù)少", test1: "測(cè)試11-3", test2: "測(cè)試22-3" },
        { id: 4, name: "兒童", test1: "測(cè)試11-4", test2: "測(cè)試22-4" },
      ];
      //this.checkboxList是勾選的需要導(dǎo)出的數(shù)據(jù)
      console.log("allColumns------", allColumns);
      console.log("checkboxList----", checkboxList);
      this.exportForm.exportFormat == 0 &&
        exportCsv(allColumns, checkboxList, "測(cè)試Csv");
    },
    //#endregion
    //#region 導(dǎo)入
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type == ".csv" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importcsv(file.raw);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式錯(cuò)誤，請(qǐng)刪除后重新上傳！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "請(qǐng)上傳附件！",
        });
      }
    },
    importcsv(obj) {
      let _this = this; //如果需要點(diǎn)擊事件結(jié)束之后對(duì)DOM進(jìn)行操作使用)_this.xx=xx進(jìn)行操作
      console.log("obj===", obj);
      //
      let data = [];
      csv2arr.csv(obj).then((res) => {
        console.log("我的數(shù)據(jù)", res);
        //遍歷csv文件中的數(shù)據(jù)，存放到data中 方法不唯一，可自己更改
        for (let i = 0; i < res.length - 1; i++) {
          let obj = {};
          obj.number = res[i][0];
          obj.name = res[i][1];
          obj.nameRemark = res[i][2];
          obj.index = res[i][3];
          data.push(obj);
        }
        console.log("截取第一位之前的數(shù)據(jù)==", data);
        data.splice(0, 1); //將數(shù)組第一位的表格名稱去除
        let num = 0;
        console.log("2024-4-1data==", data);
        _this.tableData = data; //將數(shù)據(jù)放入要展示的表格中
      });
    },
    //#endregion
    // csv() {
    //   csv2arr.csv(this.$refs.csvData.files[0]).then((res)=>{
    //         console.log('我的數(shù)據(jù)', res)
    //   })
    // }
  },
};
</script>