<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="h-scroller flex-1-dhc activedata">
      <anchor-nav ref="anchorNav" :navList="navList">
        <template>
          <div slot="evaluation">
            <!-- 总体评价 -->
            <div class="v-list d-page d-scroll-container">
              <van-form @submit="onSubmit">
                <d-select
                  label="检查结论"
                  :rules="[{ required: true, message: '' }]"
                  placeholder="请选择检查结论"
                  :required="true"
                  border="true"
                  v-model="checkResult"
                  :sfield="sfieldName"
                  size="small"
                ></d-select>
                <mobile-input
                  class="remarks"
                  label="说明"
                  type="textarea"
                  :maxlength="500"
                  :rows="3"
                  label-width="10px"
                  input-align="left"
                  name="introduction"
                  v-model="introduction"
                  placeholder="请输入"
                  size="small"
                />
                <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 slot="syfDetailInfo">
            <!-- 随意分项下贷款详情 -->
            <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>
              </tr>
              <tr v-if="syfInfo.length != 0">
                <td style="text-align: center" colspan="9">暂无数据！</td>
              </tr>
              <tr
                v-if="syfInfo.length != 0"
                v-for="(item, index) in syfInfo"
                :key="index"
              >
                <!-- <td>{{ item.CONTRACTNO }}</td> -->0
                <td>{{ item.BDSERIALNO }}</td>
                <!-- <td>{{ item.CUSTOMERNAME }}</td> -->
                <td>{{ item.CERTID }}</td>
                <td>{{ item.BUSINESSTYPENAME }}</td>
                <td>{{ item.BUSINESSSUM }}</td>
                <td>{{ item.BALANCE }}</td>
                <td>{{ item.PUTOUTDATE }}</td>
                <td>{{ item.MATURITYDATE }}</td>
                <td>{{ item.OPERATEORGNAME }}</td>
                <td>{{ item.OPERATEUSERNAME }}</td>
              </tr>
            </table>
          </div>
        </template>
      </anchor-nav>
    </div>
    <div v-show="active == 1" class="h-scroller flex-1-dhc activedata">
      <div v-if="contractInfo.length != 0">
        <sub-title>合同详情</sub-title>
        <table-double-view
          v-for="(item, index) in contractInfo"
          :key="index"
          :keyValue="contractTitles"
          :data="item"
        ></table-double-view>
      </div>
      <div v-else align="center">
        <img
          src="@/assets/images/nodata.png"
          style="width: 40%; margin-top: 137px"
        />
      </div>
    </div>

    <div v-show="active == 2" class="h-scroller flex-1-dhc activedata">
      <div v-if="duebillInfo.length != 0">
        <sub-title>借据基本信息</sub-title>
        <table-double-view
          v-for="(item, index) in duebillInfo"
          :key="index"
          :keyValue="duebillTitles"
          :data="item"
        ></table-double-view>
      </div>
      <div v-else align="center">
        <img
          src="@/assets/images/nodata.png"
          style="width: 40%; margin-top: 137px"
        />
      </div>
    </div>
    <div v-show="active == 3" class="h-scroller flex-1-dhc activedata">
      <div style="width: 100%; margin-top: 50px; text-align: center">
        暂无数据！
      </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 { TabData } from "@/model/entity/TabData";
import Public from "@/public/ts/Public";

