<template>
    <el-dialog title="批量查资质" custom-class="batch_import_dialog" :visible.sync="visible">
      <div class="upload" >
        <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>
    </el-dialog>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import "@/assets/styles/project.scss"
import {importTemplate} from '@/api/supplier/assistant.js';

  import {importData} from '@/api/custom/custom'
  export default {
    name: 'batchImport',
    props:{
      importtype:''
    },
    data(){
      return{
        list:['下载模版','按要求在模板内填写企业全称名录','上传文件','查询结果'],
        visible:false,
        isUpload:false,//有上传的文件
        addsuccess:false,//已成功加入数据
        //批量导入
        action:"",
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        downloadhref:'',//样例地址
      }
    },
    created(){
      this.downloadhref = importTemplate
      this.action = process.env.VUE_APP_BASE_API + '/export/aptitude/file'
    },
    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.addsuccess = true;
          this.$emit("loadingFn",true);
          this.$refs["upload"].clearFiles();
          this.isUpload = false;
        }else {
          this.importCancel()
          this.$message.error({ message: res.msg, showClose: true })
        }
      },

      downloadClick() {
        importTemplate().then(res=>{
          const link = document.createElement('a')        
          const blob = new Blob([res])        
          link.href = window.URL.createObjectURL(blob)
          link.download = '批量导入模版.xlsx' 
          link.click()
        })
      },
      // 批量导入
      importConfirmClick() {
        if (this.fileList.length > 0) {
          this.$refs["upload"].submit();
          this.visible = false;
          this.$emit("loadingFn")
        } else {
          this.$message("请先选择文件");
        }
      },
      importCancel(){
        this.isUpload = false;
        this.visible = 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>
