<template>
  <div class="app-content" style="height:75vh;overflow: auto;">
    <div class="submit-btn upload-header">
      <a :href="url.downloadUrl" download="ExpertInfo.xlsx">
        <a-icon type="download"></a-icon>&nbsp;<span style="color:green;text-decoration:underline;">模板下载</span>
      </a>
      <FileUpload @beforeUpload="beforeUpload" />
      <a-divider style="height: 1px; background-color: #e8e8e8;" />
    </div>
    <a-divider style="height: 1px; background-color: #e8e8e8;" />
    <div class="upload-table">
      <a-table :dataSource="tableData" :columns="columns" rowKey="index" :pagination="false" :loading="loading">
        <template slot="stateSwitch" slot-scope="record">
          <a-switch checked-children="正常" un-checked-children="注销" :checked="checkedState(record)" @change="switchChange($event, record)" />
        </template>
        <template slot="option" slot-scope="record">
          <a-button type="primary" size="small" @click="recordClick(record, 'view')">查看</a-button>
          <a-button type="primary" size="small" @click="recordClick(record, 'edit')">修改</a-button>
          <a-button type="primary" size="small" @click="recordClick(record, 'reset')">重置密码</a-button>
        </template>
      </a-table>
    </div>
    <div class="upload-bottom" style="text-align:center;padding:6px 0">
      <a-button type="primary" @click="dataImport" :disabled="disabled">导入</a-button>
    </div>
  </div>
</template>
<script>
import { isEmptyParams, readExcelFile, personGender, personBirthday, checkIdentitytionId, checkEmail, checkPhone } from "@/views/utils/common"
import moment from "moment"

export default {
  name: "expertImport",
  data () {
    return {
      columns: [
        { title: "姓名", dataIndex: "personName", align: 'center' },
        { title: "证件号", dataIndex: "certId", align: 'center' },
        // { title: "性别", dataIndex: "sex" },
        // { title: "出生日期", dataIndex: 'birthday' },
        { title: "手机号", dataIndex: "mobile", align: 'center' },
        { title: "邮箱", dataIndex: "email", align: 'center' },
        { title: "职称", dataIndex: "titleName", align: 'center' },
        { title: "专业", dataIndex: "specName", align: 'center' },
        { title: '单位', dataIndex: 'unitName', align: 'center' },
      ],
      tableData: [],
      disabled: true,
      loading: false,
      url: {
        downloadUrl: '/downloadFile/ExpertInfo.xlsx',
      }
    };
  },
  created () {

  },
  methods: {
    beforeUpload (file) {
      this.tableData = []
      let list = readExcelFile(file, 0)
      let certList = []
      let mobileList = []
      let exportList = []

      list.then((d) => {
        //读取文件数据
        d.forEach(e => {
          let gender = personGender(e.证件号)
          let birthday = personBirthday(e.证件号) + ' 00:00:00'
          let expert = { personName: e.姓名, certId: e.证件号, sex: gender, birthday: moment(birthday).format('YYYY-MM-DD HH:mm:ss'), mobile: e.手机号, email: e.邮箱, specName: e.专业, titleName: e.职称, unitName: e.单位 }
          exportList.push(expert)
          certList.push(e.证件号)
          mobileList.push(e.手机号)
        })

        let uniqueMobileList = [...new Set(mobileList)]
        if (uniqueMobileList.length != exportList.length) {
          this.$message.error('手机号出现重复！')
          return false
        }

        let uniqueCertList = [...new Set(certList)]
        if (uniqueCertList.length != exportList.length) {
          this.$message.error('证件号出现重复！')
          return false
        }
      
        if (exportList.length > 0) {
          this.tableData = exportList
          this.disabled = false
        }
      })

      return false
    },
    dataImport () {
      if (this.tableData.length == 0) {
        this.$message.error('请选择Excel！')
        return
      }
      let pars = isEmptyParams(this.tableData)
      let par = { ...pars }
      this.$api.expert.expertImport(this.tableData).then(({ data = {} }) => {
        if (data) {
          this.$message.info(data)
          this.tableData = []
        }
      })
    }
  },
};
</script>
<style scoped lang="less">
.upload-header {
  height: 30px;
}
.upload-table {
  min-height: 150px;
  max-height: calc(100% - 75px);
  overflow-y: auto;
}
.upload-bottom {
  height: 42px;
}
</style>