<template>
    <el-dialog title="批量查资质" custom-class="batch_import_dialog" :visible.sync="visible">
      <div class="upload" v-if="addfile==false">
        <div class="up_title">导入Excel文件，高效查询或导出企业信息；查询成功后可使用筛选项二次筛选</div>
        <div>
          <div class="step_box" v-for="(item,index) in list" :key="index">
            <span class="step">{{ index+1 }}</span><span class="step_text">{{ item }}</span><span class="step_line" v-if="index!=3"></span>
          </div>
        </div>
        <div class="up_box">
          <el-upload class="batch_import_upload"
                    :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/plus.png">
            <div class="up_text">点击选择文件或将文件拖拽至此导入企业名录</div>
            <div class="up_tip">· 导入的文件内容必须依照下载模板的要求填写）；</div>
            <div class="up_tip">· 上传文件最大为2M，仅支持Excel表格文件（xls，xlsx）；</div>
            <div class="up_tip">· 单次查询企业数量限时免费 5000 家。</div>
          </el-upload>
        </div>
        <div class="bd"></div>
        <div class="btns1 clearfix">
          <div class="btn btn_default  dowload"  @click="downloadClick"><img src="@/assets/images/download.png" alt="">下载模板</div>
          <div class="btn btn_primary btn_disabled fr" v-if="isUpload==false">查询</div>
          <div class="btn btn_primary fr" @click="importConfirmClick" v-else>查询</div>
          <div class="btn btn_default fr" @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">{{messages}}</div>
          <div class="btns">
            <div class="btn btn_primary h32" @click="getmsg">查看</div>
          </div>
        </div>
      </div>
    </el-dialog>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import "@/assets/styles/project.scss"
  import {importData} from '@/api/custom/custom'
  export default {
    name: 'batchImport',
    props:{
      importtype:''
    },
    data(){
      return{
        list:['下载模版','按要求在模板内填写企业全称名录','上传文件','查询结果'],
        visible:false,
        isUpload:false,//有上传的文件
        addfile:false,//已上传文件
        addsuccess:false,//已成功加入数据
        //批量导入
        action:"",
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        downloadhref:'',//样例地址
        successCount:0,//成功条数
        messages:'',
      }
    },
    created(){
      if(this.importtype == 'project'){//项目管理
        this.downloadhref = '/file/projectTemplate.xlsx'
        this.action = process.env.VUE_APP_BASE_API + '/business/info/upload'
      }
      if(this.importtype == 'custom'){//客户管理
        this.downloadhref = '/file/Template.xlsx'
        this.action = process.env.VUE_APP_BASE_API + "/customer/importData"
      }
    },
    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

          if(this.importtype == 'project'){//项目管理
            this.messages = res.msg
          }
          if(this.importtype == 'custom'){//客户管理
            let num = res.data?res.data.length:0
            let str = '成功导入客户条数'+res.successCount+',客户去重条数'+ num
            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.fileList = []
        this.$emit('cancels')
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .batch_import_dialog{
    width: 656px;
    border-radius: 4px;
    .el-dialog__header{
      font-size: 16px;
      color:#232323;
      font-weight:700;
    }
    .el-dialog__body{
      border-top: 1px solid #E5E6EB;
    }
    .up_title{
      font-size: 12px;
      color: #666666;
      position: absolute;
      top: 23px;
      left: 116px;
    }
    .upload{
      .step_box{
        display: inline-block;
        font-size: 12px;
        color: #3D3D3D;
        .step{
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #0081FF;
          color: #ffffff;
          margin-right: 4px;
          text-align: center;
          border-radius: 50%;
        }
        .step_line{
          width: 27px;
          height: 1px;
          display: inline-block;
          background:#D8D8D8;
          position: relative;
          top: -4px;
          margin:0 12px;
        }
      }
      .up_box{
        margin-top: 20px;
        .batch_import_upload{
          .el-upload-dragger{
            width: 616px;
            height: 224px;
            background: #F2F3F5;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #E5E6EB;
            .up_img{
              width: 14px;
              height: 14px;
              margin-top: 50px;
              margin-bottom: 24px;
            }
            .up_text{
              font-size: 14px;
              color: #232323;
              margin-bottom: 4px;
            }
            .up_tip{
              color: #999999;
              font-size: 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
        .el-upload-list__item{
          height: 36px;
          line-height: 36px;
          background: #F7F8FA;
          border-radius: 2px 2px 2px 2px;
          a{
            color: #1D2129;
          }
          .el-icon-close{
            top: 10px;
          }
        }
      }
      .bd{
          width: 656px;
          margin-left: -20px;
          height: 1px;
          background:#E5E6EB ;
          margin-top: 17px;
        }
      .btns1{
        .btn{
          border-radius: 2px;
          padding: 0 16px;
          width: auto;
          height: 32px;
          line-height: 32px;
          margin-top: 16px;
        }
        .btn_default{
          border-color: #DCDFE6;
          color: #232323;
          margin-left: 0;
        }
        .fr{
          float:right;
        }
        .dowload{
          img{
            width: 16px;
            height: 16px;
          }
        }
        .btn_disabled{
          background: #94BFFF;
          color: #ffffff;
        }
      }
    }
  }

</style>