Vue.use(DatetimePicker);

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 催收详情
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "PostLoanDetailsView",
  components: { DCalendar, TitleBar, BasicInformation, TableDoubleView }
})
export default class PostLoanDetailsView extends Vue {
  title = "贷后检查详情"; // 页面标题
  indexListCollection = ["总体评价", "历史催收记录"];
  indexListIOU = ["基本信息", "担保信息"];
  tabList: TabData[] = [
    { tabText: "检查详情", tabId: "1" },
    { tabText: "合同详情", tabId: "2" },
    { tabText: "借据详情", tabId: "3" },
    { tabText: "影像上传", tabId: "4" }
  ];
  activeType: any = "";
  active = 0;
  userInfo = ""; //客户数据
  SERIALNO = this.$store.getters.getCusInfo.SERIALNO || ""; //任务编号
  BUSINESSTYPE = this.$store.getters.getCusInfo.BUSINESSTYPE || "";
  CUSTOMERNAME = this.$store.getters.getCusInfo.CUSTOMERNAME || "";
  SEX = this.$store.getters.getCusInfo.SEX || "男";
  //检查详情
  checkResult = ""; //检查结论
  introduction = ""; //备注
  syfInfo: any[] = []; //随意分详情
  contractInfo: any[] = []; //合同信息详情
  duebillInfo: any[] = []; //借据信息
  sfieldName = this.$store.getters.getCusInfo.INSPECTTYPE == "随意分贷款检查" ? "SYFINSPECTATION" : "INSPECTATION";
  //合同详情
  //合同信息详情
  contractTitles = {
    CONTRACTARTIFICIALNO: "合同文本编号",
    CONTRACTDATE: "起始日期",
    MATURITYDATE: "到期日期",
    PRODUCTID: "方案产品",
    PRODUCTIDNAME: "方案产品名",
    OCCURTYPE: "发生类型",
    BUSINESSTERM: "合同期限(月)",
    BUSINESSCURRENCY: "币种",
    BUSINESSSUM: "合同金额(元)",
    ADVANCENOPAY: "提前还款手续费(元)",
    ADVANCEPAYRATE: "提前还款手续费率(%)",
    ADVANCEPAYRULER: "提前还款手续费规则",
    APPLICATIONCARDPRODUCT: "适用卡产品",
    CHARGETERM: "计费周期",
    COUNTERFEETYPE: "手续费收取方式",
    // CUSTOMERNAME: '客户名称',
    CUSTOMERSOURCE: "客户来源",
    CYCLENDATE: "信用卡账单日",
    FEERATE: "费率(%)",
    FIXTERM: "是否固定期限",
    INDUSTRYTYPE: "客户所属行业",
    INSTALAPPLYTERM: "分期申请期限(月)",
    INSTALPAYMENTTYPE: "信用卡还款方式",
    ISINCD: "是否成都市公积金",
    ISNEEDNORMALCARD: "是否需要标准信用卡",
    MERCHANTID: "分期商户编号",
    NONSTDINDICATOR: "特殊业务标识",
    OTHERBREAKSUM: "其它违约金(元)",
    OVERDRAFTID: "透支科目号",
    VOUCHTYPE: "担保方式"
  };
  //借据详情
  duebillTitles = {
    DUEBILLSERIALNO: "借据编号",
    BUSINESSTYPE: "产品名称",
    BUSINESSSUM: "借据金额(元)",
    BUSINESSCURRENCY: "币种",
    BUSINESSTERM: "贷款期限(月)",
    PUTOUTDATE: "借据发放日期",
    MATURITYDATE: "借据到期日期",
    ACCOUNTINGORGID: "账务机构",
    BUSINESSSTATUS: "业务形态",
    MONTHCLASS: "月初贷款形态",
    OVERDUEDAYS: "逾期天数",
    HISOVERDUEDAYS: "历史最高逾期天数",
    LCATIMES: "当前逾期期数",
    TATIMES: "累计逾期期数",
    MAXODTIMES: "历史最高逾期期数",
    BALANCE: "借据余额(元)",
    OVERDUEBALANCE: "逾期本金金额(元)",
    NORMALBALANCE: "正常本金金额(元)",
    INTERESTBALANCE1: "表内欠息余额(元)",
    INTERESTBALANCE2: "表外欠息余额(元)",
    FINEBALANCE1: "罚息余额(元)",
    FINEBALANCE2: "复利余额(元)"
  };
  syfTitles = {
    CONTRACTNO: "贷款合同编号",
    BDSERIALNO: "借据编号",
    // CUSTOMERNAME: '客户名称',
    CERTID: "证件编号",
    BUSINESSTYPENAME: "方案产品",
    BUSINESSSUM: "贷款金额",
    BALANCE: "贷款余额",
    PUTOUTDATE: "贷款发放日",
    MATURITYDATE: "贷款到期日",
    OPERATEORGNAME: "受理机构",
    OPERATEUSERNAME: "客户经理"
  };
  // 检查详情
  navList = [
    { key: "evaluation", titleText: "总体评价" },
    { key: "syfDetailInfo", titleText: "随意分项下贷款详情" }
  ];
  // 合同详情
  navList1 = [
    { key: "basicInfo", titleText: "基本信息" },
    { key: "guaranteeInfo", titleText: "担保信息" }
  ];


