<template>
  <table style="table-layout: fixed; page-break-after: always">
    <tr>
      <td colspan="4" class="label">姓名</td>
      <td colspan="2" class="label">年龄</td>
      <td colspan="2" class="label">身份证号</td>
      <td colspan="2" class="label">婚姻状况</td>
      <td class="label">电话</td>
    </tr>
    <tr>
      <td colspan="4" class="text-center">{{ props.data?.customer?.name }}</td>
      <td colspan="2" class="text-center">{{ props.data?.customer?.age }}</td>
      <td colspan="2" class="text-center">{{ props.data?.customer?.idCard }}</td>
      <td colspan="2" class="text-center">{{
        props.data?.customer?.marriage
          ? Marriage?.find((v) => v.value === props.data?.customer?.marriage)?.label
          : ''
      }}</td>
      <td class="text-center">{{ props.data?.customer?.phone }}</td>
    </tr>
    <tr>
      <td class="header">序号</td>
      <td colspan="4" class="header">客户信息</td>
      <td colspan="3" class="header">判定标准</td>
      <td class="header">判定结果</td>
      <td class="header">风控复核</td>
      <td class="header">风控复核意见</td>
    </tr>
    <tr v-for="(item, index) in props.data?.reportItems" :key="index">
      <td class="label">{{ index + 1 }}</td>
      <td class="label" colspan="2">{{ item.riskType }}</td>
      <td colspan="2">
        <template v-if="item.jsonObject">
          <div v-for="(item1, name1, index1) in item.jsonObject" :key="index1">
            {{ name1 }}：
            {{ item1 }}
          </div>
        </template>
      </td>
      <td
        colspan="3"
        v-html="item.riskType ? RiskType?.find((v) => v.value === item.riskType)?.label : ''"
      >
      </td>
      <td>{{ item.sysJudge == 'Y' ? '通过' : '不通过' }}</td>
      <td>{{ item.review == 'Y' ? '通过' : '不通过' }}</td>
      <td>{{ item.remark }}</td>
    </tr>
    <tr class="yellow">
      <td class="text-center">10</td>
      <td colspan="10" class="text-center"
        >信用卡*<span class="text-red-500">（涉及金额部分单位为：元）</span></td
      >
    </tr>
    <tr class="yellow">
      <td class="text-center">信用卡数量</td>
      <td colspan="10"
        ><div class="flex items-center">
          {{ props.data?.customer?.creditCard.length }}
          张
        </div></td
      >
    </tr>
    <tr class="yellow">
      <td class="text-center">序号</td>
      <td class="text-center">发卡银行</td>
      <td class="text-center">当前欠款金额</td>
      <td class="text-center">逾期期数</td>
      <td colspan="2" class="text-center">近6个月平均使用额度</td>
      <td colspan="2" class="text-center">有无协商方案</td>
      <td class="text-center">风控审核</td>
      <td colspan="2" class="text-center">风控审核意见</td>
    </tr>
    <tr class="yellow" v-for="(item, index) in props.data?.customer?.creditCard" :key="index">
      <td class="text-center">{{ index + 1 }}</td>
      <td class="text-center">{{ item.bank }}</td>
      <td class="text-center">{{ item.debt }}</td>
      <td class="text-center">{{ item.beOverduePeriod }}</td>
      <td class="text-center" colspan="2">{{ item.sixDevUsedQuota }}</td>
      <td class="text-center" colspan="2">{{ item.hasNegotiate == 'Y' ? '是' : '否' }}</td>
      <td>{{ item.review == 'Y' ? '通过' : '不通过' }}</td>
      <td colspan="2">{{ item.remark }}</td>
    </tr>
    <tr class="yellow">
      <td>信用卡欠款合计</td>
      <td colspan="10">{{ cardSUM }}</td>
    </tr>
    <tr class="green">
      <td class="text-center">11</td>
      <td colspan="10" class="text-center"
        >网贷*<span class="text-red-500">（涉及金额部分单位为：元）</span></td
      >
    </tr>
    <tr class="green">
      <td class="text-center">信用贷、网贷机构数量</td>
      <td colspan="10"
        ><div class="flex items-center">{{ props.data?.customer?.lending.length }} 家</div></td
      >
    </tr>
    <tr class="green">
      <td class="text-center">序号</td>
      <td class="text-center">贷款机构</td>
      <td class="text-center">审批额度</td>
      <td class="text-center">贷款笔数</td>
      <td class="text-center">贷款期数</td>
      <td class="text-center">已还期数</td>
      <td class="text-center">未还金额</td>
      <td class="text-center">状态<br />逾期/正常</td>
      <td class="text-center">是否连续还款</td>
      <td class="text-center">风控审核</td>
      <td class="text-center">风控审核意见</td>
    </tr>
    <tr class="green" v-for="(item, index) in props.data?.customer?.lending" :key="index">
      <td class="text-center">{{ index + 1 }}</td>
      <td class="text-center">{{ item.loanPlatprops.data }}</td>
      <td class="text-center">{{ item.quota }}</td>
      <td class="text-center">{{ item.lendingNum }}</td>
      <td class="text-center">{{ item.period }}</td>
      <td class="text-center">{{ item.repayPeriod }}</td>
      <td class="text-center">{{ item.debt }}</td>
      <td class="text-center">{{
        item.loanStatus ? LoanStatus.value?.find((v) => v.value === item.loanStatus)?.label : ''
      }}</td>
      <td class="text-center">{{ item.hasContinuousRepay == 'Y' ? '是' : '否' }}</td>
      <td>{{ item.review == 'Y' ? '通过' : '不通过' }}</td>
      <td>{{ item.remark }}</td>
    </tr>
    <tr class="green">
      <td>信用贷、网贷欠款合计</td>
      <td colspan="10">{{ creditSUM }}</td>
    </tr>
    <tr>
      <td colspan="2" class="label">合计欠款总额</td>
      <td colspan="9">{{ cardSUM + creditSUM }}</td>
    </tr>
    <tr>
      <td colspan="2" class="label">风控终审意见</td>
      <td colspan="9">{{ props.data.riskControlRemark }}</td>
    </tr>
    <tr>
      <td colspan="2" class="label">法务终审意见</td>
      <td colspan="9">{{ props.data.legalAffairRemark }}</td>
    </tr>
    <tr>
      <td colspan="2" class="label">法务分配</td>
      <td colspan="4">{{ props.data?.riskControlUser?.username }}</td>
      <td colspan="2">客户信息录入人</td>
      <td colspan="3">{{ props.data?.customer?.inputUserName }}</td>
    </tr>
  </table>
