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