<!--个贷-网贷简版视图-->
<template>
  <div>
    <title-bar title="客户简版信息" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="content-box">
      <div class="tips-text"><span>获取客户授权可以查看全景视图信息</span></div>
      <div class="userInfo-box">
        <div class="user-name">
          <svg
            class="icon"
            style="width: 36px; height: 36px"
            aria-hidden="true"
          >
            <use xlink:href="#icon-yonghu"></use>
          </svg>
          <div class="text-1">{{ userInfo.CUSTOMERNAME }}</div>
          <div :class="{ activeClass: arrowStatus }" class="badge-box">
            <span
              v-if="userSelectedInfo.IS_LOAN_OVDUE == '1'"
              class="d-tag tag-green tag-position"
              >贷款逾期</span
            >
            <span
              v-if="userSelectedInfo.IS_CRDCD_OVDUE == '1'"
              class="d-tag tag-gold tag-position"
              >信用卡逾期</span
            >
            <span
              v-if="userSelectedInfo.IS_BLKLIST_CST == '1'"
              class="d-tag tag-blue tag-position"
              >名单客户</span
            >
            <span
              v-if="userSelectedInfo.IS_PAYROLL_SALARY == '1'"
              class="d-tag tag-green tag-position"
              >代发工资</span
            >
            <span
              v-if="userSelectedInfo.HAS_HOS_FUND_ACCT == '1'"
              class="d-tag tag-gold tag-position"
              >公积金存款帐户</span
            >
            <span
              v-if="userSelectedInfo.IS_HOS_LOAN_CST == '1'"
              class="d-tag tag-blue tag-position"
              >住房按揭帐户</span
            >
            <span
              v-if="userSelectedInfo.HAS_OFFI_CARD == '1'"
              class="d-tag tag-green tag-position"
              >公务卡</span
            >
            <span
              v-if="userSelectedInfo.CRDCD_FLAG == '1'"
              class="d-tag tag-gold tag-position"
              >信用卡</span
            >
          </div>
        </div>
        <div class="user-line1">
          <div>{{ getAge }}岁</div>
          <div style="margin-left: 25px">{{ userInfo.SEX }}</div>
          <div style="margin-left: 25px">{{ userInfo.MARRIAGE }}</div>
          <div style="margin-left: 25px">
            <span>身份证号: {{ getCertId }}</span>
          </div>
        </div>
        <div class="user-line1">
          <div>
            <span>手机号码: {{ getPhoneNum }}</span>
          </div>
        </div>
        <div class="user-line2">
          <div>
            <span>成为我行客户时间: {{ getTime }}</span>
          </div>
        </div>
      </div>

      <div class="tableCls">
        <van-button class="submitstyle2" round type="info" @click="onClick">
          知道了
        </van-button>
        <van-button class="submitstyle" round type="info" @click="getRight">
          获取用户授权
        </van-button>
      </div>
      <van-dialog
        :show-cancel-button="false"
        :show-confirm-button="false"
        v-model="dialogShow"
      >
        <div class="dialog-box" style="position: relative">
          <div class="dialog-title">发送验证码</div>
          <div class="tips-style">验证码将发送至客户手机:{{ getPhoneNum }}</div>
          <div class="message-box">
            <van-field
              v-model="vertifyCode"
              center
              type="digit"
              clearable
              label=""
              placeholder="请输入验证码"
            >
              <template #button>
                <div
                  class="send-font-style"
                  v-if="showSendBut"
                  @click="sendMessage"
                >
                  获取验证码
                </div>
                <div class="send-font-style" v-if="!showSendBut" disabled>
                  <CountDown
                    :time="time"
                    @finish="finish"
                    format="ss秒后重新获取"
                  />
                </div>
              </template>
            </van-field>
            <div class="content-line" />
          </div>
          <div class="dialog-but-box">
            <van-button
              class="submitstyle3"
              size="small"
              round
              block
              native-type="button"
              @click="dialogShow = false"
            >
              取消
            </van-button>
            <van-button
              @click="onConfirm"
              color="#ff574c"
              native-type="button"
              class="submitstyle3"
              style="color: #fff"
              round
              size="small"
              type="default"
              >确认</van-button
            >
          </div>
        </div>
      </van-dialog>
      <base-popup v-model="flagPopup4" title="授权提示">
        <div class="popup-content4">
          <div @click="face_recognition" class="face-recognition">
            <div></div>
            <div>客户人脸识别</div>
          </div>
          <div @click="sms_verification" class="sms-verification">
            <div></div>
            <div>客户短信验证</div>
          </div>
        </div>
      </base-popup>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasePopup from "@/components/general/BasePopup.vue";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import systemApi from "@/constants/api/ms-system/system.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { Popup } from "vant";