</template>
<script setup lang="jsx" name="caseDetail">
  import { useDict } from '@/hooks/useDict';
  import { computed } from 'vue';
  const { LoanStatus, Marriage, RiskType } = useDict('LoanStatus', 'Marriage', 'RiskType');
  const props = defineProps({
    data: Object,
  });
  const cardSUM = computed(() =>
    props.data?.customer?.creditCard.reduce((pre, cur) => pre + Number(cur.debt), 0)
  );
  const creditSUM = computed(() =>
    props.data?.customer?.lending.reduce((pre, cur) => pre + Number(cur.debt), 0)
  );
</script>
<style lang="scss" scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  tr {
    width: 100%;
  }
  td {
    border: 1px solid rgb(5, 5, 5);
    background: #fff;
    color: #000000;
    width: 180px !important;
    line-height: 11px;
    height: 40px;
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-print-color-adjust: exact;
    &.label {
      text-align: center;
      background: #dfeaf5;
      -webkit-print-color-adjust: exact;
      color: #000;
    }
    &.header {
      background: #bdd6ec;
      -webkit-print-color-adjust: exact;
      text-align: center;
    }
  }
  tr {
    &.yellow {
      td {
        background: #fff3cc7d;
        -webkit-print-color-adjust: exact;
      }
    }
    &.green {
      td {
        background: #e1f1d985;
        -webkit-print-color-adjust: exact;
      }
    }
  }
  @media print {
    #reportStatic {
      table {
        border: 1px solid #000;
        width: 90%;
      }
    }

    @page {
      margin: 10px;
      size: auto;
      // padding: 0;
    }
  }
</style>
