<template>
  <!-- 客户查询页面 -->
  <div>
    <title-bar title="客户查询" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <van-tabs v-model:active="active" class="tabs-style" type="card">
      <van-tab title="个贷客户"></van-tab>
      <van-tab title="网贷客户"></van-tab>
    </van-tabs>
    <van-form @submit="selectCustInfo">
      <table>
        <tr style="width: 500px">
          <td style="display: flex">
            <div class="image-box" style="margin: 10px 20px">
              <img class="photoa" src="@/assets/images/prefix-idcard.png" />
              <div style="width: 100%; text-align: center; margin-top: 20px">
                拍摄人像面
              </div>
            </div>
            <div class="image-box" style="margin: 10px 20px">
              <img class="photob" src="@/assets/images/suffix-idcard.png" />
              <div style="width: 100%; text-align: center; margin-top: 20px">
                拍摄国徽面
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input
              type="text"
              label="证件类型"
              placeholder="身份证"
              readonly
              size="small"
            />
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input
              :required="true"
              :rules="[{ validator, message: '证件号码输入有误' }]"
              v-model="IdentNo"
              label="证件号码"
              type="text"
              size="small"
            />
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input
              :required="true"
              v-model="CstNm"
              label="客户名称"
              :rules="[{ required: true, message: '客户名称不能为空' }]"
              type="text"
              size="small"
            />
          </td>
        </tr>
        <tr>
          <td>
            <!-- <button type="info" round @click="onChang(3)">查询</button> -->
            <button type="info" native-type="submit" round>查询</button>
          </td>
        </tr>
      </table>
    </van-form>

    <base-popup
      v-model="flagPopup2"
      :showConfirm="true"
      @confirm="onConfirm"
      confirmText="知道了"
    >
      <div class="popup-content2">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-tishi60x60ziyuan51"></use>
          </svg>
        </div>
        <div>系统未查询到客户相关信息，请前往个贷系统开户</div>
      </div>
    </base-popup>

    <base-popup
      v-model="flagPopup3"
      :showCancel="true"
      :showConfirm="true"
      cancelText="知道了"
      confirmText="获取客户授权"
      title="客户信息"
      @confirm="authorization"
    >
      <div class="popup-content3">
        <div>获取客户授权可以查看全景视图信息</div>
        <div class="card">
          <div class="card-heater">
            <div><img src="@/assets/svg/personal-title-1.svg" alt="" /></div>
            <div>孙小红</div>
            <div class="label">
              <div>小微企业主</div>
              <div>代发工资</div>
              <div>优易贷客户</div>
              <div>住房按揭</div>
            </div>
          </div>
          <div class="card-body">
            <div>
              23岁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未婚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号：2345****0988
            </div>
            <div>手机号码：187****0987</div>
            <div>成为我行客户时间：2010年8月</div>
          </div>
        </div>
      </div>
    </base-popup>

    <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>
</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 IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { Popup } from "vant";
/**
 * @Description:客户查询
 * @author wanghang
 * @date 2022-2-12
 */
