<template>
  <div class="uploadwin">
    <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"
  import {importData} from '@/api/custom/custom'
  export default {
    name: 'batchImport',
    props:{
      importtype:''
    },
    data(){
      return{
        isUpload:false,//有上传的文件
        addfile:false,//已上传文件
        addsuccess:false,//已成功加入数据
        //批量导入
        action:"",
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        downloadhref:'',//样例地址
        titletext:'',
        successCount:0,//成功条数
        messages:'',
      }
    },
    created(){
      if(this.importtype == 'project'){//项目管理
        this.downloadhref = '/file/projectTemplate.xlsx'
        this.titletext = '项目'
        this.action = process.env.VUE_APP_BASE_API + '/business/info/upload'
      }
      if(this.importtype == 'custom'){//客户管理
        this.downloadhref = '/file/Template.xlsx'
        this.titletext = '企业'
        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.$emit('cancels')
      },
    }
  }
</script>

<style scoped>

</style>
