<template>
  <div class="examku">
    <main id="main">
      <!--==========================
        Profile Section
      ============================-->
      <section id="profile">
        <div class="container mt30" style="margin-top: 0px">
          <!--    <el-row :gutter="20">-->
          <!-- <el-alert type="info" effect="dark" v-if="showAlert" :closable="false">
            您【{{appleTypeStr}}】的申请已提交，平台审核后会站内消息通知您。
          </el-alert> -->
          <div v-if="showAlert">
            <el-tag color='#F7F7F7' >您【实名认证】的申请已提交，平台审核后会站内消息通知您。</el-tag>
            <el-tag color='#F2A51A' style="color:#FFFFFF;margin-left:17px;border:none;">实名认证信息</el-tag>  
          </div>
          <br/>
          <div id="con_a_3" class="profile-info">
              <div  style="border: 1px solid #DCDCDC;border-radius:5px;padding:0 20px;margin:20px 0;width:80%">
                <h4 style="font-weight: bold;color:#0066EB;margin-bottom:0px">实名认证</h4>
                <div class="testuser" style="margin-bottom:20px">                  
                    <div style="color:#808080;font-size:14px;line-height:15px;">   
                        <p >实名认证通过后可在众包服务下报名承接测试项目</p>
                        <!-- <p >普通用户可提交个人身份信息和资历升级为个人测试者。</p> -->
                        <!-- <p>个人测试者可在测试任务众包市场中应征和承接测试项目，完成任务可获取赏金。</p> -->
                    </div>
                    <!--   -->
                    <el-button size="small"  :disabled="testerStatus==1"  @click="x2ctChild" >
                      <span v-if="testerStatus==0">升级为实名认证</span>
                      <span v-if="testerStatus==1">实名认证审核中</span>
                      <span v-if="testerStatus==2">查看认证信息</span>
                      <span v-if="testerStatus==3">修改实名认证</span>
                    </el-button>
                </div>
                <div v-if="testerStatus==3" style="color:#808080;font-size:14px;line-height:15px;margin:10px 0">
                    <span >注：</span>
                    <span style="color:#fa3534">{{testerdata.auditOpinion?testerdata.auditOpinion:'无'}}，</span>
                    <span>审核未能通过，请完善后再提交</span>
                </div>
              </div>
              
            </div>
        </div>
      </section>
    </main>
    <el-dialog v-if="certification" :title="title" :visible.sync="certification" width="800px" append-to-body :close-on-click-modal="false" >
      <el-form ref="certifform" :model="certifform" :rules="certifRules" label-width="150px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="certifform.name" :disabled="testerStatus==2" placeholder="请输入真实姓名"/>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idNumber">
          <el-input v-model="certifform.idNumber" :disabled="testerStatus==2" placeholder="请输入身份证号码"/>
        </el-form-item>
        <!-- <el-form-item label="所在城市" prop="city">
          <el-input v-model="certifform.city" placeholder="请输入所在城市"/>
        </el-form-item>
        <el-form-item label="个人技能" prop="testSkills">
          <el-input  v-model="certifform.testSkills" type="textarea"  placeholder="请输入内容" />
          <el-popover placement="top-start" title="示例：" width="400" trigger="hover" >
            <span>性能测试LoadRunner, Jmeter，自动化测试Selenium</span>
            <el-link slot="reference" style="color: #46a6ff;" :underline="false">查看示例</el-link>
          </el-popover>
        </el-form-item>
        <el-form-item label="技能证书" prop="idCardFrontUrl">
            <multi-upload v-model="certifform.certificateUrl" :serverAddr="materialServerAddr" @setImgPath='setImgPath' fileName="技能证书" :limit="1" />
        </el-form-item>
        <el-form-item label="工作经历" prop="workExperience">
          <el-input v-model="certifform.workExperience" type="textarea" placeholder="请输入内容" />
          <el-popover placement="top-start" title="示例：" width="500" trigger="hover">
            <span>2017.5-2021.7 西安未央软件有限公司 软件测试工程师<br>
             2013.9-2017.4. 西安大唐软件有限公司 软件测试工程师<br>
             2009.9-2013.7 西安电子科技大学 软件工程专业 本科
            </span>
            <el-link slot="reference" style="color: #46a6ff;" :underline="false">查看示例</el-link>
          </el-popover>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="submitbtn"> 
          <el-button type="primary" @click="certtSubmitForm" :disabled="testerStatus==2">确 定</el-button>
        </div>
        <el-button  @click="certCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {apple_type} from "@/api/system/user";
  import {
    listTesterApply,
    getTesterApplyByUid,
    delTesterApply,
    addC2CT,
    updateTesterApply,
    exportTesterApply,
    certificationStatus,
    addTesterApply,
  } from "@/api/tester/TesterApply";
  import {
    listCompanyApply,
    getCompanyApplyByUid,
    delCompanyApply,
    addCompanyApply,
    updateCompanyApply,
    exportCompanyApply,gettesterId,addtesterApply,updatetesterApply
  } from "@/api/tester/CompanyApply";
  import {VueCropper} from "vue-cropper";
  import MultiUpload from "@/page/common/MultiUpload";
  import NonimageUpload from "@/page/common/NonimageUpload";
  import {getInfo} from '@/api/system/login'

  export default {
    components: {
      MultiUpload,
      NonimageUpload,
      VueCropper,
    },
    props: {
      user: {
        type: Object,
      },
    
    },
    computed: {
            ...mapGetters(['userinform']),
           
        },
    data() {
      return {
        bArray: [
          [true, true],
          ["升级为认证公司用户", "升级为测试认证"],
          // ["升级为认证公司用户", "升级为认证测试公司", "升级为个人测试者"],
        ],
        certification:false,
        showAlert: false,
        appleTypeStr: "",
        testerApplyB: {},
        companyApplyB: {},
        // p2ct表单参数
        userInfo: {},
        testerApply: {},
        companyApply: {},
        certifform:{applyId:'',userId:'',name:'',idNumber:'',city:'',certificateUrl:[],testSkills:'',workExperience:''},
        form: {},
        // 弹出层标题
        title: "",
        // 是否显示regCompany弹出层
        regCompanyOpen: false,
        // 是否显示p2pt弹出层
        p2ptOpen: false,
        // 是否显示p2ct弹出层
        p2ctOpen: false,
        // 是否显示c2ct弹出层
        c2ctOpen: false,
        rules: {},
        // 个人测试者表单校验
        certifRules: {
          name: [
            {required: true, message: "真实姓名不能为空", trigger: "blur"},
            {max: 20, message: '最多输入20个中文', trigger: 'blur' },
            {
              pattern:
                /^(?:[\u4e00-\u9fa5·]{2,16})$/,
              message: "请输入中文",
              trigger: "blur",
            },
          ],
          // city: [
          //   {required: true, message: "所在城市不能为空", trigger: "blur"},
          // ],
          idNumber: [
            {required: true, message: "身份证号码能为空", trigger: "blur"},
            {
              pattern:
                /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "请输入正确的身份证号码",
              trigger: "blur",
            },
            {max:18, message: '身份证长度为18', trigger: 'change' },
					  {min:18, message: '身份证长度为18', trigger: 'change' },
          ],
         
          // testSkills: [
          //   {required: true, message: "个人技能不能为空", trigger: "blur"},
          // ],
         
          // certificateUrl: [
          //   {
          //     required: true,
          //     message: "请上传身份证正面",
          //     trigger: "change",
          //   },
          // ],
        
        },
        materialServerAddr: "",
        allFileGetFlag: false,
        testerdata:null,
        testerStatus:0,
      };
    },
    created() {
      this.certifform.userId=this.userinform.userId;
      if(this.userinform){
        this.getcertinfor()
        getInfo().then(res => {
          const user = res.user
          this.$store.commit("SET_USERINFORM",user);
        })
      }
      
    },
    methods: {
      getcertinfor(){
        gettesterId(this.userinform.userId).then(res=>{
            this.testerdata=res.data;
            if(this.testerdata){
              let {applyId,name,idNumber,city,certificateUrl,testSkills,workExperience,userId}=this.testerdata;
              // let setidNumber=
              let imglist=[];
              if(certificateUrl){
                  imglist.push(certificateUrl)
              }
              this.certifform={applyId,name,idNumber,city,certificateUrl:imglist,testSkills,workExperience,userId}
              if(this.testerdata){
                if(this.testerdata.status==0){
                  this.testerStatus=1
                  this.istest=true
                }else if(this.testerdata.status==1){
                  this.testerStatus=2   
                  // this.certifform.idNumber=this.certifform.idNumber.slice(0,2)+'************'+idNumber.slice(14)               
                  this.istest=true
                }else if(this.testerdata.status==2){
                  this.testerStatus=3
                }else{
                  this.testerStatus=0
                }
              }
            }
        })
      },
      x2ctChild(){
        // this.getcertinfor()
        // this.certification=true
        // return;

        gettesterId(this.userinform.userId).then(res=>{
            this.testerdata=res.data;
            if(this.testerdata){
              let {applyId,name,idNumber,city,certificateUrl,testSkills,workExperience,userId}=this.testerdata;
              // let setidNumber=idNumber.slice(0,2)+'************'+idNumber.slice(14)
              let imglist=[];
              if(certificateUrl){
                  imglist.push(certificateUrl)
              }
              this.certifform={applyId,name,idNumber,city,certificateUrl:imglist,testSkills,workExperience,userId}
              this.certification=true
              if(this.testerdata){
                if(this.testerdata.status==0){
                  this.testerStatus=1
                  this.istest=true
                }else if(this.testerdata.status==1){
                  this.testerStatus=2
                  this.istest=true
                }else if(this.testerdata.status==2){
                  this.testerStatus=3
                }else{
                  this.testerStatus=0
                }
              }
            }else{
              this.certification=true
            }
        })
       
      
      },
       // 取消按钮
      certCancel() {
        this.certification = false;
        
        this.reset();
      },
      setImgPath(value) {
        if(value){
            this.certifform.certificateUrl.push(value);
          // this.addeditfaform.equipModel.push(value);
        }
      },
      certtSubmitForm(){
        this.$refs["certifform"].validate((valid) => {
          if (valid) {
            // if(this.certifform.certificateUrl.length==0){
						// 	this.$message.warning("请上传技能证书");
						// 	return;
						// }
            // return;
            let certificateUrl='';
            if(this.certifform.certificateUrl.length==1){
              certificateUrl=this.certifform.certificateUrl[0]
            }else if(this.certifform.certificateUrl.length==0){
              certificateUrl=''
            }else{
              certificateUrl='https://www.keyitest.cn/prod-api'+this.certifform.certificateUrl.pop()

            }
            // if(this.certifform.certificateUrl.pop().indexOf('https')==0){
						// 	certificateUrl=this.certifform.certificateUrl.pop()
						// }else{
						// 	certificateUrl='https://www.keyitest.cn/prod-api'+this.certifform.certificateUrl.pop()
						// }
            let data={
							applyId:this.certifform.applyId,
							userId:this.certifform.userId,
							name:this.certifform.name,
							idNumber:this.certifform.idNumber,
							// city:this.certifform.city,
							// certificateUrl,
							// testSkills:this.certifform.testSkills,
							// workExperience:this.certifform.workExperience,
						}
            // return;
            if (this.certifform.applyId != '') {
              updatetesterApply(data).then(res=>{
                console.log('修改',res);

								if(res.code==200){
									this.$message.success("实名认证成功");
                  this.getcertinfor()
                  this.certification = false;
								} else  {
                }

							}).catch(error => {
                  this.getcertinfor()

              })
            } else {
              addtesterApply(data).then(res=>{
                console.log('添加',res);
								if(res.code==200){
									this.$message.success("实名认证成功");
                  this.getcertinfor()
                  this.certification = false;
                  
								} else  {
                }

							}).catch(error => {
                  this.getcertinfor()

              })
            }
          }
        });
      },        
     // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
    },
  };
</script>
<style scoped >
  .user-userUpgrade-span {
    text-align: center;
  }
  .testuser{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .testuser>>>.el-button{
    background:#F2A51A;
    color:#FFFFFF;
    margin-left:50px;
    border: none;
  }
  .dialog-footer{
    display:flex;
    text-align:right;
    margin-left:550px
  }
  .submitbtn>>>.el-button{
    background:#0066EB;
    color:#FFFFFF;
    margin-right:30px;
    border: none;
  }
   .examku>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    }
</style>
