<template>
  <div>
    <el-tabs
      type="border-card"
      v-loading.fullscreen.lock="loading">
      <el-tab-pane label="参保覆盖人员">
        <el-alert
          align="left"
          title="请上传格式完全相同的excel,格式如下:"
          type="warning"
          :closable="false"
          show-icon>
        </el-alert>
        <table style="text-align: center;border-collapse: collapse" cellspacing="0px" cellpadding="0px">
          <tr>
            <td style="border: 1px solid black">&nbsp;统筹区&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;街道或乡镇名称&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;社区名称&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;所属组&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;户口所在地&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;户口性质&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人编号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;证件号码&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;姓名&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;性别&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;民族&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;出生日期&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;险种类型&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;参保状态&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;是否老农保&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;缴费状态&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;缴费档次&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;人员类别&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;离退休标志&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人身份&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;参保日期&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;档案编号&nbsp;</td>
          </tr>
        </table>
        <el-upload
          style="margin-top: 10px"
          class="upload-demo"
          ref="upload1"
          :action="baseInfoUrl"
          multiple
          drag
          accept=".xls,.xlsx"
          :limit="5"
          :headers="myHeader"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件,一次最多只能上传5个文件</div>
        </el-upload>
        <el-button style="margin-top: 10px" size="small" type="success" @click="submitUpload1">数据导入</el-button>
      </el-tab-pane>
      <el-tab-pane label="缴费情况明细">
        <el-alert
          align="left"
          title="请上传格式完全相同的excel,格式如下:"
          type="warning"
          :closable="false"
          show-icon>
        </el-alert>
        <table style="text-align: center;border-collapse: collapse" cellspacing="0px" cellpadding="0px">
          <tr>
            <td style="border: 1px solid black">&nbsp;个人编号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;公民身份证&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;姓名&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;当前人员类别&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;缴费档次&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;应缴类型&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人应缴&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个级财政补助和&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;代缴金额&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;对应费款所属期&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;险种类型&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;收缴方式&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;足额到账标志&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;足额到账年月&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;经办时间&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;经办人&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;征收方式&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;银行编号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;银行账号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;乡镇&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;村&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;组&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;地址&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;户口所在地&nbsp;</td>
          </tr>
        </table>
        <el-upload
          style="margin-top: 10px"
          class="upload-demo"
          ref="upload2"
          :action="payInfoUrl"
          multiple
          drag
          accept=".xls,.xlsx"
          :limit="5"
          :headers="myHeader"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件,一次最多只能上传5个文件</div>
        </el-upload>
        <el-button style="margin-top: 10px" size="small" type="success" @click="submitUpload2">数据导入</el-button>
      </el-tab-pane>
      <el-tab-pane label="领取人员">
        <el-alert
          align="left"
          title="请上传格式完全相同的excel,格式如下:"
          type="warning"
          :closable="false"
          show-icon>
        </el-alert>
        <table style="text-align: center;border-collapse: collapse" cellspacing="0px" cellpadding="0px">
          <tr>
            <td style="border: 1px solid black">&nbsp;乡镇&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;村（社区）&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;村组&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;户籍地地址&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;常住地地址&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人编号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;证件号码&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;姓名&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;待遇发放状态&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;最大发放期&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;银行&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;户名&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;账号&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;视同缴费月数&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;实际缴费月数&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;军龄折算月数&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;特殊工种折算月数&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;离退休日期&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;当前月领取标准&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人账户总金额&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;省级财政部分所占比例&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;市级财政部分所占比例&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;县级财政部分所占比例&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;集体补助部分所占比例&nbsp;</td>
            <td style="border: 1px solid black">&nbsp;个人缴费部分所占比例&nbsp;</td>
          </tr>
        </table>
        <el-upload
          style="margin-top: 10px"
          class="upload-demo"
          ref="upload3"
          :action="grantInfoUrl"
          multiple
          drag
          accept=".xls,.xlsx"
          :limit="5"
          :headers="myHeader"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件,一次最多只能上传5个文件</div>
        </el-upload>
        <el-button style="margin-top: 10px" size="small" type="success" @click="submitUpload3">数据导入</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      ref="dialog"
      :title="dialogTitle"
      width="30%"
      :visible.sync="dialogVisible">
      <span v-text="dialogContent" style="font-size: 16px"></span>
    </el-dialog>
  </div>
</template>

<script>
  import {baseUrl} from "../../utils/global";
  import Cookies from "js-cookie";

  let uploadedList = [];
  export default {
    name: "importByExcel",
    data() {
      return {
        baseInfoUrl: baseUrl + "/baseInfo/importFromNewExcel",
        payInfoUrl: baseUrl + "/payInfo/importFromExcel",
        grantInfoUrl: baseUrl + "/grantInfo/importFromExcel",
        myHeader: {
          token: Cookies.get("token")
        },
        fileList: [],
        dialogTitle: "",
        dialogVisible: false,
        dialogContent: "",
        loading: false
      };
    },
    methods: {
      submitUpload1() {
        this.$refs.upload1.submit();
      },
      submitUpload2() {
        this.$refs.upload2.submit();
      },
      submitUpload3() {
        this.$refs.upload3.submit();
      },
      handleExceed() {
        this.$message.warning("当前限制选择 1 个文件，请删除后继续上传");
      },
      handleBeforeUpload(file) {
        // this.loading = true;
        if (!file.name.endsWith(".xls") && !file.name.endsWith(".xlsx")) {
          this.$message.warning(file.name + "不是excel文件");
          this.loading = false;
          return false;
        }
        // if (uploadedList.includes(file.name)) {
        //   this.$message.warning(file.name + "已被选中过,请勿重复选择");
        //   return false;
        // }
        // uploadedList.push(file.name);
      },
      async uploadSuccess(response) {
        this.fileList = [];
        this.dialogTitle = "导入结果";
        this.dialogContent = response.data;
        // this.dialogVisible = true;
        this.loading = false;
        console.log("upload success");
        this.$message({
          type: "success",
          message: response.data,
          showClose: true,
          duration: 0
        });
      },
      async uploadError(response) {
        this.fileList = [];
        this.dialogTitle = "导入结果";
        this.dialogContent = "导入失败";
        // this.dialogVisible = true;
        this.loading = false;
        console.log(response);
        this.$alert(response.data, '导入结果', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
