<template>
  <div class="d-page d-flex flex-column">
    <title-bar title="股权出质及动产质押" @clickLef="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="deal-with-bottom">
      <tab-nav :tabList="tabList" @tabClick="tabClick" />
    </div>
    <div class="h-scroller">
      <div v-show="active == 0">
      <!-- 股权 -->
        <anchor-nav ref="stockRigNavList" :navList="stockRigNavList">
          <!-- 股权出质-历史信息 -->
          <template slot="stockRightHisInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <!--股权出质-历史信息-->
                <div v-if="stockRightHisInfoList.length >0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td>质权出质设立登记日期</td>
                      <td>出质人姓名</td>
                      <td>出质人股权数额</td>
                      <td>质权人姓名</td>
                      <td>状态</td>
                    </tr>
                    <tr v-for="(item, index) in stockRightHisInfoList" :key="index">
                      <td style="width:5%">{{ index +1 }}</td>
                      <td>{{ item.STK_PAWN_REG_DATE }}</td>
                      <td>{{ item.STK_PAWN_CZ_CER_NO }}</td>
                      <td>{{ item.STK_PAWN_CZ_AMT }}</td>
                      <td>{{ item.STK_PAWN_ZA_PER }}</td>
                      <td>{{ item.STK_PAWN_STATUS }}</td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td>登记编号</td>
                      <td>登记日期</td>
                      <td>登记机关</td>
                      <td>被担保债权数额</td>
                      <td>状态</td>
                    </tr>
                    <tr>
                      <td colspan="6">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
          <!-- 股权出质-变更信息 -->
          <template slot="stockRightChangeInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <div v-if="stockRightChangeInfoList.length>0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td style="width:20%">质权出质设立登记日期</td>
                      <td style="width:15%">出质人姓名</td>
                      <td style="width:45%">变更内容</td>
                      <td style="width:15%">变更日期</td>
                    </tr>
                    <tr v-for="(item, index) in stockRightChangeInfoList" :key="index">
                      <td style="width:5%">{{ index +1 }}</td>
                      <td style="width:20%">{{ item.STK_PAWN_REG_DATE }}</td>
                      <td style="width:15%">{{ item.STK_PAWN_CZ_PER }}</td>
                      <td style="width:45%">{{ item.URL }}</td>
                      <td style="width:15%">{{ item.STK_PAWN_BGRQ }}</td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td style="width:20%">质权出质设立登记日期</td>
                      <td style="width:15%">出质人姓名</td>
                      <td style="width:45%">变更内容</td>
                      <td style="width:15%">变更日期</td>
                    </tr>
                    <tr>
                      <td colspan="5">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
          <!--股权冻结历史-->
          <template slot="stockRightFreezeHisInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <div v-if="stockRightFreezeHisInfoList.length > 0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 15%">冻结起始日期</td>
                      <td style="width: 15%">冻结截止日期</td>
                      <td style="width: 40%">冻结文号</td>
                      <td style="width: 10%">冻结机关</td>
                      <td style="width: 15%">冻结金额(万元)</td>
                    </tr>
                    <tr v-for="(item, index) in stockRightFreezeHisInfoList":key="index">
                      <td style="width: 5%">{{ index +1 }}</td>
                      <td style="width: 15%">{{ item.FRO_FROM }}</td>
                      <td style="width: 15%">{{ item.FRO_TO }}</td>
                      <td style="width: 40%">{{ item.FRO_DOC_NO }}</td>
                      <td style="width: 10%">{{ item.FRO_AUTH }}</td>
                      <td style="width: 15%">{{ item.FRO_AM }}</td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 15%">冻结起始日期</td>
                      <td style="width: 15%">冻结截止日期</td>
                      <td style="width: 40%">冻结文号</td>
                      <td style="width: 10%">冻结机关</td>
                      <td style="width: 15%">冻结金额(万元)</td>
                    </tr>
                    <tr>
                      <td colspan="6">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
        </anchor-nav>
      </div>
      <!-- 动产 -->
      <div v-show="active == 1">
        <anchor-nav ref="moveResNavList" :navList="moveResNavList">
          <!-- 动产抵押信息基本信息 -->
          <template slot="moveResBaseInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <!--动产抵押-基本信息-->
                <div v-if="moveResBaseInfoList.length >0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 20%">登记编号</td>
                      <td style="width: 15%">登记日期</td>
                      <td style="width: 20%">登记机关</td>
                      <td style="width: 20%">被担保债权数额</td>
                      <td style="width: 20%">状态</td>
                    </tr>
                    <tr v-for="(item, index) in moveResBaseInfoList" :key="index">
                      <td style="width: 5%">{{ index +1 }}</td>
                      <td style="width: 20%">{{ item.MAB_REG_NO }}</td>
                      <td style="width: 15%">{{ item.MAB_REG_DATE }}</td>
                      <td style="width: 20%">{{ item.MAB_REG_ORG }}</td>
                      <td style="width: 20%">{{ item.MAB_GUAR_AMT }}</td>
                      <td style="width: 20%">{{ item.MAB_STATUS }}</td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 20%">登记编号</td>
                      <td style="width: 15%">登记日期</td>
                      <td style="width: 20%">登记机关</td>
                      <td style="width: 20%">被担保债权数额</td>
                      <td style="width: 20%">状态</td>
                    </tr>
                    <tr>
                      <td colspan="6">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
          <!-- 动产抵押信息登记信息 -->
          <template slot="moveResMortgageInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <div v-if="moveResMortgageInfoList.length>0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td style="width:25%">登记编号</td>
                      <td style="width:30%">担保范围</td>
                      <td style="width:20%">履行债务开始日期</td>
                      <td style="width:20%">履行债务结束日期</td>
                    </tr>
                    <tr v-for="(item, index) in moveResMortgageInfoList" :key="index">
                      <td style="width:5%">{{ index +1 }}</td>
                      <td style="width:25%">{{ item.MAB_REGNO }}</td>
                      <td style="width:30%">{{ item.MAB_GUAR_RANGE }}</td>
                      <td style="width:20%">{{ item.DEBT_SDATE }}</td>
                      <td style="width:20%">{{ item.DEBT_EDATE }}</td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width:5%">序号</td>
                      <td style="width:25%">登记编号</td>
                      <td style="width:30%">担保范围</td>
                      <td style="width:20%">履行债务开始日期</td>
                      <td style="width:20%">履行债务结束日期</td>
                    </tr>
                    <tr>
                      <td colspan="5">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
          <!--动产抵押信息抵押权人信息-->
          <template slot="moveResRegistrationInfoList">
            <div class="content">
              <div class="customer-management-information-content">
                <div v-if="moveResRegistrationInfoList.length > 0">
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 15%">登记编号</td>
                      <td style="width: 25%">抵押权人名称</td>
                      <td style="width: 15%">抵押权人证照证件类型</td>
                      <td style="width: 20%">抵押权人证照证件号码</td>
                      <td style="width: 20%">所在地</td>
                    </tr>
                    <tr v-for="(item, index) in moveResRegistrationInfoList" :key="index">
                      <td style="width: 5%"> {{ index +1 }} </td>
                      <td style="width: 15%"> {{ item.MAB_REGNO }} </td>
                      <td style="width: 25%"> {{ item.MAB_PAWN_NAME }} </td>
                      <td style="width: 15%"> {{ item.MAB_PER_TYPE }} </td>
                      <td style="width: 20%"> {{ item. MAB_PER_CERNO}} </td>
                      <td style="width: 20%"> {{ item. MAB_PER_DOM}} </td>
                    </tr>
                  </table>
                </div>
                <div v-else>
                  <table class="customer-management-information-form">
                    <tr>
                      <td style="width: 5%">序号</td>
                      <td style="width: 15%">登记编号</td>
                      <td style="width: 25%">抵押权人名称</td>
                      <td style="width: 15%">抵押权人证照证件类型</td>
                      <td style="width: 20%">抵押权人证照证件号码</td>
                      <td style="width: 20%">所在地</td>
                    </tr>
                    <tr>
                      <td colspan="6">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </template>
        </anchor-nav>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import BasicInformation from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/BasicInformation.vue";
