<template>
  <div>
    <el-row>
      <el-button
        icon="el-icon-arrow-left"
        @click="goBackToCreateType"
        type="text"
        style="margin: 20px 0 0 20px"
      ></el-button>
    </el-row>
    <el-row class="inputcontext">
      <div>
        <!-- 文件选择按钮 -->
        <el-row :gutter="24">
          <el-col :span="8">
            <el-upload
              class="custom-el-upload"
              ref="upload"
              :on-change="handleFileChange"
              :file-list="fileList"
              :auto-upload="false"
              :on-remove="handleRemove"
              action="#"
              accept=".xlsx"
            >
                <el-button
                  icon="el-icon-upload"
                  type="primary"
                  style="margin-right: 20; margin-left: 20"
                  >上传文件</el-button
                >
                <!-- <input type="file" name="csvfile" ref="csvData" /> -->
              <div slot="tip" class="el-upload-tip;" style="color: orange">
                只支持xlsx文件上传，限制10M
              </div>
            </el-upload>
          </el-col>
            <el-col :span="5">     <el-button
                  icon="el-icon-download"
                  @click="handleCsvDownload"
                  >模板下载</el-button
                ></el-col>
          <el-col :span="4">
            <el-button icon="el-icon-eye"  style="margin-rignt:20" @click="handleCsvPrase"
              >预览</el-button
            ></el-col
          >
          <el-col :span="3">
             <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-col>
          <el-col :span="3">  <el-button @click="handleMessageCancel">重置</el-button></el-col>
        </el-row>
      </div>
    </el-row>
    <el-row class="inputcontext">
      <!-- <el-col :span="2">
        <span style="font-weight: bold">分群名称</span>
      </el-col> -->
      <el-col :span="8">
          <span style="font-weight: bold">分群名称</span>
        <el-input placeholder="请输入客群名称" style="width: 300px;margin-left:20px" v-model="groupName"></el-input>
      </el-col>
    </el-row>
    <el-row class="inputcontext">
      <!-- <el-col :span="2">
        <span style="font-weight: bold">客户类型</span>
      </el-col> -->
      <el-col :span="8">
         <span style="font-weight: bold">客户类型</span>
        <el-select v-model="custType" style="width: 300px;margin-left:20px">
          <el-option
            v-for="item in clientTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
        <!-- <div>
      <el-row class="inputcontext">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleMessageCancel">重置</el-button>
      </el-row>
    </div> -->
    <div style="margin-top: 50px">
      <el-row class="yulan">预览</el-row>
      <hr style="border-color: rgba(128, 128, 128, 0.2)" />
      <el-row class="inputcontext">
  
        <el-table :data="paginatedData" style="width: 80%" align="center">
            <el-table-column prop="客户号" label="客户号" align="center"></el-table-column>
            <el-table-column prop="客户内码" label="客户内码" align="center"></el-table-column>
            <el-table-column prop="客户姓名" label="客户姓名" align="center"></el-table-column>
            <el-table-column prop="证件号" label="证件号" align="center"></el-table-column>
            <el-table-column prop="归属客户经理姓名" label="归属客户经理姓名" align="center"></el-table-column>
            <el-table-column prop="归属网格名称" label="归属网格名称" align="center"></el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="tableData.length"
          :current-page="currentPage"
        ></el-pagination>
      </el-row>
    </div>
  <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="tableData.length"
          :current-page="currentPage"
        ></el-pagination>
  </div>
</template>

<script>

import * as XLSX from "xlsx";
import {Message} from 'element-ui'
import {importData} from '@/api/system/importdata.js'
// import axios from 'axios'
export default {
  data() {
    return {
      file: null,
      groupName:'',
      jsonData: [],
      tablekey: 0,
      fileList: [],
      tableData: [],
      tableHeaders: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      custType: "",
      clientTypeOptions: [
        { value: "0", label: "个人" },
        { value: "1", label: "商户" },
        { value: "2", label: "企业" },
      ],
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },

  methods: {
    handleMessageCancel() {
      this.custType='';
      this.groupName='';
      this.tableData=[];
      this.$refs.upload.clearFiles();
      Message.warning('取消提交!')
    },
    handleSubmit() {
      const formData = new FormData();
      if(this.groupName=='') {
        Message.error('分群名称不能为空')
        return;
      }
       if(this.custType=='') {
        Message.error('客户类型未选择')
        return;
      }
      if(this.$refs.upload.uploadFiles[0]?.raw==null) {
          Message.error('请上传文件侯提交')
           return;
      }
      formData.append('groupName',this.groupName)
      formData.append('file',this.$refs.upload.uploadFiles[0]?.raw)
      formData.append('custType',this.custType)
      importData(formData).then(res => {
        if(res.msg=='导入客群创建成功'){
           Message.success('添加成功')
           this.goBackToCreateType()
        }
      })
      
    },
    handleFileChange(file) {
      this.file = file;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    handleCsvPrase() {
      if (!this.file) return;
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json_data = XLSX.utils.sheet_to_json(worksheet);
        this.tableData = json_data;
      };
      reader.readAsBinaryString(this.file.raw);
    },

    goBackToCreateType() {

      this.$router.replace({
        path: this.$router.go(-1),
        query: {
          refresh:true
        }
      })
    },
    handleCsvDownload() {
      this.download(
        "/system/group/download",
        {},
        `customer_template_${new Date().getTime()}.xlsx`
      );
    },
    handleRemove() {
      this.tableData=[]
    }
  },
};
</script>

<style scoped>
.inputcontext {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.yulan {
  margin-left: 20px;
  font-weight: bold;
}
.custom-el-upload {
  margin-right: 20px;
}
</style>
