<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="参保覆盖人员" v-loading="loading">
        <div style="width: 25%;float: left">
          <el-upload
            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"
            :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>
        </div>
        <div style="width: 75%;float: left">
          <el-alert
            align="left"
            title="请上传格式完全相同的excel,格式如下:"
            type="warning"
            description="统筹区,街道或乡镇名称,社区名称,所属组,户口所在地,户口性质,个人编号,证件号码,姓名,性别,民族,出生日期,险种类型,参保状态,是否老农保,缴费状态,缴费档次,人员类别,离退休标志,个人身份,参保日期,档案编号"
            show-icon>
          </el-alert>
        </div>
      </el-tab-pane>
      <el-tab-pane label="缴费情况明细">
        <el-upload
          class="upload-demo"
          ref="upload2"
          action="/"
          multiple
          accept=".xls,.xlsx"
          :limit="5"
          :headers="myHeader"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">数据导入</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件,一次最多只能上传5个文件</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="领取人员">
        <el-upload
          class="upload-demo"
          ref="upload3"
          action="/"
          multiple
          accept=".xls,.xlsx"
          :limit="5"
          :headers="myHeader"
          :before-upload="handleBeforeUpload"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload3">数据导入</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件,一次最多只能上传5个文件</div>
        </el-upload>
      </el-tab-pane>
    </el-tabs>
  </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",
        myHeader: {
          token: Cookies.get("token")
        },
        fileList: []
      };
    },
    methods: {
      submitUpload1() {
        this.$refs.upload1.submit();
      },
      submitUpload2() {
        this.$refs.upload2.submit();
      },
      submitUpload3() {
        this.$refs.upload3.submit();
      },
      handleExceed() {
        this.$message.warning("当前限制选择 1 个文件，请删除后继续上传");
      },
      handleBeforeUpload(file) {
        if (!file.name.endsWith(".xls") && !file.name.endsWith(".xlsx")) {
          this.$message.warning(file.name + "不是excel文件");
          return false;
        }
        // if (uploadedList.includes(file.name)) {
        //   this.$message.warning(file.name + "已被选中过,请勿重复选择");
        //   return false;
        // }
        // uploadedList.push(file.name);
      },
      uploadSuccess(response) {
        console.log(response)
        this.$alert(response.data, '导入结果', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
        // this.$message.success({
        //   message: response.data,
        //   duration: 0,
        //   showClose: true
        // })
      }
    }
  }
</script>

<style scoped>

</style>