  mounted() {
    this.selectLoancheckDetail().then(() => {
      console.log(this.introduction);
      this.SERIALNO = this.$store.getters.getCusInfo.SERIALNO || ""; //任务编号
      this.activeType = sessionStorage.getItem("activeType");
      this.userInfo = this.$store.getters.getCusInfo;
    });
  }

  /**
   * @description:  点击tab时切换
   * @author LiShenghui
   * @date 2022/2/14 15:12
   */
  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
    // if (this.active == 0) {

    // } else if (this.active == 1) {
    //   this.selectLoancheckDetail(); //贷后详情查询
    // } else if (this.active == 2) {
    //   this.selectLoancheckDetail(); //贷后详情查询
    // }
  }

  onSubmit() {
    this.saveLoanCheckInfo().then(() => {
      setTimeout(() => {
        this.$router.go(-1);
      }, 2500);
    });
  }

  //保存贷后检查信息
  saveLoanCheckInfo() {
    let param = {
      OBJECTNO: this.SERIALNO, //上传任务号
      ADDFLAG: "2", //是否新增，默认为保存
      INSPECTACTION: this.checkResult, //检查结论
      OPINION: this.introduction, //说明
      tc: nettyApi.TRADE_CODE.addNetLoanCheckInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //新增成功后重新查询一次
        NativeUI.toast("保存成功！");
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //网贷贷后详情查询
  selectLoancheckDetail() {
    let param = {
      SERIALNO: this.SERIALNO,
      tc: nettyApi.TRADE_CODE.selectNetLoanCheckDetail
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.syfInfo = res.SYF_DUEBILL_LIST; //随意分详情
        this.contractInfo = res.CONTRACT_INFO_LIST; //合同信息详情
        this.duebillInfo = res.DUEBILL_INFO_LIST; //借据详情
        this.checkResult = res.INSPECTACTION; //检查结论
        //   this.guarantyInfo = res.GUARANTY_CONTRACT_LIST; //担保信息
        this.introduction = res.OPINION; //说明

        //改变数据格式
        //随意分
        for (let i = 0; i < this.syfInfo.length; i++) {
          this.syfInfo[i].BALANCE = Public.formatMoney(
            this.syfInfo[i].BALANCE,
            ","
          );
          this.syfInfo[i].BUSINESSSUM = Public.formatMoney(
            this.syfInfo[i].BUSINESSSUM,
            ","
          );
        }
        //合同详情
        for (let i = 0; i < this.contractInfo.length; i++) {
          // this.contractInfo[i].BALANCE = Public.formatMoney(this.contractInfo[i].BALANCE);
          this.contractInfo[i].BUSINESSSUM = Public.formatMoney(
            this.contractInfo[i].BUSINESSSUM,
            ","
          );
          if (this.contractInfo[i].CHARGETERM == "1") {
            this.contractInfo[i].CHARGETERM = "按日";
          } else if (this.contractInfo[i].CHARGETERM == "2") {
            this.contractInfo[i].CHARGETERM = "按期";
          }

          if (this.contractInfo[i].FIXTERM == "1") {
            this.contractInfo[i].FIXTERM = "是";
          } else if (this.contractInfo[i].FIXTERM == "2") {
            this.contractInfo[i].FIXTERM = "否";
          }
          this.contractInfo[i].INSTALAPPLYTERM = parseInt(
            this.contractInfo[i].INSTALAPPLYTERM
          );

          if (this.contractInfo[i].COUNTERFEETYPE == "1") {
            this.contractInfo[i].COUNTERFEETYPE = "一次性";
          } else if (this.contractInfo[i].COUNTERFEETYPE == "2") {
            this.contractInfo[i].COUNTERFEETYPE = "分期收取";
          }
          this.contractInfo[i].ADVANCENOPAY = Public.formatMoney(
            this.contractInfo[i].ADVANCENOPAY,
            ","
          );
          this.contractInfo[i].OTHERBREAKSUM = Public.formatMoney(
            this.contractInfo[i].OTHERBREAKSUM,
            ","
          );
          if (this.contractInfo[i].ADVANCEPAYRULER == "1") {
            this.contractInfo[i].ADVANCEPAYRULER = "剩余本金";
          } else if (this.contractInfo[i].ADVANCEPAYRULER == "2") {
            this.contractInfo[i].ADVANCEPAYRULER = "分期总金额";
          }
          if (this.contractInfo[i].VOUCHTYPE == "1") {
            this.contractInfo[i].VOUCHTYPE = "抵押";
          } else if (this.contractInfo[i].VOUCHTYPE == "2") {
            this.contractInfo[i].VOUCHTYPE = "质押";
          } else if (this.contractInfo[i].VOUCHTYPE == "3") {
            this.contractInfo[i].VOUCHTYPE = "保证";
          } else if (this.contractInfo[i].VOUCHTYPE == "D") {
            this.contractInfo[i].VOUCHTYPE = "信用";
          }
        }
        //借据详情数据处理
        for (let i = 0; i < this.duebillInfo.length; i++) {
          this.duebillInfo[i].BUSINESSSUM = Public.formatMoney(
            this.duebillInfo[i].BUSINESSSUM,
            ","
          );
          this.duebillInfo[i].BUSINESSTERM = parseInt(
            this.duebillInfo[i].BUSINESSTERM
          );
          this.duebillInfo[i].OVERDUEDAYS = parseInt(
            this.duebillInfo[i].OVERDUEDAYS
          );
          // this.duebillInfo[i].HISOVERDUEDAYS = parseInt(this.duebillInfo[i].HISOVERDUEDAYS);
          this.duebillInfo[i].LCATIMES = parseInt(this.duebillInfo[i].LCATIMES);
          // this.duebillInfo[i].TATIMES = parseInt(this.duebillInfo[i].TATIMES);
          // this.duebillInfo[i].MAXODTIMES = parseInt(this.duebillInfo[i].MAXODTIMES);
          this.duebillInfo[i].BALANCE = Public.formatMoney(
            this.duebillInfo[i].BALANCE,
            ","
          );
          this.duebillInfo[i].OVERDUEBALANCE = Public.formatMoney(
            this.duebillInfo[i].OVERDUEBALANCE,
            ","
          );
          this.duebillInfo[i].INTERESTBALANCE1 = Public.formatMoney(
            this.duebillInfo[i].INTERESTBALANCE1,
            ","
          );
          this.duebillInfo[i].INTERESTBALANCE2 = Public.formatMoney(
            this.duebillInfo[i].INTERESTBALANCE2,
            ","
          );
          this.duebillInfo[i].FINEBALANCE1 = Public.formatMoney(
            this.duebillInfo[i].FINEBALANCE1,
            ","
          );
          this.duebillInfo[i].FINEBALANCE2 = Public.formatMoney(
            this.duebillInfo[i].FINEBALANCE2,
            ","
          );
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  detail(item: any) {
    console.log(item);
    //只有存在抵押物的时候
    if (item.ASSET_INFO_LIST.length != 0) {
      this.$router.push({
        name: "CollateralDetail",
        params: {
          assetInfoList: item
        }
      });
    } else {
      NativeUI.toast("暂无抵质押物！");
    }
    // this.$router.push({
    //   path: "/CollateralDetail",
    // });
  }
}
</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: 60%;
  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: 8%;
  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;
}

::v-deep .van-form {
  display: grid;
  width: 90%;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
}

::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;
}

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

::v-deep .van-form > div:nth-child(3) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
}

::v-deep .van-index-bar__sidebar {
  top: 200px !important;
  right: 5px !important;
  transform: unset;
}

::v-deep .d-subtitle > span {
  width: 5px;
  background: #f79400;
  height: 12px;
  margin-right: 10px;
}

::v-deep .d-subtitle {
  margin-left: 20px;
}
</style>
