<template>
  <div class="uploadwin batch-import-reset">
    <div class="upload" v-if="addfile==false">
      <div class="up_title">批量导入{{titletext}}</div>
      <div class="up_box">
        <el-upload :class="{'none':isUpload == true}" class="upload-demo" :action="action" :multiple="false" accept=".xls,.xlsx" drag ref="upload"
          :auto-upload="false" :file-list="fileList" :on-change="handleFileListChange" :headers="headers" :on-success="onSuccess">
          <img class="up_img" src="@/assets/images/project/upload.png">
          <div class="up_text">点击选择或将文件(xls，xlsx)拖拽至此上传项目表格</div>
          <div class="up_tip">导入的文件内容必须依照下载模板的要求填写</div>
          <div class="up_tip">上传文件最大为2M，仅支持Excel表格文件（xls,xlsx)</div>
          <div class="up_tip">导入已存在的{{titletext}}将自动跳过</div>
        </el-upload>
        <div class="up_success" v-if="isUpload == true">
          <img src="@/assets/images/project/success.png">上传成功
        </div>
        <div class="btn_download" v-if="isUpload == false" @click="downloadClick">
          <div class="img"></div>点击下载
        </div>
      </div>
      <div class="btns">
        <div class="btn btn_primary btn_disabled h34" v-if="isUpload==false">确定导入</div>
        <div class="btn btn_primary h34" @click="importConfirmClick" v-else>确定导入</div>
        <div class="btn btn_default h34" @click="importCancel">取消</div>
      </div>
    </div>
    <div class="success" v-if="addfile==true">
      <div v-if="addsuccess==false">
        <img class="img" src="@/assets/images/project/clock.png">
        <div class="p1">查询数据中...</div>
        <div class="p2">请耐心等待，过程大概30秒</div>
      </div>
      <div v-if="addsuccess == true">
        <div class="p3">
          <img src="@/assets/images/project/success.png">查询成功
        </div>
        <!--<div class="p2">导入成功，已为您去掉重复{{titletext}}{{successCount}}条</div>-->
        <div class="p2">{{messages}}</div>
        <div class="btns">
          <div class="btn btn_primary h32" @click="getmsg">查看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import "@/assets/styles/project.scss";
export default {
  name: 'batchImportReset',
  props: {
    importtype: ''
  },
  data() {
    return {
      isUpload: false,//有上传的文件
      addfile: false,//已上传文件
      addsuccess: false,//已成功加入数据
      //批量导入
      action: "",
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      downloadhref: '',//样例地址
      titletext: '',
      successCount: 0,//成功条数
      messages: '',
    };
  },
  created() {
    this.downloadhref = '/file/bidOpeningRecordTemplate.xlsx';
    this.titletext = '开标记录';
    this.action = process.env.VUE_APP_BASE_API + `/business/open/tender/importData/${this.$route.query.id}`;
  },
  methods: {
    getmsg() {
      this.importCancel();
      this.$emit('getdatas');
    },
    handleFileListChange(file, fileList) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xlsx";
      const extension1 = testmsg === "xls";
      if (!extension && !extension1) {
        this.$message({
          message: "上传文件只能是.xls,.xlsx格式!",
          type: "warning",
        });
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$refs.upload.clearFiles();
        this.$message({
          message: '上传文件大小不能超过 2MB!',
          type: 'warning'
        });
        return false;
      }
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]];
        this.isUpload = true;
      }
    },
    onSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.successCount = res.successCount;
        let str = '成功导入条数' + res.successCount + ',失败条数' + res.errorCount;
        this.messages = str;
        this.addsuccess = true;
      } else {
        this.importCancel();
        this.$message.error({ message: res.msg, showClose: true });
      }
    },

    downloadClick() {
      let a = document.createElement("a");
      a.setAttribute("href", this.downloadhref);
      a.setAttribute("download", "批量导入模版.xlsx");
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    // 批量导入
    importConfirmClick() {
      if (this.fileList.length > 0) {
        this.$refs["upload"].submit();
        this.addfile = true;
      } else {
        this.$message("请先选择文件");
      }
    },
    importCancel() {
      this.addfile = false;
      this.isUpload = false;
      this.addsuccess = false;
      this.$emit('cancels');
    },
  }
}
</script>

<style scoped>
</style>
