<template>
  <div>
    <div class="banner-wrapper">
      <img src="../assets/banner_ht.png" alt />
    </div>
    <div class="main-content">
      <p class="contract-title">雇佣合同</p>
      <!-- 合同签署进度 -->
      <div class="contract-step" v-if="!signShow">
        <p class="contract-step-title">合同签署进度</p>
        <div class="step-wrapper">
          <van-steps
            :active="activeStep"
            active-color="#0EAEFC"
            active-icon="checked"
          
          >
            <van-step v-for="(item,index) in stepList" :key="index">{{item}}</van-step>
          </van-steps>
        </div>
      </div>
      <!-- 去实名认证 -->
      <div class="item-result contract-view" v-if="verifyAble" @click="clickVerify">
        <span>去实名认证</span>
        <van-icon name="arrow" color="#999" />
      </div>
      <!-- 查看合同 -->
      <div class="item-result contract-view" @click="viewMyContract" v-if="contractView">
        <span>查看我的合同</span>
        <van-icon name="arrow" color="#999" />
      </div>
      <!-- 未签署合同 -->
      <div class="no-contract" v-if="signShow">
        <div class="submit-wrapper">
          <van-button block type="primary" @click="goToContract">去签署合同</van-button>
        </div>
        <p class="contract-tips">电子合同签署由E签宝提供技术支持</p>
      </div>
      <!-- 合同失效 -->
       <div class="bg-research-wrapper" v-if="contractInvalid">
        <div class="item-block" style="padding:0.1rem 0.3rem">
          <div>
            <div class="item-result result-notice" >
              <div>
                <van-icon name="warning-o" color="#F56C6C" />
                <span>合同失效</span>
              </div>
            </div>
         
          </div>
        </div>
      </div>
      <!-- 实名认证结果 -->
      <div class="bg-research-wrapper" v-if="isBgResearch">
        <div class="item-block">
          <div class="item-title">
            <span class="item-name">家政员实名认证</span>
            <span class="item-status">{{isBackExamine==0?'进行中':'已完成'}}</span>
          </div>
          <div class="item-line">
            <img src="../assets/icon_apply.png" alt />
            <span class="line-label">申请实名认证人:</span>
            <span class="line-content">{{reportInfo.servantName}}</span>
          </div>
          <div class="item-line">
            <img src="../assets/icon_time.png" alt />
            <span class="line-label">申请时间:</span>
            <span class="line-content">{{reportInfo.startTime}}</span>
          </div>
          <div class="item-result result-going" v-if="isBackExamine==0">
            <span>>>> 家政员实名认证正在进行中</span>
          </div>
          <div v-if="isBackExamine==1">
            <div class="item-result result-pass">
              <van-icon name="passed" color="#67C23A" />
              <span>家政员实名认证通过</span>
            </div>
            <!-- <p class="unpass-reason">{{reportInfo.examineInfo}}</p> -->
          </div>

          <div v-if="isBackExamine==2">
            <div class="item-result result-notice" @click="againApply">
              <div>
                <van-icon name="warning-o" color="#F56C6C" />
                <span>家政员实名认证未通过</span>
                <!-- <span v-if="status==2">您的实名认证申请未通过审核</span> -->
              </div>
              <!-- <div>
            <span>重新申请</span>
            <van-icon name="arrow" color="#F56C6C" />

              </div>-->
            </div>
            <!-- <div v-if="status==2">
              <p class="unpass-reason">未通过原因：</p>
              <p class="unpass-reason">{{reportInfo.verifyReason}}</p>
            </div>-->
            <!-- <div v-if="(status==1&&isBackExamine==2)">
            <p class="unpass-reason">{{reportInfo.examineInfo}}</p>
            </div>-->
          </div>
        </div>
      </div>

      <!-- <div class="no-content" v-else>
      <img src="../assets/no-content.png" alt />
      <p>没有内容哦，等待您的第一份实名认证～</p>
      <span class="experience" @click="addResearch">体验一下</span>
      </div>-->
    </div>
     <!-- 签署过程中弹框提示 -->
    <van-dialog
      v-model="contractGoingVerifyShow"
      title="提示"
      cancelButtonText="取消"
      confirmButtonText="去认证"
      cancelButtonColor="#999999"
      confirmButtonColor="#0EAEFC"
      show-cancel-button
      @confirm="checkVerify"
    >
      <div class="dialog-wrapper">雇佣合同正在签署中，实名认证会在合同签署成功后进行，若保姆未通过实名认证，则此《雇佣合同》无效。</div>
    </van-dialog>
     <!-- 签署完成弹框提示 -->
    <van-dialog
      v-model="contractFinishVerifyShow"
      title="提示"
      cancelButtonText="取消"
      confirmButtonText="去认证"
      cancelButtonColor="#999999"
      confirmButtonColor="#0EAEFC"
      show-cancel-button
      @confirm="goVerify"
    >
      <div class="dialog-wrapper">雇佣合同已签署完成，若保姆未通过实名认证，则此《雇佣合同》无效。</div>
    </van-dialog>
    <copyright></copyright>
    <navbar :activeIndex="1"></navbar>
  </div>
