<template>
<div class="form-style">
  <table>
    <tr>
      <td>
        <mobile-input
          type="text"
          label="客户姓名"
          readonly
          v-model="custInfo.CUSTOMERNAME"
          size="small"
        />
      </td>
    </tr>
    <tr>
      <td>
        <div class="idNo-sty">
          <mobile-input
            type="text"
            label="身份证号码"
            readonly
            v-model="custInfo.CERTID"
            size="small"
          />
          <div v-if="flag == '1'" @click="takeCredentials('sfz')">
            <svg class="icon camera-sty" aria-hidden="true">
              <use xlink:href="#icon-a-paizhao24x20ziyuan74"></use>
            </svg>
          </div>
        </div>
      </td>
    </tr>
  </table>
  <div class="image-container">
    <div class="image-style">
      <p>身份证照片</p>
      <van-image :src="imageSFZ" width="150px" height="120px" />
    </div>
<!--    <div class="image-style">-->
<!--      <p>联网核查照片</p>-->
<!--      <van-image :src="image" width="150px" height="120px" />-->
<!--    </div>-->
    <div class="image-style">
      <p>联网核查照片</p>
      <van-image :src="imageHC" width="150px" height="120px" />
    </div>
    <div class="image-style" @click="takeCredentials('xc')">
      <p>客戶现场照片</p>
      <van-image :src="imageXC" width="150px" height="120px" />
    </div>
  </div>
  <div class="btn-area">
    <button @click="stopCheck">终止</button>
    <button @click="submit">{{ nextStep }}</button>
  </div>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop} from "vue-property-decorator";
import MobileInput from "@/components/general/form/MobileInput.vue";
import {Form, Field, Image as VanImage} from 'vant';
import {MediaFile} from "@/model/entity/MediaFile";
import Public from "@/public/ts/Public";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import {NativeUI} from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";

Vue.use(Form);
Vue.use(Field);

@Component({
  name: 'IdentityCheck',
  components: { MobileInput, VanImage}
})
export default class IdentityCheck extends Vue{
  @Prop(Number) tabActive: Number | any
  @Prop(Object) custInfo: Object | any
  @Prop(String) flag: String | any

  imageSFZ = require('@/assets/images/nodata.png');
  imageHC = require('@/assets/images/nodata.png');
  imageXC = require('@/assets/images/nodata.png');
  imageUrlZm: any = '';
  nextStep = '核查';

  stopCheck(){
    if (this.tabActive != 0){
      this.$emit("activeChange", this.tabActive-1);
    }
  }
  submit(){
    this.onlineVerification();
  }
  takeCredentials(type: string){
    const data = new MediaFile();
    data.objId = "1111";
    data.userId = "000000";
    data.address = "定位信息";
    data.userName = "拍摄人";
    let _this = this,
      imgInfo = [],
      zmImgFile;
    if(window.plus){
      this.$native.capturePhoto(data).then((res: any) => {
        if(type == 'xc'){
          _this.imageXC = res[0].filePath;
        }else if(type == 'sfz'){
          zmImgFile = Public.imgUrlToFile(res[0].filePath,'身份证正面');
          _this.imageSFZ = res[0].filePath;
          imgInfo = [{
            file: zmImgFile,
            fileName: '身份证正面',
            mulId: 'idFile'
          }];
          this.$store.commit("setImageFileObj",imgInfo);
        }
      })
    }
  }
  onlineVerification() {
    if(this.nextStep == '核查'){
      const param = {
          ID: '510183199610163518',//this.custInfo.CERTID,
          NAME: '徐伟皓',//this.custInfo.CUSTOMERNAME,
          BUSINESSCODE: '01',
          tc: nettyApi.TRADE_CODE.onlineVerification
        },
        _this = this;
      NativeUI.showWaiting('正在加载...');
      return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
        NativeUI.closeWaiting();
        console.log('联网核查',res)
        if(res.rc == 1){
          this.imageHC = res.PHOTO;
          this.nextStep = '下一步'
        }else{
          NativeUI.toast(res.msg);
        }
      });
    }else{
      this.$emit("activeChange", this.tabActive+1);
    }
  }
}
</script>

<style scoped lang="scss">
  .form-style{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  tr{
    width: 80%;
    line-height: 60px;
  }
  tr:first-child{
    margin-bottom: 20px;
  }
  td{
    font-size: 18px;
    font-family: "Arial Normal", "Arial";
  }
  td:first-child{
    width: 120px;
    color: #a19b9b;
  }
  input{
    //border: 1px solid black;
    outline: none;
    border: 1px solid #b7b0b0;
    background-color: #f6f5f5;
    height: 40px;
    width: 300px;
  }
  .image-container{
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .image-style{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p{
    font-size: 16px;
  }
  .btn-area{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
  }
  .btn-area > button {
    width: 160px;
    height: 50px;
    border: 1px solid #BEBEBE;
    font-size: 19px;
    border-radius: 30px;
    outline: none;
    //margin-top: 80px;
  }
  .btn-area > button:nth-child(1){
    color: #BEBEBE;
    background-color: white;
    margin-right: 20px;
  }
  .btn-area > button:nth-child(2){
    color: white;
    background-color: #FF8651;
  }
  table {
    width: 50%;
    margin: 0 auto;
  }
  .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;
  }
  ::v-deep .d-form-field .field-border .van-field__body{
    border: none;
  }
  .camera-sty{
    width: 20px;
    height: 20px;
    margin-bottom: 20px;
  }
  .idNo-sty{
    display: flex;
  }
</style>
