<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-if="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"
                    native-type="submit"
                  >保存
                  </van-button
                  >
                </div>
              </van-form>
            </div>
          </div>
          <div slot="historyRecord">
            <!-- 历史催收记录 -->
            <table class="customer-management-information-form">
              <tr>
                <td>催收时间</td>
                <td>催收对象</td>
                <td>催收方式</td>
                <td>催收结果</td>
                <td>联系电话</td>
                <td>催收人</td>
                <td>客户解释</td>
                <td style="width: 15%">备注说明</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.REMAKE }}</td>
                <td>{{ item.OVERSUM }}</td>
              </tr>
            </table>
          </div>
        </template>
      </anchor-nav>
    </div>
    <div
      v-if="active == 1 && activeType == '0'"
      class="h-scroller flex-1-dhc activedata"
    >
      <anchor-nav ref="anchorNav" :navList="navList1">
        <template>
          <div slot="basicInfo">
            <!-- 基本信息 -->
            <div>
              <table-double-view
                :keyValue="serialInfoTitles"
                :data="contractInfo"
              ></table-double-view>
            </div>
          </div>
          <div slot="guaranteeInfo">
            <!-- 担保信息 -->
            <table class="customer-management-information-form">
              <tr>
                <td>担保合同号</td>
                <td>担保类型</td>
                <td>担保方式</td>
                <td>担保人名称</td>
                <td>担保金额</td>
                <td>担保合同状态</td>
                <td>抵质押物</td>
              </tr>
              <tr v-if="guarantyInfo.length == 0">
                <td style="text-align: center" colspan="7">暂无数据！</td>
              </tr>
              <tr
                v-if="guarantyInfo.length != 0"
                v-for="(item, index) in guarantyInfo"
                :key="index"
              >
                <td>{{ item.SERIALNO }}</td>
                <td>{{ item.CONTRACTTYPE }}</td>
                <td>{{ item.GUARANTYTYPE }}</td>
                <td>{{ item.GUARANTORNAME }}</td>
                <td>{{ item.GUARANTYVALUE }}</td>
                <td>{{ item.CONTRACTSTATUS }}</td>
                <td style="color: #00a3ff" @click="detail(item)">详情</td>
              </tr>
            </table>
          </div>
        </template>
      </anchor-nav>
    </div>
    <div
      v-if="active == 1 && activeType == '1'"
      class="h-scroller flex-1-dhc"
    >
      <div
        style="
          width: 80%;
          border: 1px solid #e1e2e3;
          border-radius: 15px;
          margin: 0 auto 15px auto;
        "
        v-for="(item, index) in prtInfo"
        :key="index"
      >
        <table-double-view
          :keyValue="prtInfoTitles"
          :data="item"
        ></table-double-view>
      </div>
    </div>
    <div
      v-if="active == 2 && activeType == '0'"
      class="h-scroller flex-1-dhc activedata"
    >
      <sub-title>借据基本信息</sub-title>
      <table-double-view
        :keyValue="duebillTitles"
        :data="duebillInfo"
      ></table-double-view>
    </div>
    <div
      v-if="active == 2 && activeType == '1'"
      class="h-scroller flex-1-dhc"
    >
      <div
        style="
          width: 80%;
          border: 1px solid #e1e2e3;
          border-radius: 15px;
          margin: 0 auto 15px auto;
        "
        v-for="(item, index) in entInfo"
        :key="index"
      >
        <table-double-view
          :keyValue="entInfoTitles"
          :data="item"
        ></table-double-view>
      </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";

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 = ["基本信息", "担保信息"];
  titles = [
    { name: "检查详情", bsno: "1" },
    { name: "合同详情", bsno: "2" },
    { name: "借据详情", bsno: "3" },
    { name: "影像上传", bsno: "4" }
  ];
  tabList: TabData[] = [
    { tabText: "催收记录", tabId: "1" },
    { tabText: "借据信息", tabId: "2" },
    { tabText: "还款计划", tabId: "3" },
    { tabText: "还款记录", tabId: "4" },
    { tabText: "影像资料", tabId: "5" },
    { tabText: "催收登记", tabId: "6" }
  ];
  activeType: any = "";
  active = 0;
  userInfo: any = ""; //客户数据
  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 = ""; //检查结论
  historyContactList = [];
  introduction = ""; //备注
  sfieldName = this.$store.getters.getCusInfo.INSPECTTYPE == "合作项目检查" ? "CheckResult" : "INSPECTATION";

  //合同详情
  //基本信息
  serialInfoTitles = {
    CONTRACTSERIALNO: "合同号",
    CONTRACTDATE: "起始日期",
    MATURITYDATE: "到期日期",
    PRODUCTID: "方案产品",
    PRODUCTIDNAME: "方案产品名",
    OCCURTYPE: "发生类型",
    BUSINESSTERM: "合同期限",
    BUSINESSCURRENCY: "币种",
    BUSINESSSUM: "合同金额(元)",
    SUBVOUCHTYPE: "担保方式",
    ACCOUNTINGORGID: "入账机构",
    ACCOUNTINGORGNAME: "入账机构名称",
    PURPOSETYPE: "贷款用途",
    CONTRACTBUSINESSRATE: "执行利率",
    CONTRACTTERMID: "还款方式"
  };
  contractInfo = {}; //基本信息
  guarantyInfo = []; //担保信息
  //借据详情
  duebillTitles = {
    DUEBILLSERIALNO: "借据编号",
    BUSINESSTYPE: "产品名称",
    BUSINESSSUM: "借据金额(元)",
    BUSINESSCURRENCY: "币种",
    BUSINESSTERM: "贷款期限(月)",
    PUTOUTDATE: "借据发放日期",
    MATURITYDATE: "借据到期日期",
    ACCOUNTINGORGID: "账务机构",
    DUEBILLBUSINESSRATE: "执行利率",
    DUEBILLTERMID: "还款方式",
    BUSINESSSTATUS: "业务形态",
    MONTHCLASS: "月初贷款形态",
    OVERDUEDAYS: "逾期天数",
    HISOVERDUEDAYS: "历史最高逾期天数",
    LCATIMES: "当前逾期期数",
    TATIMES: "累计逾期期数",
    MAXODTIMES: "历史最高逾期期数",
    BALANCE: "借据余额(元)",
    OVERDUEBALANCE: "逾期本金金额(元)",
    NORMALBALANCE: "正常本金金额(元)",
    INTERESTBALANCE1: "表内欠息余额(元)",
    INTERESTBALANCE2: "表外欠息余额(元)",
    FINEBALANCE1: "罚息余额(元)",
    FINEBALANCE2: "复利余额(元)"
  };
  duebillInfo = {};

  //合同项目详情
  prtInfoTitles = {
    CUSTOMERID: "合作方编号",
    SERIALNO: "合作项目流水号",
    CUSTOMERNAME: "合作方名称",
    PROJECTTYPE: "合作项目类型",
    PROJECTNAME: "合作项目名称",
    EFFECTDATE: "项目起始日期",
    EXPIRYDATE: "项目截止日期",
    ISGUARANTY: "是否提供担保",
    LARGESTPERCENTAGE: "最高贷款成数"
  };
  prtInfo = []; //合作项目详情

  entInfoTitles = {
    SERIALNO: "项目编号",
    PROJECTTYPE: "项目类型",
    PROJECTNAME: "项目名称",
    CUSTOMERID: "所属合作方",
    STATUS: "合作项目状态",
    INPUTUSERNAME: "录入人",
    INPUTORGNAME: "录入机构",
    INPUTDATE: "2010/09/21",
    UPDATEUSERNAME: "更新人",
    UPDATEDATE: "更新时间"
  };
  entInfo = []; //合作方详情
  // 检查详情
  navList = [
    { key: "evaluation", titleText: "总体评价" },
    { key: "historyRecord", 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");
      if (this.activeType == "0") {
        this.tabList = [
          { tabText: "检查详情", tabId: "1" },
          { tabText: "合同详情", tabId: "2" },
          { tabText: "借据详情", tabId: "3" },
          { tabText: "影像上传", tabId: "4" }
        ];
      } else {
        this.tabList = [
          { tabText: "检查详情", tabId: "1" },
          { tabText: "合同项目详情", tabId: "2" },
          { tabText: "合同方详情", tabId: "3" },
          { tabText: "影像上传", tabId: "4" }
        ];
      }
      this.userInfo = this.$store.getters.getCusInfo;
      this.selectHistoryContactInfo();
    });
  }

  /**
   * @description:  点击tab时切换
   * @author LiShenghui
   * @date 2022/2/14 15:12
   */
  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
    if (this.active == 0) {
      this.selectHistoryContactInfo();
    } 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.addLoanCheckInfo
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //新增成功后重新查询一次
        NativeUI.toast("保存成功！");
        // this.selectLoancheckDetail();
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

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

  //贷后详情查询
  selectLoancheckDetail() {
    let param = {
      SERIALNO: this.SERIALNO,
      tc: nettyApi.TRADE_CODE.selectGDLoanCheckDetail
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.entInfo = res.PRJ_BASCI_LIST;
        this.prtInfo = res.PRJ_INFO_LIST;
        this.contractInfo = res.CONTRACT_INFO_LIST[0];
        this.duebillInfo = res.DUEBILL_INFO_LIST[0];
        this.checkResult = res.INSPECTACTION; //检查结论
        this.introduction = res.OPINION; //说明
        this.guarantyInfo = res.GUARANTY_CONTRACT_LIST; //担保信息
      } 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",
    // });
  }

  //获取对应文件的sfileldName
  getSfield() {
    if (this.userInfo.INSPECTTYPE == "合作项目检查") {
      return "CheckResult";
    } else {
      return "INSPECTATION";
    }
  }
}
</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;
}
</style>
