<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>