<template>
  <div class="card table-box" style="padding: 0 40px">
    <div class="flex justify-end mt-2">
      <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="route.query.id">通过</el-button>
      <el-button type="danger" @click="submit('reject')" v-if="route.query.id">拒绝</el-button>
    </div>
    <p class="text-lg text-center mb-5">审核报告</p>
    <table>
        <tr>
            <td colspan="4" class="label">收单单位</td>
            <td colspan="3"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="2" class="label">推荐人</td>
            <td colspan="2"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
        </tr>
        <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"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="2"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="2"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="2"><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></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>
            <td  class="label">1</td>
            <td class="label">贷款类型</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">是否为抵押类贷款，人保贷款，公积金贷款，经营贷，担保、联名担保、保证类贷款，保险类贷款（保单贷），对应名下有理财保险，分红保险，现金分期，装修贷，网贷/信用贷/信用卡与资产相关联的（如与房、车、营业执照（法人/个体）、商铺、公积金等），先息后本、按期结息自由还本
            </td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td  class="label">2</td>
            <td  class="label">结清总额</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">信用卡、网贷当前结清总额合计≥10万元</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td class="label">3</td>
            <td class="label">房产</td>
            <td>
              数量：<br />
              <el-input class="line-input" v-model="form.roleDesc" placeholder=""/>
              市值：<br />
              <el-input class="line-input" v-model="form.roleDesc" placeholder=""/>
            </td>
            <td colspan="3">夫妻名下允许有一套全款房产（房产现金价值小于处置总额5倍，且建议过户或做其他措施）</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td class="label">4</td>
            <td class="label">车辆</td>
            <td>
              数量：<br />
              <el-input class="line-input" v-model="form.roleDesc" placeholder=""/>
              市值：<br />
              <el-input class="line-input" v-model="form.roleDesc" placeholder=""/>
            </td>
            <td colspan="3">夫妻名下允许有一辆全款车（车辆现金价值小于处置总额50%）
            </td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td  class="label">5</td>
            <td  class="label">职业</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">
              1.客户是否为公检法系统人员、教师、医生、律师、企业法人人员<br />
              <el-input class="line-input" v-model="form.roleDesc" placeholder=""/>
              2.如客户为企事业单位的，需客户本人同意纪委联系与谈话、去单位或者给单位打电话催收（建议最好不接）<br />
              <div class="flex">
                <div>客户是否同意：</div>
                <el-input class="line-input flex-1" v-model="form.roleDesc" placeholder=""/>
              </div>
            </td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td  class="label">6</td>
            <td class="label">打卡收入</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">本人打卡收入小于3000（具体看处置总额或能否做其他措施）</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td class="label">7</td>
            <td class="label">打卡银行</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">打卡银行与借款银行是否为同一家：</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td class="label">8</td>
            <td class="label">营业执照</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">不能有营业执照</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr>
            <td class="label">9</td>
            <td class="label">子女工作政审</td>
            <td><el-input class="line-input" v-model="form.roleDesc" placeholder=""/></td>
            <td colspan="3">子女需要考取公检法、公职政审的不接</td>
            <td><el-input v-model="form.roleDesc" placeholder=""/></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td colspan="3"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></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">
              <el-input v-model="form.roleDesc" placeholder="" style="width: 200px"/>
                张
            </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">
            <td class="text-center">1</td>
            <td class="text-center">中行</td>
            <td class="text-center"></td>
            <td class="text-center"></td>
            <td class="text-center" colspan="2"></td>
            <td class="text-center" colspan="2"></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td class="text-center" colspan="2"><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr class="yellow">
            <td>信用卡欠款合计</td>
            <td colspan="10"><el-input v-model="form.roleDesc" placeholder="" style="width: 200px"/></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"><el-input v-model="form.roleDesc" placeholder="" style="width: 200px"/>
                        家</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">
            <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"></td>
            <td class="text-center"></td>
            <td><el-radio-group v-model="form.status">
                <el-radio value="enable">通过</el-radio>
                <el-radio value="disable">未通过</el-radio>
            </el-radio-group></td>
            <td><el-input v-model="form.roleDesc" placeholder="" type="textarea"/></td>
        </tr>
        <tr class="green">
            <td>信用贷、网贷欠款合计</td>
            <td colspan="10"><el-input v-model="form.roleDesc" placeholder="" style="width: 200px"/></td>
        </tr>
        <tr>
            <td colspan="2" class="label">合计欠款总额</td>
            <td colspan="9">5555</td>
        </tr>
        <tr>
            <td colspan="2" class="label">风控终审意见</td>
            <td colspan="9">风控人工填写</td>
        </tr>
        <tr>
            <td colspan="2" class="label">法务分配</td>
            <td colspan="4">由风控人工分配；如果能有机制自动分配最好；平均分配机制</td>
            <td colspan="2">客户信息录入人</td>
            <td colspan="3"></td>
        </tr>
    </table>
  </div>
