<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="deal-with-top">
      <div class="deal-with-top-left">
        <div>
          <svg
            v-if="SEX ? SEX == '男' : true"
            class="icon iconsex"
            aria-hidden="true"
          >
            <use xlink:href="#icon-nanxing-gerentouxiangxpx"></use>
          </svg>
          <svg
            v-if="SEX ? SEX == '女' : false"
            class="icon iconsex"
            aria-hidden="true"
          >
            <use xlink:href="#icon-nvxing-gerentouxiangxpx"></use>
          </svg>
        </div>
        <div>{{ CUSTOMERNAME }}</div>
        <div>客户编号：{{ SERIALNO }}</div>
      </div>
    </div>
    <div class="deal-with-bottom">
      <tab-nav :tabList="tabList" @tabClick="tabClick" />
    </div>
    <div
      v-show="active == 0"
      class="information-container h-scroller flex-1-dhc activedata"
    >
      <van-index-bar
        highlight-color="#F79400"
        :index-list="indexListCollection"
      >
        <div style="padding-bottom: 50px">
          <van-index-anchor index="历史催收记录">
            <sub-title>历史催收记录</sub-title>
          </van-index-anchor>
          <table class="customer-management-information-form">
            <tr>
              <td>催收时间</td>
              <td>催收对象</td>
              <td>催收方式</td>
              <td style="width: 100px">催收结果</td>
              <td>联系电话</td>
              <td>催收人</td>
              <td>客户解释</td>
              <td style="width: 150px">备注说明</td>
              <td>催收时点的欠款金额</td>
            </tr>
            <tr v-if="historyContactList.length == 0">
              <td style="text-align: center" colspan="9">暂无数据！</td>
            </tr>
            <tr
              v-if="historyContactList.length != 0"
              v-for="(item, index) in historyContactList"
              :key="index"
            >
              <td>{{ item.PROCESSDATE }}</td>
              <td>{{ item.CONTACTORTYPE }}</td>
              <td>{{ item.CONTACTMETHOD }}</td>
              <td>{{ item.CONTACTRESULT }}</td>
              <td>{{ item.CONTACTTELNO }}</td>
              <td>{{ item.PROCESSUSERID }}</td>
              <td>{{ item.EXPLANATIONCODE }}</td>
              <td>{{ item.REMARK }}</td>
              <td>{{ item.OVERSUM }}</td>
            </tr>
          </table>
          <van-index-anchor index="该笔贷款历次还款承诺">
            <sub-title>该笔贷款历次还款承诺</sub-title>
          </van-index-anchor>
          <div class="v-list d-page d-scroll-container">
            <table class="customer-management-information-form">
              <tr>
                <td>编号</td>
                <td>承诺还款金额</td>
                <td>承诺还款日期</td>
                <td>登记人</td>
                <td>登记机构</td>
                <td>登记日期</td>
              </tr>
              <tr v-if="allRepayRecord.length == 0">
                <td style="text-align: center" colspan="6">暂无数据！</td>
              </tr>
              <tr
                v-if="allRepayRecord.length != 0"
                v-for="(item, index) in allRepayRecord"
                :key="index"
              >
                <td>{{ item.SERIALNO }}</td>
                <td>{{ item.REPAYAMOUNT }}</td>
                <td>{{ item.REPAYDATE }}</td>
                <td>{{ item.INPUTUSERNAME }}</td>
                <td>{{ item.INPUTORGNAME }}</td>
                <td>{{ item.INPUTDATE }}</td>
              </tr>
            </table>
          </div>
        </div>
      </van-index-bar>
    </div>
    <div
      v-show="active == 1"
      class="information-container h-scroller flex-1-dhc activedata"
    >
      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU">
        <div style="padding-bottom: 50px">
          <van-index-anchor index="借据基本信息">
            <sub-title>借据基本信息</sub-title>
          </van-index-anchor>
          <table-double-view
            :keyValue="serialInfoTitles"
            :data="serialBasicInfo"
          ></table-double-view>
          <van-index-anchor index="核销信息">
            <sub-title>核销信息</sub-title>
          </van-index-anchor>
          <table-double-view
            :keyValue="checkDeleteTitles"
            :data="serialBasicInfo"
          ></table-double-view>
          <van-index-anchor index="借据利率信息">
            <sub-title>借据利率信息</sub-title>
          </van-index-anchor>
          <table-double-view
            :keyValue="serialBasicInfoTitles"
            :data="serialBasicInfo"
          ></table-double-view>
          <van-index-anchor index="帐户信息">
            <sub-title>帐户信息</sub-title>
          </van-index-anchor>
          <table-double-view
            v-for="(item, index) in currentAcountInfo"
            :key="index + 'a'"
            :keyValue="currentRepayTitles"
            :data="item"
          ></table-double-view>
          <van-index-anchor index="共同还款人">
            <sub-title>共同还款人</sub-title>
          </van-index-anchor>
          <table-double-view
            v-for="(item, index) in abAcountInfo"
            :key="index + 'b'"
            :keyValue="abAcountTitles"
            :data="item"
          ></table-double-view>
          <van-index-anchor index="共同借款人">
            <sub-title>共同借款人</sub-title>
          </van-index-anchor>
          <table-double-view
            v-for="(item, index) in contractInfo"
            :key="index + 'c'"
            :keyValue="appAcountTitles"
            :data="item"
          ></table-double-view>
        </div>
      </van-index-bar>
    </div>
    <div
      v-show="active == 2"
      class="table-box h-scroller flex-1-dhc activedata"
    >
      <!--      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU1">-->
      <div style="padding-bottom: 50px">
        <sub-title>还款计划信息</sub-title>
        <!--          <div v-for="(item, index) in repayPlanInfo">-->
        <!--            <table-double-view-->
        <!--              :key="index + 'd'"-->
        <!--              :keyValue="repayPlanTitles"-->
        <!--              :data="item"-->
        <!--            >-->
        <!--            </table-double-view>-->
        <!--            <div class="borderStyle"></div>-->
        <!--          </div>-->
        <table class="customer-management-information-form">
          <tr>
            <td>期次</td>
            <td>本期欠款合计</td>
            <td>应还日期</td>
            <td>应还本金</td>
            <td>实还本金</td>
            <td>本期剩余本金</td>
            <td>应还利息</td>
            <td>实还利息</td>
            <td>应还罚息</td>
            <td>实还罚息</td>
            <td>应还复利</td>
            <td>实还复利</td>
            <td>结清日期</td>
          </tr>
          <tr v-if="repayPlanInfo.length == 0">
            <td style="text-align: center" colspan="6">暂无数据！</td>
          </tr>
          <tr
            v-if="repayPlanInfo.length != 0 && item"
            v-for="(item, index) in repayPlanInfo"
            :key="index"
          >
            <td>{{ item.PERIODNO }}</td>
            <td>{{ item.BSUM }}</td>
            <td>{{ item.PAYDATE }}</td>
            <td>{{ item.PAYPRINCIPALAMT }}</td>
            <td>{{ item.ACTUALPAYPRINCIPALAMT }}</td>
            <td>{{ item.PRINCIPALBALANCE }}</td>
            <td>{{ item.PAYINTERESTAMT }}</td>
            <td>{{ item.ACTUALPAYINTERESTAMT }}</td>
            <td>{{ item.PAYPRINCIPALPENALTYAMT }}</td>
            <td>{{ item.ACTUALPAYPRINCIPALPENALTYAMT }}</td>
            <td>{{ item.PAYINTERESTPENALTYAMT }}</td>
            <td>{{ item.ACTUALPAYINTERESTPENALTYAMT }}</td>
            <td>{{ item.FINISHDATE }}</td>
          </tr>
        </table>
      </div>
      <!--      </van-index-bar>-->
    </div>
    <div
      v-show="active == 3"
      class="table-box h-scroller flex-1-dhc activedata"
    >
      <!--      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU2">-->
      <!--        <div style="padding-bottom: 50px">-->
      <!--          <van-index-anchor index="还款记录">-->
      <!--            <sub-title>还款记录</sub-title>-->
      <!--          </van-index-anchor>-->
      <!--          <div v-for="(item, index) in detailInfo">-->
      <!--            <table-double-view-->
      <!--              :key="index + 'e'"-->
      <!--              :keyValue="repayRecordTitles"-->
      <!--              :data="item"-->
      <!--            ></table-double-view>-->
      <!--            <div class="borderStyle"></div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </van-index-bar>-->
      <div style="padding-bottom: 50px">
        <sub-title>还款记录</sub-title>
        <table class="customer-management-information-form">
          <tr>
            <td>期次</td>
            <td>实还日期</td>
            <td>实还本金</td>
            <td>实还利息</td>
            <td>实还罚息</td>
            <td>应还未还罚息</td>
            <td>应还复利</td>
            <td>实还复利</td>
          </tr>
          <tr v-if="detailInfo.length == 0">
            <td style="text-align: center" colspan="6">暂无数据！</td>
          </tr>
          <tr
            v-if="detailInfo.length != 0 && item"
            v-for="(item, index) in detailInfo"
            :key="index"
          >
            <td>{{ item.CUR_REPAY_TIMES + 1 }}</td>
            <td>{{ item.REPORT_DATE }}</td>
            <td>{{ item.REC_AMT }}</td>
            <td>{{ item.REC_INT }}</td>
            <td>{{ item.REC_ODP }}</td>
            <td>{{ item.ODP }}</td>
            <td>{{ item.BILLED_ODI }}</td>
            <td>{{ item.REC_ODI }}</td>
          </tr>
        </table>
      </div>
    </div>

    <div v-show="active == 4" class="h-scroller flex-1-dhc activedata">
      <div
        style="
          padding-bottom: 50px;
          margin-right: 4%;
          border-top: 1px solid #e1e2e3;
        "
      >
        <div class="imagedata">
          <div>
            <div>
              <svg
                style="width: 40px; height: 40px"
                class="icon icon_paizhao"
                aria-hidden="true"
              >
                <use xlink:href="#icon-pxwenjianjia"></use>
              </svg>
            </div>
            <div class="dataName">资料名称一</div>
            <div class="dataNum">(图片: 0/0 视频: 0/0 音频: 0/0)</div>
          </div>
          <div>
            <svg
              style="width: 35px; height: 35px"
              class="icon icon_paizhao"
              aria-hidden="true"
            >
              <use xlink:href="#icon-a-02_paizhao"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div v-show="active == 5" class="h-scroller flex-1-dhc activedata">
      <div style="padding-bottom: 50px; margin-right: 4%">
        <van-form @submit="onSubmit">
          <sub-title>本次催收登记</sub-title>
          <div class="v-list d-page d-scroll-container doubleRow">
            <d-datetime-picker
              :rules="[{ required: true, message: '催收时间不能为空' }]"
              v-model="PROCESSDATE"
              label="催收时间"
              placeholder="请选择催收时间"
              :startDate = "new Date()"
              :border="true"
              :required="true"
            ></d-datetime-picker>
            <d-select
              label="催收对象"
              :rules="[{ required: true, message: '催收对象不能为空' }]"
              placeholder="请选择催收对象"
              :required="true"
              border="true"
              v-model="CONTACTORTYPE"
              sfield="CONTACTORTYPE"
              size="small"
            ></d-select>
            <d-select
              label="催收方式"
              :rules="[{ required: true, message: '催收方式不能为空' }]"
              placeholder="请选择催收方式"
              :required="true"
              border="true"
              v-model="CONTACTMETHOD"
              sfield="CONTACTMETHOD"
              size="small"
            ></d-select>
            <d-select
              label="催收结果"
              :rules="[{ required: true, message: '催收结果不能为空' }]"
              placeholder="请选择催收结果"
              :required="true"
              border="true"
              v-model="CONTACTRESULT"
              sfield="CONTACTRESULT"
              size="small"
            ></d-select>
            <mobile-input
              label="联系电话"
              :rules="[{ validator: testPhoneNum, message: '格式错误，请输入' }]"
              type="digit"
              label-width="10px"
              :required="true"
              input-align="left"
              name="CONTACTTELNO"
              v-model="CONTACTTELNO"
              placeholder="请输入联系电话"
              size="small"
            />
            <mobile-input
              label="催收人"
              label-width="10px"
              input-align="left"
              name="PROCESSUSERID"
              :readonly="true"
              :border="false"
              v-model="PROCESSUSERID"
              size="small"
            />
            <d-select
              label="客户解释"
              :rules="[{ required: true, message: '客户解释不能为空' }]"
              placeholder="请选择解释内容"
              :required="true"
              border="true"
              v-model="EXPLANATIONCODE"
              sfield="EXPLANATIONCODE"
              size="small"
            ></d-select>
            <mobile-input
              label="备注说明"
              :rules="[{ required: true, message: '备注说明不能为空' }]"
              type="textarea"
              :maxlength="500"
              :required="true"
              :rows="3"
              label-width="10px"
              input-align="left"
              name="REMAKE"
              v-model="REMAKE"
              placeholder="备注说明"
              size="small"
            />
          </div>
          <div v-if="CONTACTRESULT == '0301'">
            <sub-title>帐户信息</sub-title>
          </div>
          <div
            v-if="CONTACTRESULT == '0301'"
            class="v-list d-page d-scroll-container doubleRow"
          >
            <mobile-input
              label="承诺还款金额"
              :rules="[{ required: true, message: '' }]"
              type="number"
              :maxlength="30"
              :required="true"
              label-width="10px"
              input-align="left"
              name="repayMoney"
              v-model="repayMoney"
              placeholder="请输入承诺还款金额"
              size="small"
            />
            <d-datetime-picker
              label="承诺还款日期"
              :rules="[{ required: true, message: '' }]"
              v-model="repayDate"
              placeholder="请选择承诺还款日期"
              :border="true"
              :required="true"
            ></d-datetime-picker>
            <mobile-input
              label="备注"
              class="remarks"
              :rules="[{ required: true, message: '' }]"
              :required="true"
              type="textarea"
              :maxlength="500"
              :rows="3"
              label-width="10px"
              input-align="left"
              name="introduction"
              v-model="introduction"
              placeholder="请输入"
              size="small"
            />
          </div>
          <div style="display: flex; justify-content: center">
            <van-button color="#ff574c" style="width: 100px" round type="info"
            >提交
            </van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Tab, Tabs } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { DatetimePicker } from "vant";