import ChangeInformation from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/ChangeInformation.vue";
import FreezeHistory from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/FreezeHistory.vue";
import HistoryInformation from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/HistoryInformation.vue";
import MortgageInformation from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/MortgageInformation.vue";
import RegistrationInformation from "@/components/customer-information/business-information/equity-pledge-and-movable-property-pledge/RegistrationInformation.vue";
import { TabData } from "@/model/entity/TabData";
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";
import { getText } from "@/stores";
/**
 * @Description 股权出质及动产质押
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:12
 */
@Component({
  name: "EquityPledgeAndMovablePropertyPledge",
  components: { TitleBar, BasicInformation, ChangeInformation, FreezeHistory, HistoryInformation, MortgageInformation, RegistrationInformation },
})
export default class EquityPledgeAndMovablePropertyPledge extends Vue {
  pageTitle = ""; // 页面标题
  active = 0; //当前点击的tab
  //股权出质-历史信息
  stockRightHisInfoList: any[] = [];
  //股权出质-变更信息
  stockRightChangeInfoList: any[] = [];
  //股权冻结历史
  stockRightFreezeHisInfoList: any[] = [];
  // 股权列表
  stockRigNavList = [
    { key: "stockRightHisInfoList", titleText: "历史信息" },
    { key: "stockRightChangeInfoList", titleText: "变更信息" },
    { key: "stockRightFreezeHisInfoList", titleText: "股权冻结历史" }
  ];
  //动产抵押信息基本信息
  moveResBaseInfoList = [];
  //动产抵押信息登记信息
  moveResRegistrationInfoList = [];
  //动产抵押信息抵押权人信息
  moveResMortgageInfoList = [];
  //动产列表
  moveResNavList = [
    { key: "moveResBaseInfoList", titleText: "息基本信息" },
    { key: "moveResRegistrationInfoList", titleText: "登记信息" },
    { key: "moveResMortgageInfoList", titleText: "抵押权人信息" }
 ];
  tabList = [
    { tabText: "股权出质", tabId: "1" },
    { tabText: "动产抵押", tabId: "2" }
  ]; //页签
  onClick() {

  }
  mounted() {
    this.selectStockMoveResinfo();
  }
  /**
   * @description:  查询业务信息
   * @author zmk
   * @date 2022/2/14 15:12
   */
  selectStockMoveResinfo() {
    let param = {
      CUST_FULL_NAME: this.$store.getters.getCusInfo.cus_name, //'客户2164572',//'农莽大地农业有限公司',/*this.$store.getters.getCusInfo.cus_name,*/
      CERT_ARRAY_INFO: [
        {
          CERT_TYPE: Public.getGScode(this.$store.getters.getCusInfo.cert_type), //'202',//this.$store.getters.getCusInfo.cert_type,
          CERT_NO: this.$store.getters.getCusInfo.cert_code //'78812578-0'//'915106830921121805'//this.$store.getters.getCusInfo.CERT_NO
        }
      ],
      GS_QUERY_OPTION_ARRAY: [{
        GS_QUERY_OPTION_LIST: '17'
       },
        {
          GS_QUERY_OPTION_LIST: '18'
        },
        {
          GS_QUERY_OPTION_LIST: '19'
        }],
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectGSXXCX),
      ClientNo: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectGSXXCX
    };
    NativeUI.showWaiting('正在查询....');
    IF.transferDataInter(nettyApi.commonRq, param).then((res:any) => {
      NativeUI.closeWaiting();
      if (res.rc === '1') {
        this.stockRightHisInfoList = res.STOCK_PLEDGED_INFO;
        this.stockRightChangeInfoList = res.STOCK_PAWN_ALT_INFO;
        if (res.SHARE_SFROST_INFO && res.SHARE_SFROST_INFO.length != 0) {
          for (let i = 0; i < res.SHARE_SFROST_INFO.length; i++) {
            res.SHARE_SFROST_INFO[i].FRO_AM = Number(res.SHARE_SFROST_INFO[i].FRO_AM).toFixed(2);
          }
          this.stockRightFreezeHisInfoList = res.SHARE_SFROST_INFO;
        }
        this.moveResBaseInfoList = res.MORTGAGE_BASIC_INFO;
        this.moveResRegistrationInfoList = res.MORTGAGE_REG_INFO;
        this.moveResMortgageInfoList = res.MORTGAGE_PER_INFO;
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
  /**
   * @description:  点击tab时切换
   * @author LiShenghui
   * @date 2022/2/14 15:12
   */
  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
  }
}
</script>

<style scoped>
::v-deep .van-index-bar__sidebar {
  top: 180px !important;
  right: 5px !important;
  transform: unset;
}
.deal-with-bottom {
  width: 100%;
  margin: 10px auto;
  position: relative;
  z-index: 2000;
}
</style>