<template>
  <div>

    <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">乡镇</td>
        <td style="border: 1px solid black">村（社区）</td>
        <td style="border: 1px solid black">村组</td>
        <td style="border: 1px solid black">户籍地地址</td>
        <td style="border: 1px solid black">常住地地址</td>
        <td style="border: 1px solid black">个人编号</td>
        <td style="border: 1px solid black">证件号码</td>
        <td style="border: 1px solid black">姓名</td>
        <td style="border: 1px solid black">待遇发放状态</td>
        <td style="border: 1px solid black">最大发放期</td>
        <td style="border: 1px solid black">银行</td>
        <td style="border: 1px solid black">户名</td>
        <td style="border: 1px solid black">账号</td>
        <td style="border: 1px solid black">视同缴费月数</td>
        <td style="border: 1px solid black">实际缴费月数</td>
        <td style="border: 1px solid black">军龄折算月数</td>
        <td style="border: 1px solid black">特殊工种折算月数</td>
        <td style="border: 1px solid black">离退休日期</td>
        <td style="border: 1px solid black">当前月领取标准</td>
        <td style="border: 1px solid black">个人账户总金额</td>
        <td style="border: 1px solid black">省级财政部分所占比例</td>
        <td style="border: 1px solid black">市级财政部分所占比例</td>
        <td style="border: 1px solid black">县级财政部分所占比例</td>
        <td style="border: 1px solid black">集体补助部分所占比例</td>
        <td style="border: 1px solid black">个人缴费部分所占比例</td>
      </tr>
    </table>
<!--    <el-table-->
<!--      border-->
<!--      style="width: 100%">-->
<!--      <el-table-column-->
<!--        label="乡镇">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="村（社区）">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="村组">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="户籍地地址">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="常住地地址">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="个人编号">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="证件号码">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="姓名">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="待遇发放状态">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="最大发放期">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="银行">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="户名">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="账号">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="视同缴费月数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="实际缴费月数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="军龄折算月数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="特殊工种折算月数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="离退休日期">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="当前月领取标准">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="个人账户总金额">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="省级财政部分所占比例">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="市级财政部分所占比例">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="县级财政部分所占比例">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="集体补助部分所占比例">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        label="个人缴费部分所占比例">-->
<!--      </el-table-column>-->
<!--    </el-table>-->
    <el-upload
      style="margin-top: 10px"
      class="upload-demo"
      ref="upload3"
      :action="grantInfoUrl"
      multiple
      drag
      accept=".xls,.xlsx"
      :limit="1"
      :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文件,一次最多只能上传1个文件,且不能超过10MB</div>
    </el-upload>
    <el-button
      style="margin-top: 10px"
      size="small"
      type="success"
      @click="submitUpload3"
      v-loading.fullscreen.lock="loading">数据导入
    </el-button>
    <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: "importGrantInfoByExcel",
    data() {
      return {
        grantInfoUrl: baseUrl + "/grantInfo/importFromExcel",
        myHeader: {
          token: Cookies.get("token")
        },
        fileList: [],
        dialogTitle: "",
        dialogVisible: false,
        dialogContent: "",
        loading: false
      };
    },
    methods: {
      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 (file.size > 50 * 1024 * 1024) {
          this.$message.warning(file.name + "文件大于50MB,无法上传");
          this.loading = false;
          return false;
        }
      },
      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;
        this.$message({
          type: "error",
          message: "系统错误",
          showClose: true,
          duration: 3000
        });
        // console.log(response);
        // this.$alert(response.data, '导入结果', {
        //   confirmButtonText: '确定',
        //   callback: action => {
        //     // this.$message({
        //     //   type: 'info',
        //     //   message: `action: ${ action }`
        //     // });
        //   }
        // });
      },
    }
  }
</script>

<style scoped>

</style>