import BasicInformation from "@/components/customer-information/business-information/overview/BasicInformation.vue";
import TableDoubleView from "@/public/TableDoubleView.vue";
import DCalendar from "@/components/general/form/DCalendar.vue";
import Public from "@/public/ts/Public";
import { TabData } from "@/model/entity/TabData";

Vue.use(DatetimePicker);

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 催收详情
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "CollectionDetails",
  components: { DCalendar, TitleBar, BasicInformation, TableDoubleView }
})
export default class CollectionDetails extends Vue {
  title = "催收详情"; // 页面标题
  indexListCollection = ["历史催收记录", "该笔贷款历次还款承诺"];
  indexListIOU = [
    "借据基本信息",
    "核销信息",
    "借据利率信息",
    "帐户信息",
    "共同还款人",
    "共同借款人"
  ];
  indexListIOU1 = ["还款计划信息"];
  indexListIOU2 = ["还款记录"];
  tabList: TabData[] = [
    { tabText: "催收记录", tabId: "1" },
    { tabText: "借据信息", tabId: "2" },
    { tabText: "还款计划", tabId: "3" },
    { tabText: "还款记录", tabId: "4" },
    { tabText: "影像资料", tabId: "5" },
    { tabText: "催收登记", tabId: "6" }
  ];
  active = 0;

