<template>
  <div>
    <title-bar title="新增面签" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <van-form class="form-sty" @submit="confirmAddFaceSignTask">
      <table>
        <tr style="width: 500px">
          <td style="display: flex">
            <div class="image-box" style="margin: 10px 20px" @click="takePersonPhoto('身份证正面')">
              <img class="photoa" :src="imageUrlZm" />
              <div style="width: 100%; text-align: center; margin-top: 20px">
                拍摄人像面
              </div>
            </div>
            <div class="image-box" style="margin: 10px 20px" @click="takePersonPhoto('身份证反面')">
              <img class="photob" :src="imageUrlFm" />
              <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="[{ required: true, message: '证件号码不能为空' }]"
              v-model="IdentNo"
              label="证件号码"
              @blur.native.capture="identNoChanged"
              type="digit"
              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>
            <mobile-input
              :required="true"
              v-model="phone"
              label="手机号码"
              :rules="[{ required: true, message: '手机号码不能为空' }]"
              type="tel"
              size="small"
            />
          </td>
        </tr>
<!--        <tr>-->
<!--          <td style="display: flex">-->
<!--            <mobile-input-->
<!--              :required="true"-->
<!--              v-model="phone"-->
<!--              label="短信验证码"-->
<!--              :rules="[{ required: true, message: '短信验证码不能为空' }]"-->
<!--              type="text"-->
<!--              size="small"-->
<!--            />-->
<!--            <div class="code-sty" @click="getSMSVerificationCode()">获取验证码</div>-->
<!--          </td>-->
<!--        </tr>-->
        <tr>
          <td>
            <!-- <button type="info" round @click="onChang(3)">查询</button> -->
            <button class="but-sty" type="info" native-type="submit" round>查询</button>
          </td>
        </tr>
      </table>
    </van-form>
  </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";
import {NativeUI} from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import nativeService from "@/services/native.service";
import {MediaFile} from "@/model/entity/MediaFile";
import Public from "@/public/ts/Public";
/**
 * @Description:客户查询
 * @author pd
 * @date 2021-11-06 16:43:27
 */
@Component({
  name: "AddContractFaceSign",
  components: { BasePopup },
})
export default class AddContractFaceSign extends Vue {
  i = 0;
  IdentNo = ''; //证件号码
  CstNm = ''; //客户名称
  phone = '';
  code = '';
  flagPopup = false;
  faceSignInfo = {
    OBJECTNO: '',
    SIGNYPE: '',
    CUSTOMERNAME: '',
    CUSTOMERID: '',
    CERTID: '',
    TELPHONE: '',
    GJJTYPE: '',
    SEX: '',
    BUSINESSSUM: '',
    COMPANYNAME: '',
    COMPANYADD: '',
    BUSINESSDATE: ''
  };
  imageUrlZm  = require("@/assets/images/prefix-idcard.png");
  imageUrlFm  = require("@/assets/images/suffix-idcard.png");
  idCardZmFile: any;
  idCardFmFile: any;
  isTakePhoto = 0;

  created() {
    console.log("---------------",Public.getLocation());
  }
  onClick() {}
  getSMSVerificationCode(){}
  //查询面签任务
  identNoChanged(){
    let param = {
      tc: nettyApi.TRADE_CODE.selectAddTaskInfo,
      CUSCERTID: this.IdentNo
    },
    _this = this;
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1'){
        NativeUI.confirm("温馨提示","是否对客户"+res.COMPANYNAME+"做随意分面签新增").then(() => {
          _this.faceSignInfo = res;
          _this.IdentNo = res.CERTID;
          _this.phone = res.TELPHONE;
          _this.CstNm = res.CUSTOMERNAME;
        })
      }else{
        NativeUI.toast(res.msg);
      }
    });
  }
  //确认新增面签任务
  confirmAddFaceSignTask(){
    if(this.isTakePhoto == 2){
      let data = this.faceSignInfo,
        param = {
          tc: nettyApi.TRADE_CODE.confirmAddTask,
          USERCODE: sessionStorage.getItem("gdUserCode"),
          ORGCODE: sessionStorage.getItem("gdORGCode"),
          OBJECTNO: data.OBJECTNO,
          SIGNYPE: data.SIGNYPE,
          CUSTOMERNAME: data.CUSTOMERNAME,
          CUSTOMERID: data.CUSTOMERID,
          CERTID: data.CERTID,
          TELPHONE: data.TELPHONE,
          GJJTYPE: data.GJJTYPE,
          SEX: data.SEX,
          BUSINESSSUM: data.BUSINESSSUM,
          COMPANYNAME: data.COMPANYNAME,
          COMPANYADD: data.COMPANYADD,
          BUSINESSDATE: data.BUSINESSDATE
        },
        imgInfo = [
          {
            file: this.idCardZmFile,
            fileName: '身份证正面',
            mulId: 'idFile'
          },
          {
            file: this.idCardFmFile,
            fileName: '身份证反面',
            mulId: 'idOthFile'
          }
        ];
      NativeUI.showWaiting("正在查询...");
      return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
        NativeUI.closeWaiting();
        if(res.rc == "1"){
          this.$store.commit("setFaceSignInfo",data);
          this.$store.commit("setImageFileObj",imgInfo);
          this.$router.push({
            path: "/FaceSignView",
          });
        }else {
          NativeUI.toast(res.msg);
        }
      });
    }else{
      NativeUI.toast("请先采集身份证照片")
    }
  }
  //采集证件照片
  takePersonPhoto(fileName: string){
    const data = new MediaFile();
    data.objId = "1111";
    data.userId = "000000";
    data.address = "定位信息";
    data.userName = "拍摄人";
    const _this = this;
    this.$native.capturePhoto(data).then((res: any) => {
      if(res.length > 0 && res[0].filePath){
        let file = Public.imgUrlToFile(res[0].filePath, fileName);
        if(fileName == '身份证正面'){
          _this.imageUrlZm = res[0].filePath;
          _this.idCardZmFile = file;
          this.isTakePhoto += 1;
        } else{
          this.isTakePhoto += 1;
          _this.imageUrlFm = res[0].filePath;
          _this.idCardFmFile = file;
        }
      }else {
        NativeUI.toast("拍照失败，请重试。")
      }
    })
  }

  custNameChange(){
    console.log("客户信息")
  }
}
</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%;
}
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;
}
::v-deep .d-form-field{
  padding: 0 0 1.5rem 0;
}
.code-sty{
  width: 25%;
  line-height: 33px;
  height: 33px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #C5E4F5;
  color: #8c8686;
  text-align: center;
  margin-left: 5px;
}
.form-sty{
  height: calc(100vh - 60px);
}
.but-sty{
  outline: none;
}
</style>
