<template>
  <div class="card table-box" style="padding: 0 40px">
    <div class="flex justify-end mt-2">
      <el-button type="warning" plain size="mini" v-print="printContent"
        >打印审核报告
      </el-button>
      <el-button type="warning" @click="cancel()" v-if="route.query.id">取消</el-button>
      <!-- <el-button type="primary" @click="submit()" v-if="route.query.id">保存</el-button> -->
      <el-button type="success" @click="submit('pass')" v-if="roleType !== 'view'">通过</el-button>
      <el-button type="danger" @click="submit('fail')" v-if="roleType !== 'view'">拒绝</el-button>
    </div>
    <p class="text-lg text-center mb-5">审核报告</p>
    <table>
        <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">{{form?.customer?.name}}</td>
            <td colspan="2" class="text-center">{{form?.customer?.age}}</td>
            <td colspan="2" class="text-center">{{form?.customer?.idCard}}</td>
            <td colspan="2" class="text-center">{{form?.customer?.marriage ? Marriage?.find((v) => v.value === form?.customer?.marriage)?.label
                  : ''}}</td>
            <td class="text-center">{{form?.customer?.phone}}</td>
        </tr>
        <tr>
            <td class="header">序号</td>
            <td colspan="2" class="header">客户信息</td>
            <td colspan="3" class="header">判定标准</td>
            <td class="header">判定结果</td>
            <td class="header">风控复核</td>
            <td class="header" colspan="3" >风控复核意见</td>
        </tr>
        <tr v-for="(item, index) in form?.reportItems" :key="index">
            <td  class="label">{{index + 1}}</td>
            <td class="label">{{item.riskType}}</td>
            <td>
              <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><el-radio-group v-model="item.review" :disabled="roleType !== 'risk'">
                <el-radio value="Y">通过</el-radio>
                <el-radio value="N">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="item.remark" placeholder="" type="textarea" :disabled="roleType !== 'risk'"/></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">
              {{form?.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 form?.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><el-radio-group v-model="item.review" :disabled="roleType !== 'risk'">
                <el-radio value="Y">通过</el-radio>
                <el-radio value="N">未通过</el-radio>
            </el-radio-group></td>
            <td class="text-center" colspan="2"><el-input v-model="item.remark" placeholder="" type="textarea" :disabled="roleType !== 'risk'"/></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">{{form?.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 form?.customer?.lending" :key="index">
            <td class="text-center">{{index + 1}}</td>
            <td class="text-center">{{item.loanPlatform}}</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><el-radio-group v-model="form.review" :disabled="roleType !== 'risk'">
                <el-radio value="Y">通过</el-radio>
                <el-radio value="N">未通过</el-radio>
            </el-radio-group></td>
            <td><el-input v-model="form.remark" placeholder="" type="textarea" :disabled="roleType !== 'risk'"/></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"><el-input v-model="form.riskControlRemark" placeholder="" type="textarea" :disabled="roleType !== 'risk'"/></td>
        </tr>
        <tr>
            <td colspan="2" class="label">法务终审意见</td>
            <td colspan="9"><el-input v-model="form.legalAffairRemark" placeholder="" type="textarea" :disabled="roleType !== 'legal'"/></td>
        </tr>
        <tr>
            <td colspan="2" class="label">法务分配</td>
            <td colspan="4">{{form?.riskControlUser?.username}}</td>
            <td colspan="2">客户信息录入人</td>
            <td colspan="3">{{form?.customer?.inputUserName}}</td>
        </tr>
    </table>
    <div style="overflow: hidden;width: 0;height: 0;">
      <div id="reportStatic" style="padding: 0;margin:0;">
        <h1 style="text-align: center;font-size: 20px">风控审核报告</h1>
        <reportPrint :data="form"></reportPrint>
      </div>
    </div>
  </div>
</template>
<script setup name="Customer" lang="jsx">
  import reportPrint from './reportPrint.vue';
  import { useTabsStore } from '@/stores/modules/tabs';
  import { ElButton, ElTag, ElMessage } from 'element-plus';
import { useDict } from '@/hooks/useDict';
  import { useRoute } from 'vue-router';
  import { useRouter } from 'vue-router';
  import { getByIdcustomerReport, savecustomerReport } from '@/api/customer';
import { ref, reactive, onBeforeMount, computed } from 'vue';
const { LoanStatus, Marriage, RiskType } = useDict("LoanStatus", "Marriage", "RiskType");
const form = ref({
    status: ''
});
const printContent = ref({
  id: 'reportStatic',
  // preview: true, // 预览工具是否启用
  // previewTitle: '储能服务费结算单', // 预览页面的标题
  popTitle: '',
  extraHead: ``,
  isRetainOriginData: true, // 是否保留原始数据
  preview: false, // 是否开启预览
  beforeOpenCallback: () => {
    console.log('开始打印之前的callback')
  }
})
const router = useRouter();
const tabStore = useTabsStore();
const route = useRoute();
const CreditRef = ref();
const CreditcardRef = ref();
const cardSUM = computed(() => form.value?.customer?.creditCard.reduce((pre, cur) => pre + Number(cur.debt),0));
const creditSUM = computed(() => form.value?.customer?.lending.reduce((pre, cur) => pre + Number(cur.debt),0));
const roleType = computed(() => {
  if (route.fullPath.includes('dangerReport/dangerReportDetail')) {
      return 'view'
  } else if (route.fullPath.includes('business-approval/riskReportDetail')) {
      return 'risk'
  }else if (route.fullPath.includes('business-approval/legalReportDetail')) {
      return 'legal'
  }
});
const cancel = () => {
    if (roleType.value === 'view') {
      tabStore.removeTabs(route.fullPath).then(res => {
        router.push({
            path: '/infoGather/dangerReport'
        });
      });
    } else if (roleType.value === 'risk') {
      tabStore.removeTabs(route.fullPath).then(res => {
        router.push({
            path: '/business-approval/riskManager'
        });
      });
    } else if (roleType.value === 'legal') {
      tabStore.removeTabs(route.fullPath).then(res => {
        router.push({
            path: '/business-approval/legalManager'
        });
      });
    }
}
const submit = (type) => {
    const param = JSON.parse(JSON.stringify({...form.value}))
    if (roleType.value === 'risk') {
      param['riskControlStatus'] = type
    } else {
      param['legalAffairStatus'] = type
    }
    savecustomerReport(roleType.value === 'risk' ? 'risk_control' : 'legalAffair', param).then(res => {
      if(res.success) {
        cancel()
      }
    })
}

const query = async (type) => {
  getByIdcustomerReport(route.query.id).then(res => {
      if(res.success) {
        form.value = res.result
      }
    })
}
onBeforeMount(async () => {
    if (route.query.id) {
      query()
    }
})
</script>
<style lang="scss" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  border:1px solid rgba(5, 5, 5, 0.06);
}
td {
  border: 1px solid rgba(5, 5, 5, 0.06);
  background: #fff;
  color: #606268;
  width: 240px;
  line-height: 11px;
  height: 40px;
  font-size: 14px;
  padding-left: 5px;
  &.label {
    text-align: center;
    background: #dfeaf5;
    color: #000;
  }
  &.header {
    background: #bdd6ec;
    text-align: center;
  }
}
tr {
  &.yellow {
    td {
      background: #fff3cc7d;
    }
  }
  &.green {
    td {
      background: #e1f1d985;
    }
  }
}
.creditcard {
  :deep(.card) {
    // background: #fff3cc;
  }
}
.credit {
  :deep(.card) {
    // background: #e1f1d9;
  }
}
</style>