  //催收记录
  historyContactList = [];
  allRepayRecord = []; //历次还款承诺查询
  BUSINESSTYPE = this.$store.getters.getCusInfo.BUSINESSTYPE || "";
  CUSTOMERNAME = this.$store.getters.getCusInfo.CUSTOMERNAME || "";
  SEX = this.$store.getters.getCusInfo.SEX || "男";
  SERIALNO = this.$store.getters.getCusInfo.SERIALNO || ""; //任务编号
  OBJECTNO = this.$store.getters.getCusInfo.OBJECTNO || ""; //任务编号
  repayMoney = ""; //还款金额
  repayDate = ""; //还款日期
  calendarShow = false; //时间选择器
  minDate = new Date(); //至少从今天开始选
  maxDate = new Date(2050, 12, 1);
  // currentDate = new Date();
  currentDate = "";
  introduction = ""; //备注

  //借据信息
  //借据基本信息标题
  serialInfoTitles = {
    SERIALNO: "借据编号",
    BUSINESSTYPE: "一手住房按揭贷款",
    BUSINESSSUM: "借款金额",
    BUSINESSTERM: "贷款期限",
    PUTOUTDATE: "借据发放日期",
    MATURITYDATE: "借据到期日期",
    BUSINESSSTATUS: "业务形态",
    OVERDUEDAYS: "逾期天数",
    LCATIMES: "当前逾期期数",
    BALANCE: "借据余额",
    OVERDUEBALANCE: "逾期本金金额",
    NORMALBALANCE: "正常本金金额",
    INTERESTBALANCE1: "表内欠息余额",
    INTERESTBALANCE2: "表外欠息余额",
    FINEBALANCE1: "罚息余额",
    FINEBALANCE2: "复利余额"
  };
  //核销信息
  checkDeleteTitles = {
    WRITEOFFPRINCIPALAMOUNT: "核销本金金额",
    WRITEOFFINTERESTAMOUNT: "核销利息金额",
    WRITEOFFFINEAMOUNT: "核销罚息金额",
    WRITEOFFCOMPAMOUNT: "核销复利金额",
    ISCANCEL: "是否核销"
  };
  //借据利率基本信息
  serialBasicInfoTitles = {
    LoanRateTermID: "利率类型",
    BASERATETYPE: "基准利率类型",
    RATEUNIT: "利率单位",
    LPRTERMTYPE: "期限品种",
    BASERATE: "基准利率",
    LPREFFECTDATE: "LPR基础日期",
    RATEFLOAT: "浮动幅度（点/比）",
    BUSINESSRATE: "执行利率",
    RepriceType: "利率调整方式",
    DefaultRepriceDate: "利率调整日期",
    sRATEFLOAT: "罚息浮动幅度",
    sBUSINESSRATE: "罚息利率"
  };
  //帐户信息
  currentRepayTitles = {
    ACCOUNTINDICATOR: "帐户类别",
    ACCOUNTNO: "还款卡号",
    ACCOUNTNAME: "还款帐户名称"
  };
  //共同还款人
  abAcountTitles = {
    ACCOUNTNO: "还款卡号",
    ACCOUNTNAME: "还款帐户名称",
    ACCOUNT: "账号"
  };
  //共同借款人
  appAcountTitles = {
    SERIALNO: "流水号",
    APPLICANTID: "客户号",
    APPLICANTNAME: "客户姓名",
    INPUTUSERNAME: "登记人",
    INPUTORGNAME: "登记机构"
  };
  //还款计划信息
  repayPlanTitles = {
    BSUM: "本期欠款合计",
    PERIODNO: "期次",
    PAYDATE: "应还日期",
    PAYPRINCIPALAMT: "应还本金",
    ACTUALPAYPRINCIPALAMT: "实还本金",
    PRINCIPALBALANCE: "本期剩余本金",
    PAYINTERESTAMT: "应还利息",
    ACTUALPAYINTERESTAMT: "实还利息",
    PAYPRINCIPALPENALTYAMT: "应还罚息",
    ACTUALPAYPRINCIPALPENALTYAMT: "实还罚息",
    PAYINTERESTPENALTYAMT: "应还复利",
    ACTUALPAYINTERESTPENALTYAMT: "实还复利",
    FINISHDATE: "结清日期"
  };
  //还款记录
  repayRecordTitles = {
    CUR_REPAY_TIMES: "期次",
    REPORT_DATE: "实还日期",
    REC_AMT: "实还本金",
    REC_INT: "实还利息",
    REC_ODP: "实还罚息",
    ODP: "应还未还罚息",
    BILLED_ODI: "应还复利",
    REC_ODI: "实还复利"
  };
  repayPlanInfo: any[] = []; //还款计划信息
  detailInfo: any[] = []; //还款记录信息
  abAcountInfo = []; //共同还款人
  contractInfo = []; //共同借款人
  currentAcountInfo = []; //帐户信息，该笔贷款本次还款承诺
  serialBasicInfo = {}; //借据基本信息查询