</template>
<script setup name="Customer" lang="jsx">
  import { useTabsStore } from '@/stores/modules/tabs';
  import { ElButton, ElTag, ElMessage } from 'element-plus';
  import { useRoute } from 'vue-router';
  import { useRouter } from 'vue-router';
  import { getByIdcustomerReport } from '@/api/customer';
import { ref, reactive, onBeforeMount } from 'vue';
const form = ref({
    status: ''
});
const router = useRouter();
const tabStore = useTabsStore();
const route = useRoute();
const CreditRef = ref();
const CreditcardRef = ref();
const card = ref({
    number: 3
});
const credit = ref({
    number: 3
});
const cardData = ref([]);
const creditData = ref([]);
const pushCreditcard = (row, index) => {
    CreditcardRef.value.openModal(row, index
    );
};
const pushCredit = (row, index) => {
    CreditRef.value.openModal(row, index
    );
};
const changeCredit = (row) => {

}
const changeCreditcard = (row, index) => {
    console.log('sss', row, index)
}
const submit = (type) => {
    console.log('route', route)
    tabStore.removeTabs(route.fullPath).then(res => {
        router.push({
            path: 'infoGather/dangerReport'
        });
    });
}
const cancel = () => {
    tabStore.removeTabs(route.fullPath).then(res => {
        router.push({
            path: 'infoGather/dangerReport'
        });
    });
}
const query = async (type) => {
  getByIdcustomerReport(route.query.id).then(res => {
      if(res.success) {
        form.value = res.result
      }
    })
}
onBeforeMount(async () => {
    if (route.query.id) {
      query()
    }
})
const cardConfig = reactive({
    minHeight: 200,
    columns: [
      { type: 'seq', width: 60, title: '序号', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => pushCreditcard(row, rowIndex)}
                  className=" text-blue-400 cursor-pointer inline-block"
                >
                  {rowIndex}
                </div>
              </>
            );
          },
        }  
      },
      {
        field: 'name',
        width: 100,
        title: '发卡银行',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        width: 110,
        title: '授信额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        width: 110,
        title: '已用额度',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '合计欠款金额',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '大额专项欠款金额',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '逾期期数',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '近6个月平均使用额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        width: 110,
        title: '有无协商方案',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        title: '卡片状态(逾期/正常)',
        showOverflow: 'tooltip',
      }
    ],
    toolbarConfig: { enabled: false },
  });
  const creditConfig = reactive({
    minHeight: 200,
    columns: [
    { type: 'seq', width: 60, title: '序号', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => pushCredit(row, rowIndex)}
                  className=" text-blue-400 cursor-pointer inline-block"
                >
                  {rowIndex}
                </div>
              </>
            );
          },
        }  
      },
      {
        field: 'name',
        width: 100,
        title: '贷款机构',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        width: 110,
        title: '审批额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        width: 110,
        title: '贷款笔数',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '贷款期数',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '已还期数',
        showOverflow: 'tooltip',
      },{
        field: 'kinship',
        width: 110,
        title: '未还金额',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        title: '状态(逾期/正常)',
        showOverflow: 'tooltip',
      }
    ],
    toolbarConfig: { enabled: false },
  });
</script>
<style lang="scss" scoped>
table {
  width: calc(100%);
  border-collapse: collapse;
}
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>