<template>
    <tr>
        <td colspan="10" style="background: #bdd6ec;color: #db0039;text-align:left;-webkit-print-color-adjust: exact;">信用卡网贷状况统计*（涉及金额部分单位为：元）</td>
    </tr>
    <tr  class="yellow">
        <td>信用卡数量</td>
        <td colspan="9">{{props.data.creditCard.length}}</td>
    </tr>
    <tr  class="yellow">
        <td>序号</td>
        <td>发卡银行</td>
        <td>授信额度</td>
        <td>已用额度</td>
        <td>合计欠款金额</td>
        <td>大额专项<br/>欠款金额</td>
        <td>逾期期数</td>
        <td>近6个月<br/>平均使用额度</td>
        <td>有无<br/>协商方案</td>
        <td>卡片状态<br/>逾期/正常</td>
    </tr>
    <tr v-for="(item, index) in props.data.creditCard" :key="index"  class="yellow">
        <td>第{{index + 1}}张</td>
        <td>{{item.bank}}</td>
        <td>{{item.quota}}</td>
        <td>{{item.usedQuota}}</td>
        <td>{{item.debt}}</td>
        <td>{{item.bigQuotaStagesAmount}}</td>
        <td>{{item.beOverduePeriod}}</td>
        <td>{{item.sixDevUsedQuota}}</td>
        <td>{{item.hasNegotiate == 'Y' ? '是' : '否'}}</td>
        <td>{{item.creditCardStatus
                  ? LoanStatus?.find((v) => v.value === item.creditCardStatus)?.label
                  : ''}}</td>
    </tr>
    <tr class="yellow">
        <td>信用卡欠款合计</td>
        <td colspan="9">{{cardSUM}}</td>
    </tr>
    <tr class="green">
        <td>信用贷、网贷机构数量</td>
        <td colspan="9">{{props.data.lending.length}}</td>
    </tr>
    <tr class="green">
        <td rowspan="2">序号</td>
        <td rowspan="2" colspan="2">贷款机构</td>
        <td rowspan="2" colspan="2">审批额度</td>
        <td rowspan="2">贷款笔数</td>
        <td rowspan="2">贷款期数</td>
        <td rowspan="2">已还期数</td>
        <td rowspan="2">未还金额</td>
        <td>状态</td>
    </tr>
    <tr class="green">
        <td>逾期/正常</td>
    </tr>
    <tr v-for="(item, index) in props.data.creditCard" :key="index" class="green">
        <td>第{{index + 1}}家</td>
        <td colspan="2">{{item.loanPlatform}}</td>
        <td colspan="2">{{item.quota}}</td>
        <td>{{item.lendingNum}}</td>
        <td>{{item.period}}</td>
        <td>{{item.repayPeriod}}</td>
        <td>{{item.debt}}</td>
        <td>{{item.loanStatus
                  ? LoanStatus?.find((v) => v.value === item.loanStatus)?.label
                  : ''}}</td>
    </tr>
    <tr  class="green">
        <td>信用贷、网贷欠款合计</td>
        <td colspan="9">{{creditSUM}}</td>
    </tr>
    <tr>
        <td class="label">合计欠款总额</td>
        <td colspan="9" class="label">{{cardSUM + creditSUM}}</td>
    </tr>
    <tr>
        <td class="label">服务费金额</td>
        <td colspan="2" class="label"></td>
        <td colspan="2" class="label">分期服务费金额</td>
        <td colspan="2"></td>
        <td class="label">收款人</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="10" style="text-align:left">以上所诉个人信息均为本人填写且确认真实准确               签字按手印：
        </td>
    </tr>
</template>
<script setup lang="jsx" name="caseDetail">
    import { useDict } from '@/hooks/useDict';
    import { ref, computed, reactive, onBeforeMount } from 'vue';
    const props = defineProps({
        data: Object
    })
    const { LoanStatus } = useDict("LoanStatus");
    const cardSUM = computed(() => props.data.creditCard.reduce((pre, cur) => pre + Number(cur.debt),0));
    const creditSUM = computed(() => props.data.lending.reduce((pre, cur) => pre + Number(cur.debt),0));
</script>
<style lang="scss" scoped>
table {
  width: calc(100%);
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  background: #fff;
  width: 150px;
  line-height: 11px;
  word-wrap:break-word;
  word-break:break-all;
  height: 40px;
  font-size: 14px;
  padding-left: 5px;
  color: #000;
  text-align: center;
  &.label {
    -webkit-print-color-adjust: exact;
    background-color: #dfeaf5;
    font-weight: 400 !important;
  }
}
tr {
  &.yellow {
    td {
    -webkit-print-color-adjust: exact;

      background: #fff3cc7d;
    }
  }
  &.green {
    td {
    -webkit-print-color-adjust: exact;

      background: #e1f1d985;
    }
  }
}
</style>