<template>
    <el-form
      label-width="90px"
      :model="formList"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="24" class="importStep">
          <div class="step">
             <span class="stepTitle">第一步：</span>
             <span class="stepText"><a @click="DownloadTemplate()">点击下载导入模板文件</a><b>（请详细阅读文件中的填写提示，以免导入失败）</b></span>
          </div>
          <div class="step">
             <span class="stepTitle">第二步：</span>
             <span class="stepText">
               <strong>上传填写好的导入文件</strong>
               <el-upload
                class="upload-demo"
                action=""
                :http-request='uploadImg'
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
                :show-file-list='false'>
                <el-button size="small">上传文件</el-button>
              </el-upload>
             </span>
          </div>
          <div class="step">
             <span class="stepTitle">第三步：</span>
             <span class="stepText">
               <el-button type="primary" @click="importOk" :disabled="disabled">点击开始查询</el-button>
             </span>
          </div>
          <div class="step" v-if="resultShow">
             <span class="stepTitle">导入结果：</span>
             <span class="stepText stepImportInfo">
               <p><i class="resultbtn" @click="downloadurlClick" v-if="formList.totalFailed!=0">点击下载查询结果</i></p>
             </span>
          </div>
        </el-col>
      </el-row>
      
    </el-form>

    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()">确 定</el-button>
      <el-button @click="cancelForm()">取 消</el-button>
    </div> -->
</template>
<script>
import selectTree from "@/components/SelectTree";
import { batchImportSearchCertApi,commonFileUploadApi,downloadEmployeeExcelApi} from "@/api/staffApi.js"
import config from "@/utils/config";
import { uploadFile } from "@/utils/fileUpload.js";
export default {
  props: ["showdialogImport", "getTreeDepartlist"],
  watch: {
    showdialogImport() {
      this.dialogFormVisible = this.showdialogImport;
      this.path=""
      this.disabled=true
      this.resultShow=false
      this.formList.downloadUrl=""
    },
  },
  components: {
    selectTree //注册组件
  },
  data() {
    return {     
      title: "",
      dialogFormVisible: this.showdialogImport,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {
        // name: [{required: true, message: "请输入部门名称", trigger: "blur" }],        
      },
      path:"",//文件上传后生成的路径
      disabled:true,
      resultShow:false,
      emplyeeTitle:`导入${$SuperviseStr.employee}`,
      homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
    };
  },
  methods: {   
    DownloadTemplate(){//下载模板
       let url=`static/template/批量查询持证状态模板.xlsx`
        window.open(url)
    //   if(this.homeTemplateBoradType=='rtpayTemplate'){//rt项目
    //     let url=`static/template/员工导入文件模板.xlsx`
    //     window.open(url)
    //   }else{
    //       this.downloadEmployeeExcel()     
    //   }
    }, 
    // downloadEmployeeExcel(){
    //       let obj2={domainId:this.$route.query.domainId} 
    //      downloadEmployeeExcelApi(this.formList,obj2).then((response) => {
    //             const content = response;
    //             const blob = new Blob([content]);
    //             let domainName=localStorage.getItem('domainName')||''
    //             const fileName = `${$SuperviseStr.employee}导入模板.xls`;
    //             if ("download" in document.createElement("a")) {
    //               // 非IE下载
    //               const elink = document.createElement("a");
    //               elink.download = fileName;
    //               elink.style.display = "none";
    //               elink.href = URL.createObjectURL(blob);
    //               document.body.appendChild(elink);
    //               elink.click();
    //               URL.revokeObjectURL(elink.href); // 释放URL 对象
    //               document.body.removeChild(elink);
    //             } else {
    //               // IE10+下载
    //               navigator.msSaveBlob(blob, fileName);
    //             }
    //         });
    // },
    uploadImg(e){//文件上传
      // 使用公共的文件上传方法
      uploadFile(e, {
        onSuccess: (path) => {
          this.path = path;
          if(this.path){//上传文件成功启用
            this.disabled = false;
          }
        },
        context: this,
        domainId: this.$route.query.domainId || "default"
      });
    },
    importOk(){//点击开始导入
       let obj2={domainId:this.$route.query.domainId||localStorage.getItem('domainId')}
       batchImportSearchCertApi(this.path,obj2).then(response=>{
             if (response.status==200) {             
                this.formList.downloadUrl=response.data
                this.resultShow=true
                if(this.path){//上传文件成功禁用
                  this.disabled=true
                }
             }           
       })
    },
    downloadurlClick(){
        if(this.formList.downloadUrl){
          window.open('/obpm'+this.formList.downloadUrl)//proxy代理v3下载         
        }
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    getTableRow(data, type) {       
      let newRowData = JSON.parse(JSON.stringify(data)); //拷贝一份存储对象
      this.formList = newRowData; //拷贝一份存储对象引用不同地址
      this.OperType = type;
      console.log(this.formList.parentId)
      if (this.OperType == 0) {
        this.title = "添加";
       
      } else {
        this.title = "编辑";
        
      }
    },        
    submitForm() {   
      let obj2={domainId:this.$route.query.domainId}
      if (this.OperType == 0) {
        //新增
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.OperType == 0) {
            AddDepartmentsApi(this.formList,obj2).then((response) => {
              //新增
              if (response.status==200) {
                let newobj = JSON.parse(JSON.stringify(this.formList));
                this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                this.cancelForm();
              }
            });
          } else {
            EditDepartmentsApi(this.formList,obj2).then((response) => {
              //修改
              if (response.status==200) {
                let newobj = JSON.parse(JSON.stringify(this.formList));
                this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                this.cancelForm();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogImport", false);
      if(this.path){//上传文件成功
       this.$emit("refurlist", {}); //确定后发送$emit绑定父数据
      }
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
  },
};
</script>
<style lang="scss" scope>
.importStep{
    padding: 10px;
  .step{
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 30px;
    font-size: 14px;
    margin-bottom: 20px;
    .stepTitle{
       color:#1f2f3d;
    }
    .stepText{
       margin-left:35px;
       font-size: 12px;
       a{color: #0e71ff;margin-right:5px;}
       b{color: #f59a23;}       
    }
    .stepImportInfo{
      p{
        display: flex;
        flex-direction: column;
        line-height: 30px;
        margin: 0;
        em{color: #4b7902;}
        b{color: red;}
        i{ cursor: pointer;}
        .resultbtn{color: #0e71ff;}
      }
    }
    
  }
}
</style>