<template>
  <tr>
    <td colspan="10" style="background: #bdd6ec; color: #db0039; text-align: left"
      >网贷状况统计*（涉及金额部分单位为：元）</td
    >
  </tr>
  <tr>
    <td colspan="10" style="text-align: left"
      >本人信用卡共{{ props.sum }}张，本页是第{{ props.index + 1 }}张</td
    >
  </tr>
  <tr>
    <td class="label" colspan="2">发卡银行</td>
    <td colspan="3">{{ props.data.bank }}</td>
    <td class="label" colspan="2">开户时间</td>
    <td colspan="3">{{ props.data.issuanceDate }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">卡号</td>
    <td colspan="3">{{ props.data.card }}</td>
    <td class="label" colspan="2">卡片状态(正常/逾期)</td>
    <td colspan="3">{{
      props.data.creditCardStatus
        ? LoanStatus?.find((v) => v.value === props.data.creditCardStatus)?.label
        : ''
    }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">授信额度</td>
    <td colspan="3">{{ props.data.quota }}</td>
    <td class="label" colspan="2">已用额度</td>
    <td colspan="3">{{ props.data.usedQuota }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">近6个月平均使用额度</td>
    <td colspan="3">{{ props.data.sixDevUsedQuota }}</td>
    <td class="label" colspan="2">当前欠款金额</td>
    <td colspan="3">{{ props.data.debt }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">逾期期数</td>
    <td colspan="3">{{ props.data.beOverduePeriod }}</td>
    <td class="label" colspan="2">逾期后是否有过协商</td>
    <td colspan="3">{{ props.data.hasNegotiate == 'Y' ? '是' : '否' }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">有无分期</td>
    <td colspan="3">{{ props.data.hasStages == 'Y' ? '是' : '否' }}</td>
    <td class="label" colspan="2">有无协商方案</td>
    <td colspan="3">{{ props.data.hasNegotiateCase == 'Y' ? '是' : '否' }}</td>
  </tr>
  <!-- <tr>
        <td class="label" colspan="2">协商方案</td>
        <td colspan="8">{{props.data.hasSue == 'Y' ? '是' : '否'}}</td>
    </tr> -->
  <tr>
    <td class="label" colspan="2">查询密码</td>
    <td colspan="3">{{ props.data.queryPassword }}</td>
    <td class="label" colspan="2">最后一次还款时间</td>
    <td colspan="3">{{ props.data.lastRepaymentDate }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">支付密码</td>
    <td colspan="3">{{ props.data.payPassword }}</td>
    <td class="label" colspan="2">最后一次还款金额</td>
    <td colspan="3">{{ props.data.lastRepaymentAmount }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">是否有大额专项分期额度</td>
    <td colspan="3">{{ props.data.hasBigQuotaStages == 'Y' ? '是' : '否' }}</td>
    <td class="label" colspan="2">大额专项分期借款种类</td>
    <td colspan="3">{{ props.data.bigQuotaType }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">大额专项分期额度</td>
    <td colspan="3">{{ props.data.bigQuotaStagesAmount }}</td>
    <td class="label" colspan="2">大额专项分期开立日期</td>
    <td colspan="3">{{ props.data.bigQuotaStagesDate }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">大额专项分期到期日期</td>
    <td colspan="3">{{ props.data.bigQuotaStagesExpireDate }}</td>
    <td class="label" colspan="2">大额专项分期已还期数</td>
    <td colspan="3">{{ props.data.bigQuotaRepayPeriod }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">银行预留手机号码</td>
    <td colspan="3">{{ props.data.phone }}</td>
    <td class="label" colspan="2">银行预留家庭地址</td>
    <td colspan="3">{{ props.data.address }}</td>
  </tr>
  <tr>
    <td class="label" colspan="2">银行预留紧急联系人姓名</td>
    <td colspan="3">{{ props.data.liaisonName }}</td>
    <td class="label" colspan="2">银行预留紧急联系人电话</td>
    <td colspan="3">{{ props.data.liaisonPhone }}</td>
  </tr>
</template>
<script setup lang="jsx" name="caseDetail">
  import { useDict } from '@/hooks/useDict';
  import { ref, computed, reactive, onBeforeMount } from 'vue';
  const { LoanStatus } = useDict('LoanStatus');

  const props = defineProps({
    data: Object,
    index: Number,
    sum: Number,
  });
</script>
<style lang="scss" scoped>
  table {
    width: calc(100%);
    border-collapse: collapse;
  }
  td {
    border: 1px solid #000;
    width: 150px;
    background: #fff;
    line-height: 11px;
    height: 40px;
    font-size: 14px;
    padding-left: 5px;
    color: #000;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-print-color-adjust: exact;
    text-align: center;
    &.label {
      -webkit-print-color-adjust: exact;
      background-color: #dfeaf5;
      font-weight: 400 !important;
    }
  }
</style>
