<template>
<div>
  <p>请申请人确认交易信息</p>
  <sub-title style="margin-left: 50px;">基本信息</sub-title>
  <div>
    <table-double-view :incomingKeyCls="incomingKeyCls" :incomingValCls="incomingKeyCls" :keyValue="basicInfo" :data="basicInfoData"></table-double-view>
  </div>
  <sub-title style="margin-left: 50px;">业务内容</sub-title>
  <div>
    <table-double-view :incomingKeyCls="incomingKeyCls" :incomingValCls="incomingKeyCls" :keyValue="businessKey" :data="businessData"></table-double-view>
  </div>
  <div class="btn-area">
    <button @click="stopCheck">返回</button>
    <button @click="submit">确认</button>
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop} from "vue-property-decorator";
import {Cell, CellGroup} from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import {NativeUI} from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";

@Component({
  name: 'ConfirmInfo',
  components: { Cell, CellGroup }
})
export default class ConfirmInfo extends Vue{
  @Prop(Number) tabActive: Number | any;
  @Prop(Object) custInfo: Object | any;

  keyClass = false;
  incomingKeyCls = {
    'width': '50%',
    'font-size': '16px'
  };
  incomingGridCls = {
    'width': '80%',
    'grid-template-columns': 'repeat(1, 0.7fr) repeat(1, 1fr)'
  };
  basicInfo = {
    CUSTOMERNAME: '姓名',
    SEX: '性别',
    nationality: '国籍',
    idType: '证件类型',
    CERTID: '证件号码',
    // validityPeriod: '证件有效期',
    // profession: '职业',
    TELPHONE: '手机号',
    COMPANYADD: '公司地址'
  };
  basicInfoData = {
    CUSTOMERNAME: '',
    SEX: '',
    nationality: '中国',
    idType: '身份证',
    CERTID: '证件号码',
    // validityPeriod: '证件有效期',
    // profession: '职业',
    TELPHONE: '',
    COMPANYADD: ''
  };
  businessKey = {
    businessContent: '业务内容',
    CARDNBR: '银行卡号',
    BUSI_NAME: '公司名称',
    cardProduct: '卡产品',
    // accountType: '账户类型',
    // EXPIRE: '有效期',
    OPENDATE: '发卡日期'
  };
  businessData = {
    businessContent: '信用卡网络申请面签',
    CARDNBR: '',
    BUSI_NAME: '',
    // EXPIRE: '',
    cardProduct: '随意分信用卡',
    // accountType: '100000标准普卡',
    OPENDATE: ''
  };

  created(){
    console.log(this.custInfo);
    this.businessData.BUSI_NAME = this.custInfo.COMPANYNAME;
    this.basicInfoData.CUSTOMERNAME = this.custInfo.CUSTOMERNAME;
    this.basicInfoData.SEX = this.custInfo.SEX;
    this.basicInfoData.CERTID = this.custInfo.CERTID;
    this.basicInfoData.TELPHONE = this.custInfo.TELPHONE;
    this.basicInfoData.COMPANYADD = this.custInfo.COMPANYADD;
  }
  stopCheck(){
    if (this.tabActive != 0){
      this.$emit("activeChange", this.tabActive-1);
    }
  };
  submit(){
    this.$emit("activeChange", this.tabActive+1);
  };
}
</script>
<style scoped lang="scss">
p{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.btn-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn-area > button {
  width: 180px;
  height: 50px;
  border: 1px solid #BEBEBE;
  font-size: 19px;
  border-radius: 30px;
  outline: none;
}
.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;
}
</style>
