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