  //催收登记
  PROCESSDATE = ""; //催收时间
  CONTACTORTYPE = ""; //催收对象
  CONTACTMETHOD = ""; //催收方式
  CONTACTRESULT = ""; //催收结果
  CONTACTTELNO = ""; //联系电话
  PROCESSUSERID = sessionStorage.getItem("userName"); //催收人
  EXPLANATIONCODE = ""; //客户解释
  REMAKE = ""; //备注说明
  PROCESSORGID = sessionStorage.getItem("branchNo"); //催收人机构号

  style = {
    border: "1px solid #fd5065",
    color: "#fd5065",
    borderBottom: "2px solid #ffffff"
  };
  others = false;

  onClick() {
  }

  activated() {
    console.log(this.CONTACTTELNO);
    // this.selectRepayAmount(); //历次还款承诺查询
  }

  /**
   * @description:  点击tab时切换
   * @author LiShenghui
   * @date 2022/2/14 15:12
   */
  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
    if (this.active == 0) {
      this.selectRepayAmount(); //历次还款承诺查询
      this.selectHistoryContactInfo(); //催收过程查询
    } else if (this.active == 1) {
      this.selectSerialBasicInfo(); //借据基本信息查询
      this.selectAccountInfo(); //该笔贷款本次还款承诺
      this.selectABAcountInfo(); //共同还款人
      this.selectContractInfo(); //共同借款人
    } else if (this.active == 2) {
      console.log("---");
      this.selectRepayPlan(); //还款计划信息查询
    } else if (this.active == 3) {
      this.selectRepayRecord(); //还款记录查询
    }
  }

  onSubmit() {
    //先提交本次还款承诺
    if (this.CONTACTRESULT == "0301") {
      this.saveRepayment();
    } else {
      this.saveContactInfo();
    }
  }

  //保存还款承诺
  saveRepayment() {
    let me = this;
    let param = {
      REPAYAMOUNT: this.repayMoney,
      REPAYDATE: this.repayDate,
      MEMO: this.introduction,
      INPUTUSERID: sessionStorage.getItem("workcode"), //登记人
      INPUTORGID: sessionStorage.getItem("branchNo"), //登记机构
      TASKSERIALNO: this.SERIALNO, //催收编号
      tc: nettyApi.TRADE_CODE.saveRepay
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(param);
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        me.saveContactInfo();
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 保存本次催收登记
   * @Author JiangTao
   * @Date 2022-01-21 下午 09:58
   */
  saveContactInfo() {
    let param = {
      PROCESSDATE: this.PROCESSDATE,
      CONTACTORTYPE: this.CONTACTORTYPE,
      CONTACTMETHOD: this.CONTACTMETHOD,
      CONTACTRESULT: this.CONTACTRESULT,
      CONTACTTELNO: this.CONTACTTELNO,
      PROCESSUSERID: sessionStorage.getItem("workcode"),
      EXPLANATIONCODE: this.EXPLANATIONCODE,
      REMAKE: this.REMAKE,
      TASKSERIALNO: this.SERIALNO,
      PROCESSORGID: this.PROCESSORGID,
      tc: nettyApi.TRADE_CODE.saveContactInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        NativeUI.toast("提交成功！");
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //催收信息
  /**
   * @Description 催收过程查询
   * @Author JiangTao
   * @Date 2022-01-22 下午 03:42
   */
  selectHistoryContactInfo(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectContactInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.historyContactList = res.COLL_TASK_PROCESS_ARRAY;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 历次还款承诺查询
   * @Author JiangTao
   * @Date 2022-01-18 下午 09:36
   */
  selectRepayAmount(pageNo = 1) {
    let param = {
      TASKSERIALNO: this.SERIALNO,
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectRepayList
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.allRepayRecord = res.COLL_REPAY_SCH_ARRAY;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //借据信息
  /**
   * @Description 借据基本信息查询
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:29
   */
  selectSerialBasicInfo(pageNo = 1) {
    let param = {
      TASKSERIALNO: this.SERIALNO,
      OBJECTNO: this.OBJECTNO,
      tc: nettyApi.TRADE_CODE.selectSerialInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.serialBasicInfo = res;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 该笔贷款本次还款承诺
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:35
   */
  selectAccountInfo(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectAccountInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.currentAcountInfo = res.AccountInfo;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 共同还款人
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:36
   */
  selectABAcountInfo(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectABAcountInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.abAcountInfo = res.ABAccountInfo;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 共同借款人
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:37
   */
  selectContractInfo(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectContractInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.contractInfo = res.ContractInfo;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 还款计划信息查询
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:38
   */
  selectRepayPlan(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectRepayPlan
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.repayPlanInfo = res.ScheduleInfo;
          for (let i = 0; i < this.repayPlanInfo.length; i++) {
            this.repayPlanInfo[i].PERIODNO = parseInt(
              this.repayPlanInfo[i].PERIODNO
            );
            this.repayPlanInfo[i].PAYPRINCIPALAMT = Public.formatMoney(
              this.repayPlanInfo[i].PAYPRINCIPALAMT,
              ","
            );
            this.repayPlanInfo[i].ACTUALPAYPRINCIPALAMT = Public.formatMoney(
              this.repayPlanInfo[i].ACTUALPAYPRINCIPALAMT,
              ","
            );
            this.repayPlanInfo[i].PRINCIPALBALANCE = Public.formatMoney(
              this.repayPlanInfo[i].PRINCIPALBALANCE,
              ","
            );
            this.repayPlanInfo[i].PAYINTERESTAMT = Public.formatMoney(
              this.repayPlanInfo[i].PAYINTERESTAMT,
              ","
            );
            this.repayPlanInfo[i].ACTUALPAYINTERESTAMT = Public.formatMoney(
              this.repayPlanInfo[i].ACTUALPAYINTERESTAMT,
              ","
            );
            this.repayPlanInfo[i].PAYPRINCIPALPENALTYAMT = Public.formatMoney(
              this.repayPlanInfo[i].PAYPRINCIPALPENALTYAMT,
              ","
            );
            this.repayPlanInfo[i].ACTUALPAYPRINCIPALPENALTYAMT =
              Public.formatMoney(
                this.repayPlanInfo[i].ACTUALPAYPRINCIPALPENALTYAMT,
                ","
              );
          }
          console.log(this.repayPlanInfo);
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 还款记录查询
   * @Author JiangTao
   * @Date 2022-01-19 上午 11:39
   */
  selectRepayRecord(pageNo = 1) {
    let param = {
      OBJECTNO: this.OBJECTNO,
      ROWNUMSTART: (pageNo - 1) * 10,
      ROWNUMEND: pageNo * 10,
      tc: nettyApi.TRADE_CODE.selectRepayRecord
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.detailInfo = res.DetailInfo;
          for (let i = 0; i < this.detailInfo.length; i++) {
            this.detailInfo[i].CUR_REPAY_TIMES = parseInt(
              this.detailInfo[i].CUR_REPAY_TIMES
            );
            this.detailInfo[i].REC_AMT = Public.formatMoney(
              this.detailInfo[i].REC_AMT,
              ","
            );
            this.detailInfo[i].REC_INT = Public.formatMoney(
              this.detailInfo[i].REC_INT,
              ","
            );
            this.detailInfo[i].REC_ODP = Public.formatMoney(
              this.detailInfo[i].REC_ODP,
              ","
            );
            this.detailInfo[i].ODP = Public.formatMoney(
              this.detailInfo[i].ODP,
              ","
            );
            this.detailInfo[i].BILLED_ODI = Public.formatMoney(
              this.detailInfo[i].BILLED_ODI,
              ","
            );
            this.detailInfo[i].REC_ODI = Public.formatMoney(
              this.detailInfo[i].REC_ODI,
              ","
            );
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  testPhoneNum(telno: any) {
    let patrn = /^0?(13[0-9]|15[012356789]|18[0123456789]|14[57]|17[012356789]|16[6])[0-9]{8}$/,
      patrn1 = /^(0[1-9]{2})-\d{8}$|^(0[1-9]{3}-(\d{7,8}))$/,
      patrn2 = /^(0[1-9]{2})\d{8}$|^(0[1-9]{3}(\d{7,8}))$|^([0-9](\d{6,7}))$/;
    if (!patrn.test(telno) && !patrn1.test(telno) && !patrn2.test(telno)) {
      return false;
    }
    return true;
  }
}
</script>

<style scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1% 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
  z-index: 2000;
}

.deal-with-top-left {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.deal-with-top-left > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  padding-top: 5px;
  font-size: 129%;
  line-height: 30px;
}

.deal-with-top-left > div:nth-child(3) {
}

.deal-with-top-left img {
  width: 2.42%;
  padding-top: -1%;
}

.deal-with-top-right {
  width: 9.51%;
}

.deal-with-top-right button {
  width: 100%;
  font-size: 115%;
  padding: 2.6% 0;
  background-color: white;
  border: 1px solid #fd5065;
  color: #fd5065;
  border-radius: 3px;
}

.label div {
  margin-right: 1%;
  background-color: white;
  border: 1px solid #999999;
  border-bottom: 0;
  font-size: 115%;
  padding: 0.58% 1.2%;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}

.deal-with-bottom {
  width: 92%;
  margin: 10px auto;
  position: relative;
  z-index: 2000;
}

.iconsex {
  width: 35px;
  height: 35px;
}

::v-deep .van-tabs {
  width: 100%;
}

::v-deep .van-tab {
  margin: 0 10px;
  border: 1px solid #e1e2e3;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom: 0;
}

::v-deep .van-tab--active {
  border-color: #ff574c;
  border-bottom-color: white;
}

::v-deep .van-tabs__wrap {
  border-bottom: 1px solid #e1e2e3;
  padding-right: 30%;
  z-index: 2000;
}

::v-deep .van-tabs__line {
  margin-bottom: -2px;
  z-index: 2000;
}

::v-deep .information-container {
  padding-left: 10px !important;
}

.activedata {
  margin-left: 4%;
}

::v-deep .van-index-bar__sidebar {
  top: 60% !important;
}

.imagedata {
  padding: 0 15px;
  width: 100%;
  height: 75px;
  border-bottom: 1px solid #e1e2e3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.imagedata > div:nth-child(1) {
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dataName {
  max-width: 50%;
  max-height: 40px;
  overflow-y: auto;
  font-size: 16px;
  color: #000000;
  margin: 0 20px;
  word-break: break-word;
}

.dataNum {
  max-width: 30%;
  max-height: 40px;
  overflow-y: auto;
  font-size: 14px;
  color: #999999;
  word-break: break-word;
}

::v-deep .d-form-field .van-field__label span {
  font-size: 14px;
}

::v-deep .van-field__label {
  width: 25%;
  text-align: right;
}

::v-deep .van-field__body {
  padding: 4px 0;
}

::v-deep .d-form-field .van-field.field-small .van-field__label,
.d-form-field .van-field.field-small .van-field__control {
  padding-right: 5px;
}

::v-deep .van-cell::after {
  border: 0;
}

.doubleRow {
  display: grid;
  width: 80%;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
}

.doubleRow > div:nth-child(8) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 7;
}

::v-deep .doubleRow > div:nth-child(8) > div:nth-child(1) .van-field__label {
  width: 12% !important;
}

::v-deep .remarks > div:nth-child(1) .van-field__label {
  width: 12% !important;
}

.remarks {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

.borderStyle {
  border-top: 1px solid #e1e2e3;
}

.table-box {
  margin-left: 50px;
  margin-right: 10%;
}
</style>