</template>

<script>
import Service from "../script/api/service";
import Copyright from "@/components/Copyright";
import Navbar from "@/components/Navbar";
export default {
  name: "bx",
  data() {
    return {
      userInfo:'',
      activeStep: 0,
      signShow: '', //是否展示签署合同
      contractView: false, //合同是否发起
      contractInvalid:false,
      isBgResearch: false,
      stepList: ["发起签署", "雇主签署", "保姆签署", "实名认证"],
      contractState: "", //0待签署 1保姆已签署，2雇主已签署，3签署完成(待审核),4,审核通过，5驳回，6签署失败
      status: 2, //进行中0，已通过1（isBackExamine为1时展示已通过，isBackExamine为2时展示examineInfo），审核未通过2
      verify: "", //是否勾选了实名认证
      verifyAble: false, //是否展示实名认证
      isBackExamine: "", //被调状态
      reportInfo: {
        servantName: "",
        startTime: ""
      },
      fileUrl: "", //合同地址
      contractGoingVerifyShow:false,
      contractFinishVerifyShow:false,
    };
  },
  components: {
    Copyright,
    Navbar
  },
  watch: {},
  created() {
    this.initContract();
   // this.checkVerify();
      // this.goVerify();
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    initContract(){
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userInfo=userInfo;
    let orderNo = "";
    if (userInfo == null) {
      this.$router.replace("qyb");
    } else {
      orderNo = userInfo.orderNo;
      let params = { orderNo: orderNo };
      this.selectContract(params);
      
    }
    },
    // 根据订单号查询合同$axiosSelectContractByOrderNo
    selectContract: function(params) {
      Service.$axiosSelectContractByOrderNo(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          console.log(res.data.data);
          if (res.data.data == null) {
            this.signShow = true;
          } else {
             this.signShow = false;
              this.fileUrl = res.data.data.fileUrl;
              this.contractView=true;
            this.contractState = res.data.data.state;
            this.verify = res.data.data.verify;
            this.isBackExamine = res.data.data.isBackExamine;
            // 勾选过实名认证或者被调结果已经返回的情况不展示实名认证
            if (
              this.verify ||
              (this.isBackExamine == 1 || this.isBackExamine == 2)
            ) {
              this.verifyAble = false;
            } else {
              this.verifyAble = true;
            }
            if (this.contractState == "0") {
              this.stepList = ["发起签署", "雇主签署", "保姆签署", "实名认证"];
              this.activeStep = 0;
            } else if (this.contractState == "1") {
              this.stepList = ["发起签署", "保姆签署", "雇主签署", "实名认证"];
              this.activeStep = 1;
            } else if (this.contractState == "2") {
              this.stepList = ["发起签署", "雇主签署", "保姆签署", "实名认证"];
              this.activeStep = 1;
            }else if(this.contractState == "6"||this.contractState == "5"){
              // 合同失效，签署失败
              this.stepList = ["发起签署", "雇主签署", "保姆签署", "实名认证"];
              this.activeStep = 2;
              this.contractInvalid=true;

            } else {
              
              this.stepList = ["发起签署", "雇主签署", "保姆签署", "实名认证"];
             
              // this.isBackExamine=res.data.data;
              if (this.isBackExamine == 0) {
                this.activeStep = 2;
              } else if (this.isBackExamine == "1") {
                // 实名认证通过
                // this.isBgResearch = res.data.data.verify;
                this.isBgResearch = true;
                this.activeStep = 3;
                this.stepList = [
                  "发起签署",
                  "雇主签署",
                  "保姆签署",
                  "实名认证"
                ];
              } else if (this.isBackExamine == "2") {
                // 实名认证不通过
                this.activeStep = 3;
                // this.isBgResearch = res.data.data.verify;
                this.isBgResearch =true;
                this.stepList = [
                  "发起签署",
                  "雇主签署",
                  "保姆签署",
                  "实名认证"
                ];
              }
           
              

            }

            if (this.isBgResearch) {
              this.reportInfo = {
                servantName: res.data.data.servantName,
                startTime: res.data.data.createTime
              };
            }
          }
        }
      });
    },
    getResearch: function(params) {
      Service.$axiosResearch(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          if (res.data.data == null) {
            this.isBgResearch = false;
          } else {
            this.isBgResearch = true;
            this.status = res.data.data.verify;
            this.reportInfo = res.data.data;
            if (this.status == "1") {
              this.isBackExamine = res.data.data.isBackExamine;
            }
          }
        }
      });
    },
    clickVerify: function() {
      // 未勾选实名认证的，改变标志位
      if (!this.verify&&(this.contractState=='0'||this.contractState=='1'||this.contractState=='2')) {
        this.contractGoingVerifyShow=true;
      //  签署过程中
//         if(this.contractState=='0'){
// this.contractGoingVerifyShow=true;
//         }else{
//  this.checkVerify();
//         }
        
      } else {
        // 合同签署完成选择实名认证提示
        this.contractFinishVerifyShow=true;
        // this.goVerify();
      }
    },
    //  $axiosGoVerify
    goVerify() {
      let params={
        orderNo:this.userInfo.orderNo
      }
      Service.$axiosGoVerify(params).then(res => {
        if (res.data.errno == 0) {
          this.initContract()
        } else {
          this.$toast(res.data.errmsg);
        }
      });
    },
    checkVerify() {
      let params={
        verify:true,
        orderNo:this.userInfo.orderNo
      }
      Service.$axiosVerify(params).then(res => {
        if (res.data.errno == 0) {
           this.initContract();
        } else {
          this.$toast(res.data.errmsg);
        }
      });
    },
    addResearch: function() {
      this.$router.push("/research");
    },
    againApply: function() {
      // this.$router.push('/research');
    },
    goToContract() {
      this.$router.push("/contract");
    },
    viewMyContract() {
       let customerId=JSON.parse(localStorage.getItem("userInfo"))==null?'':(JSON.parse(localStorage.getItem("userInfo"))).id;
  let customerPhone=JSON.parse(localStorage.getItem("userInfo"))==null?'':(JSON.parse(localStorage.getItem("userInfo"))).customerTel;
  let params={
      accessUuid:sessionStorage.getItem('qybUuid'),
      customerId: customerId, 
      customerPhone:customerPhone, 
      opType:'2',
      pagePath:'/pdfContract',
      pagePathName:'合同展示页'
    };
    Service.$axiosInsertAccessLog(params).then(res => {
      if (res.data.errno == 0) {
       console.log('log success');
      } else {
        console.log(res.data.errmsg);
      }
       location.href =
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(this.fileUrl);
    }).catch(err=>{
      console.log(err);
       location.href =
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(this.fileUrl);
 
    });

     
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner-wrapper {
  min-height: 7.7rem;
}
.banner-wrapper img {
  width: 100%;
}
.banner-adv {
  width: 100%;
  min-height: 7.7rem;
  background: #f2f2f2;
}
.no-content {
  text-align: center;
  margin: 0 0 2.4rem 0;
}

.no-content img {
  width: 2.24rem;
  height: 2.24rem;
  margin: 0.66rem 0 0.1rem;
}
.no-content p {
  color: #cfcfcf;
}
.experience {
  color: #0eaefc;
  text-decoration: underline;
  margin: 0.12rem auto;
  font-weight: bold;
}
.result-going {
  background: #fff5dd;
  color: #fe8c01;
  font-weight: bold;
}
.result-pass {
  background: rgba(103, 194, 58, 0.15);
  color: #67c23a;
  font-weight: bold;
  justify-content: flex-start;
}
.result-pass .van-icon {
  margin-right: 4px;
}
.result-notice {
  background: rgba(245, 108, 108, 0.15);
  color: #f56c6c;
  font-weight: bold;
}
.result-notice .van-icon {
  margin-right: 4px;
}
.result-notice div {
  display: flex;
  align-items: center;
}
.unpass-reason {
  margin: 0.3rem 0 0;
}
.main-content {
  margin: 0 0 2.8rem 0;
}
.contract-title {
  padding: 0.4rem 0.36rem 0.32rem;
  color: #333;
  font-size: 0.32rem;
  font-weight: bold;
}
.no-contract {
  padding: 0 0.3rem;
}
.contract-step {
  padding: 0 0.36rem;
  margin: 0 0 0.24rem 0;
}
p.contract-step-title {
  color: #333;
  font-size: 0.28rem;
  font-weight: bold;
  margin: 0 0 0.16rem 0;
  padding: 0.32rem 0 0;
  border-top: 1px solid #f5f5f5;
}
.step-wrapper {
  background: #f8f8f8;
}
.van-steps--horizontal {
  padding: 16px 10px 6px;
}
.van-step--horizontal .van-step__title {
  color: #333 !important;
}
.van-step--horizontal:first-child .van-step__title {
  margin-left: -14px !important;
}
.contract-view {
  margin: 0 0.3rem 0.16rem;
}
.dialog-wrapper {
  padding: 0.26rem 0.46rem;
  font-size: 0.24rem;
}
.contract-tips{
  margin:20px 0 0;
  text-align: center;
  color: #999;
  font-size:0.2rem;
}
</style>