@Component({
  name: "Customerinquiry",
  components: { BasePopup },
})
export default class Customerinquiry extends Vue {
  i = 0;
  flagPopup2 = false;
  flagPopup3 = false;
  flagPopup4 = false;
  IdentNo = ""; //证件号码
  CstNm = ""; //客户名称
  userInfo = {
    YN: "",
    BUSINESSTYPE: "",
  }; //用户信息
  userType = "";
  titles = [
    { name: "个贷客户", bsno: "1" },
    { name: "网贷客户", bsno: "2" },
  ];
  active: any = 0;
  change() {
    // this.active
  }
  onChang(i: any) {
    if (i == 2) {
      this.flagPopup2 = true;
    } else if (i == 3) {
      this.flagPopup3 = true;
    }
  }
  activated() {
    this.$router.beforeEach((to, from, next) => {
      if (from.path == "/main/workbench") {
        this.CstNm = "";
        this.IdentNo = "";
      }
      next();
    });
  }
  onClick() {
    console.log(111111);
  }
  authorization() {
    this.flagPopup4 = true;
  }
  sms_verification() {
    this.$router.push({
      path: "/workbench/commonly-used/personal/post-note",
    });
  }
  face_recognition() {
    console.log("人脸识别");
  }
  //查询客户信息，根据不同的用户类别执行不同的方法
  selectCustInfo() {
    if (this.active == 0) {
      this.selectPersonalCustInfo(); //等于0查询个贷客户
    } else {
      this.selectNetCust(); //等于1查询网贷客户
    }
  }
  //查询个贷客户
  selectPersonalCustInfo() {
    const param = {
      ROWNUMSTART: 0,
      ROWNUMEND: 1,
      CUSTOMERNAME: this.CstNm,
      custidcardno: this.IdentNo,
      CXTYPE: "2", //2为个人客户查询
      tc: nettyApi.TRADE_CODE.selectPersonalList,
    };
    NativeUI.showWaiting();
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (res.CustomerInfoArray.length == 0) {
          //没有返回数据，直接提示
          this.flagPopup2 = true;
        } else {
          //加一个判断，如果是经办经理直接跳转到详情页，如果不是经办经理就跳转到简要显示页面
          this.userInfo = res.CustomerInfoArray[0];
          this.userType = res.CustomerInfo[0];
          // this.$store.commit("setCustInfo", {});
          // this.$store.commit("setCustInfo", [this.userInfo, this.userType]);
          if (this.userInfo.YN == "") {
            //如果不是经办经理就去简要页面
            this.$store.commit("setEmpty");
            this.$store.commit("setCusInfo", this.userInfo);
            this.$router.push({
              name: "PersonSimplifyView",
            });
          } else if (this.userInfo.YN == "Y") {
            //如果是经办经理直接去详情页
            this.$store.commit("setEmpty");
            this.$store.commit("setCusInfo", this.userInfo);
            this.$router.push({
              path: "/PersonalDetails",
              query: {
                active: this.active,
              },
            });
          }
        }

        // this.CustomerListArray = res.CustomerListArray;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  //验证身份证号
  validator(val: any) {
    return /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      val
    );
  }
  //查询网贷客户
  selectNetCust() {
    const param = {
      ROWNUMSTART: 0,
      ROWNUMEND: 1,
      CUSTOMERNAME: this.CstNm,
      custidcardno: this.IdentNo,
      CXTYPE: "2", //2为个人客户查询
      tc: nettyApi.TRADE_CODE.selectNetCustList,
    };
    NativeUI.showWaiting();
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (res.CustomerInfoArray.length == 0) {
          //没有返回数据，直接提示
          this.flagPopup2 = true;
        } else {
          //加一个判断，如果是经办经理直接跳转到详情页，如果不是经办经理就跳转到简要显示页面
          this.userInfo = res.CustomerInfoArray[0];
          this.userType = res.CustomerInfo[0];
          // this.$store.commit("setCustInfo", {});
          // this.$store.commit("setCustInfo", [this.userInfo, this.userType]);
          if (this.userInfo.YN == "") {
            //如果不是经办经理就去简要页面
            this.$store.commit("setEmpty");
            this.$store.commit("setCusInfo", this.userInfo);
            this.$router.push({
              name: "PersonSimplifyView",
            });
          } else if (this.userInfo.YN == "Y") {
            //如果是经办经理直接去详情页
            this.$store.commit("setEmpty");
            this.$store.commit("setCusInfo", this.userInfo);
            this.$router.push({
              path: "/PersonalDetails",
              query: {
                active: this.active,
              },
            });
          }
        }

        // this.CustomerListArray = res.CustomerListArray;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  onConfirm() {
    this.flagPopup2 = false;
  }
}
</script>

<style lang="scss" scoped>
.photoa {
  width: 100%;
}

.photob {
  width: 100%;
}

button {
  width: 47%;
  background-color: rgba(255, 87, 108, 1);
}
.popup-content2 div {
  text-align: center;
}
.popup-content2 > div:nth-child(2) {
  font-size: 20px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.popup-content3 {
  width: 90%;
  margin: 0 auto;
}
.popup-content3 > div:nth-child(1) {
  color: #f59701;
}
.card {
  width: 100%;
  padding: 2%;
  margin-top: 2%;
  border-radius: 10px;
  border: 0;
  box-shadow: 0px 0px 5px rgb(170 170 170 / 35%);
}
.card-heater {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-heater > div:nth-child(1) {
  width: 3.5%;
  border-radius: 20px;
  padding: 0.3% 0.6%;
  background-color: #f59a23;
}
.card-heater > div:nth-child(1) img {
  width: 90%;
}
.card-heater > div:nth-child(2) {
  font-weight: bold;
  margin-left: 1%;
  font-size: 18px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.label {
  width: 42%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label div {
  margin: 0 1%;
  background-color: #d9f4ff;
  color: #169bd5;
  border-radius: 5px;
  padding: 0.2% 2% 0.1% 2%;
  font-size: 12px;
}
.card-body div {
  font-family: "Arial Normal", "Arial";
  color: #333333;
  font-size: 14px;
  margin: 1.5% 0;
}
.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%;
}
table {
  width: 35%;
  margin: 0 auto;
}
button {
  width: 100%;
  margin: 0 auto;
  border-radius: 30px;
  border: 1px solid #fd5065;
  color: white;
  font-size: 20px;
  padding: 1.5% 0;
}
.tab-box {
  margin: 10px 0;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 20%;
}
::v-deep .van-tab--active {
  font-weight: bold;
}
::v-deep .van-tab {
  font-size: 16px;
}
.image-box {
  margin: 10px 20px;
  width: 160px;
  height: 160px;
}
.tabs-style {
  margin: 20px 30%;
}
</style>
