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