<template>
  <div class="upload-excel-container">
    <uploadExcel-component
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
    <a-table :columns="tableHeader" :data-source="tableData" :rowKey="(record, index) => index"></a-table>
    <a-form layout="inline">
      <a-row>
        <a-col :span="24" :offset="4">
          <a-form-item
            label="文件名"
            :label-col="{span: 7}"
            :wrapper-col="{ span: 16}"
          >
            <a-input placeholder="请输入要导出文件的名称" v-model="filename" />
          </a-form-item>
          <a-form-item 
            label="文件类型" 
            :label-col="{span: 7}"
            :wrapper-col="{ span: 14}"
          >
            <a-select
              :value="bookType"
              v-decorator="[
                'select'
              ]"
              style="width: 157.6px"
              placeholder="Please select a country"
            >
              <a-select-option value="xlsx">
                xlsx
              </a-select-option>
              <a-select-option value="csv">
                csv
              </a-select-option>
              <a-select-option value="txt">
                txt
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="自动列宽">
            <a-radio-group v-decorator="['radio-group']" v-model="autoWidth">
              <a-radio :value="true">
                是
              </a-radio>
              <a-radio :value="false">
                否
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="handleDownload">
              导出Excel
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import UploadExcelComponent from "@/components/UploadExcel.vue";

export default {
  name: "UploadExcel",
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: [],
      filename: "",
      bookType: "xlsx",
      autoWidth: true,
      tempHeader: [],
      tempData: [],
      downloadLoading: false,
    };
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (isLt1M) {
        return true;
      }

      this.$message({
        message: "Please do not upload files larger than 1m in size.",
        type: "warning",
      });
      return false;
    },
    handleSuccess({ results, header }) {
      console.log(results)
      console.log(header)
      this.tempHeader = header
      this.tempData = results
      let tempHeader = []
      header.forEach(item => {
        console.log(item)
        tempHeader.push({
          title: item,
          dataIndex: item,
        })
      })
      this.tableData = results;
      this.tableHeader = tempHeader;
    },
    async handleDownload() {
      this.downloadLoading = true;
      const { export_json_to_excel } = await import("@/vendor/ExportExcel");
      const tHeader = this.tempHeader
      const filterVal = this.tempHeader
      const list = this.tempData;
      const data = this.formatJson(filterVal, list);
      export_json_to_excel({
        header: tHeader,
        data,
        filename: this.filename,
        autoWidth: this.autoWidth,
        bookType: this.bookType,
      });
      this.downloadLoading = false;
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>