import { CountDown } from "vant";
/**
 * @Description:客户验证
 * @author wanghang
 * @date 2021-2-09 11:32:27
 */
@Component({
  name: "PersonSimplifyView",
  components: { BasePopup, CountDown, Popup },
})
export default class PersonSimplifyView extends Vue {
  IdentTp = ""; //证件类型
  IdentTp_list = [
    //证件类型
    { value: "20", text: "身份证" },
    { value: "26", text: "其它 " },
  ];
  IdentNo = ""; //证件号码
  CstNm = this.$route.query.CUSTOMERNAME; //客户名称
  vtype = "";
  placeholder = "请输入";
  ret_code = "";
  shouFlag = "";
  show = false;
  userInfo = this.$store.getters.getCusInfo;
  dialogShow = false;
  vertifyCode = "";
  dialogTitle = "输入验证码";
  dialogMessage = "请输入";
  customerId = this.$route.query.customerId;
  time = 1000 * 60; //一分钟失效
  showSendBut = true;
  arrowStatus = false; //箭头方向，下为false
  userSelectedInfo = {}; //个人客户信息查询
  typeInfo = this.$route.params.typeInfo;
  phoneNum = "";
  title = "客户信息";
  flagPopup4 = false;
  activated() {
    this.dialogShow = false;
    this.flagPopup4 = false;
  }
  onClick() {
    this.$router.go(-1);
  }
  //验证验证码是否正确
  onConfirm() {
    if (this.vertifyCode != "") {
      this.checkCode();
    } else {
      NativeUI.toast("验证码不能空");
    }
  }
  finish() {
    this.showSendBut = !this.showSendBut; //发送验证码按钮返回原状
  }
  sendMessage() {
    this.sendPersonalCustInfo();
  }
  sendPersonalCustInfo() {
    const param = {
      funCode: "S2021122316564680",
      mobileNo: this.phoneNum,
      params: {
        NAME: this.userInfo.CUSTOMERNAME,
      },
      tc: nettyApi.TRADE_CODE.sendMessage,
    };
    NativeUI.showWaiting("正在发送...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        NativeUI.toast("发送成功！");
        this.showSendBut = !this.showSendBut;
      } else {
        NativeUI.closeWaiting();
        NativeUI.toast("验证码发送失败");
      }
    });
  }
  //验证发送的短信验证码
  checkCode() {
    const param = {
      tc: "MCEP",
      checkNum: this.vertifyCode,
      mobileNo: this.phoneNum,
      mcepAuthInfo: {
        channel: "1",
        authSystem: "002",
        authType: "1",
        authorName: this.userInfo.CUSTOMERNAME,
        authCustno: this.userInfo.CUSTOMERID,
        passiveAuthorName: sessionStorage.getItem("userName"),
        passiveAuthorNo: sessionStorage.getItem("workcode"),
        authTime: "1",
        authEvent: "个人用户验证",
      },
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(systemApi.checkVerifactionCode, param).then(
      (res: any) => {
        NativeUI.closeWaiting();
        if (res.data.rc == 1) {
          this.$store.commit("setEmpty");
          this.$store.commit("setCusInfo", this.userInfo);
          this.$router.push({
            path: "/PersonalDetails",
            // params: {
            //   userInfo: this.userInfo,
            // },
          });
        } else {
          // NativeUI.toast(res.data.message);
          NativeUI.toast("验证码输入错误");
        }
      }
    );
  }
  //处理时间格式
  formatDate(date: any) {
    let month = (date.getMonth() + 1).toString();
    if (month.length == 1) {
      month = "0" + month;
    }
    let day = date.getDate().toString();
    // if (day.length == 1) {
    //   day = "0" + day;
    // }
    return date.getFullYear() + month + day;
  }
  getRight() {
    this.flagPopup4 = true;
  }
  face_recognition() {
    console.log("人脸识别");
  }
  sms_verification() {
    this.flagPopup4 = false;
    this.dialogShow = true;
  }
  // 个人客户信息查询
  selectPeronalInfo() {
    const param = {
      CUST_NO: this.userInfo.CUSTOMERID, //'1001785074',
      CUST_NAME: this.userInfo.CUSTOMERNAME, //'杨章'
      tc: nettyApi.TRADE_CODE.selectPeronInfo,
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.userSelectedInfo = res;
      } else {
        NativeUI.closeWaiting();
        NativeUI.toast(res.msg);
      }
    });
  }
  // 查询手机号码
  selectPersonInfo() {
    let param = {
      CUSTOMERID: this.userInfo.CUSTOMERID,
      tc: nettyApi.TRADE_CODE.selectPersonInfoDetail,
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.phoneNum = res.MOBILETELEPHONE;
        NativeUI.closeWaiting();
      } else {
        NativeUI.closeWaiting();
        NativeUI.toast(res.msg);
      }
    });
  }
  mounted() {
    this.selectPeronalInfo();
    this.selectPersonInfo();
  }
  get getAge() {
    var temp = this.userInfo.CERTID;
    temp = temp.slice(6, 14);
    var now = this.formatDate(new Date());

    let res = now.slice(0, 4) - temp.slice(0, 4);
    if (
      now.slice(4, 6) == temp.slice(4, 6) &&
      now.slice(6, 8) < temp.slice(6, 8)
    ) {
      res -= 1;
    }

    return res;
  }
  get getCertId() {
    //返回加密的身份证号
    var res = "";
    for (let i = 0; i < this.userInfo.CERTID.length; i++) {
      if (i >= 4 && i <= 13) {
        res += "*";
      } else {
        res += this.userInfo.CERTID[i];
      }
    }
    return res;
  }
  //返回加星号的手机号
  get getPhoneNum() {
    var res = "";
    let num = this.phoneNum;
    for (let i = 0; i < num.length; i++) {
      if (i >= 3 && i <= 6) {
        res += "*";
      } else {
        res += num[i];
      }
    }
    return res;
  }
  //返回客户时间
  get getTime() {
    var res = "";
    var strs = this.userInfo.INPUTDATE.split("/");
    res += strs[0] + "年";
    res += strs[1] + "月";
    res += strs[2] + "日";
    return res;
  }
}
</script>
<style scoped>
.d-button {
  margin: 40px auto;
}

.tableCls {
  margin: 0 20%;
  display: flex;
  justify-content: space-around;
}
.submitstyle {
  margin-top: 50px;
  z-index: 1000;
  width: 40%;
  height: 46px;
  color: #fff;
  background-color: #ff574c;
  border-color: #ff574c;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}
.submitstyle2 {
  margin-top: 50px;
  z-index: 1000;
  width: 40%;
  height: 46px;
  color: #999;
  background-color: #fff;
  border-color: #999;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}
.userInfo-box {
  width: auto;
  height: auto;
  margin: 0 15px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(170, 170, 170, 0.349);
}
.tips-text {
  font-size: 14px;
  color: #f59701;
  margin: 15px;
}
.user-name {
  padding-top: 20px;
  margin-left: 25px;
  line-height: 48px;
  display: flex;
  align-items: center;
}
.text-1 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: bold;
}
.text-2 {
  margin-left: 5px;
  color: #169bd5;
  background-color: #ddf3f7;
  font-size: 12px;
}
.user-line1 {
  display: flex;
  line-height: 36px;
  margin-left: 65px;
  font-size: 14px;
}
.user-line2 {
  display: flex;
  line-height: 36px;
  padding-bottom: 20px;
  margin-left: 65px;
  font-size: 14px;
}
.dialog-but-box {
  width: 100%;
  margin-top: 10px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
::v-deep .van-button--small {
  width: 83px;
}
.badge-box {
  /* width: 90%; */
  line-height: 18px;
  margin-left: 55px;
  margin-right: 20px;
  height: auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.tag-position {
  margin-left: 5px;
  margin-top: 5px;
}
.up-down-box {
  width: 10%;
}
.activeClass {
  height: auto;
}
.dialog-box {
  margin: 0 auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 200px;
}
.dialog-content {
  font-size: 16px;
  color: #333;
  margin: 30px 0;
}
.dialog-content2 {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}
.dialog-but {
  background-color: #ff574c;
  border-color: #ff574c;
  width: 205px;
  height: 36px;
  font-size: 14px;
}
.submitstyle3 {
  width: 40%;
}
.dialog-title {
  margin-top: 10%;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.send-font-style {
  color: #ff574c;
  flex: 1;
}
.message-box {
  margin-top: 5px;
  margin-left: 20px;
}
::v-deep .van-field__button {
  width: 120px;
}
.content-line {
  height: 1px;
  background-color: rgb(230, 225, 225);
  margin-left: 10px;
  width: 80%;
}
.tips-style {
  font-size: 14px;
  line-height: 24px;
  margin-left: 50px;
  margin-top: 10px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
::v-deep .van-count-down {
  color: #ff574c;
}
.content-box {
  margin: 30px 10%;
  margin-top: 80px;
}
.popup-content4 {
  width: 55%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popup-content4 div {
  width: 45%;
}
.face-recognition > div:nth-child(1),
.sms-verification > div:nth-child(1) {
  width: 100%;
  padding-top: 100%;
  padding-bottom: 20%;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 10px;
}
.face-recognition > div:nth-child(2),
.sms-verification > div:nth-child(2) {
  width: 100%;
  text-align: center;
  color: #333333;
  font-family: "Arial Normal", "Arial";
  margin-top: 5%;
}
</style>