<script setup>
import CBad from '@/ui/CBad.vue'
import CBankLoanApplication from '@/ui/CBankLoanApplication.vue'
import CBankLoanBehavior from '@/ui/CBankLoanBehavior.vue'
import CLawsuit from '@/ui/CLawsuit.vue'
import CRelatedEnterprises from '@/ui/CRelatedEnterprises.vue'
import CSpecialList from '@/ui/CSpecialList.vue'
import CTabs from '@/ui/CTabs.vue'
import { queryResultByOrder } from '@/api/apis'
import CMarriage from '@/ui/CMarriage.vue'

const isDone = ref(false)
const entData = ref([])
const lawsuitData = ref({})
const badData = ref({})

const specialData = ref({})

const bankLoanApplicationData = ref({})
const marriageData = ref({})
const bankLoanBehavior = ref({})
onLoad((option) => {
  console.log('option', option)
  const { id } = option
  if (id) {
    queryResultByOrder(id).then((res) => {
      console.log('res', res)
      if (res.code === 200) {
        res.data.query_data.forEach((item) => {
          if (item.success) {
            switch (item.apiID) {
              case 'G09SC02':
                marriageData.value = item.data
                break
              case 'G27BJ05':
                bankLoanApplicationData.value = item.data
                break
              case 'G28BJ05':
                bankLoanBehavior.value = item.data
                break
              case 'G26BJ05':
                specialData.value = item.data
                break
              case 'G05HZ01':
                entData.value = item.data
                break
              case 'G34BJ03':
                badData.value = item.data
                break
              case 'G35SC01':
                lawsuitData.value = item.data
                break
              default:
                console.log(`未知的apiID: ${item.apiID}`)
            }
          }
        })
      }
    }).finally(() => {
      isDone.value = true
    })
  }
})

const tabs = ref([
  { label: '涉诉案件', value: 'lawsuit' },
  { label: '异常名单', value: 'special' },
  { label: '贷款申请记录', value: 'loan' },
  { label: '报告概述', value: 'overview' },
  { label: '基本信息', value: 'base' },
  { label: '婚姻状态', value: 'marriage' },
  { label: '网络贷款申请记录', value: 'netloan' },
])
const reportItems = ref([
  { label: '涉诉案件', value: 'lawsuit', status: '正常' },
  { label: '异常名单', value: 'special', status: '存在风险' },
  { label: '借贷记录', value: 'loan', status: '正常' },
  { label: '不良风险评估', value: 'overview', status: '存在风险' },
  { label: '关联企业信息', value: 'base', status: '正常' },
  { label: '婚姻状态', value: 'marriage', status: '正常' },
  { label: '接待申请记录', value: 'netloan', status: '存在风险' },
])
</script>

<template>
  <div class="min-h-full from-blue-100 to-white bg-gradient-to-b">
    <!-- <div class="w-full">
      <img class="w-full object-fill" src="https://picnew13.photophoto.cn/20190315/jianyueshishangfengtaobaonanxiehaibaobannermoban-32390729_1.jpg">
    </div> -->
    <CTabs
      :tabs="tabs"
      type="blue-green"
    />
    <template v-if="isDone">
      <div class="flex flex-col gap-y-4 p-4 pt-12">
        <div id="overview" class="title">
          报告概述
        </div>
        <div class="card">
          <div class="flex flex-col gap-y-4">
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">报告时间：</span>
              <span class="text-gray-600">2024年11月18日 23:11:23</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">报告编号：</span>
              <span class="text-gray-600">HUIS829981926</span>
            </div>
          </div>

          <div class="mt-6">
            <div class="flex flex-col gap-y-2">
              <div v-for="item in reportItems" :key="item.value" class="flex justify-between">
                <span class="text-gray-700 font-bold">{{ item.label }}：</span>
                <span class="font-bold" :class="item.status === '正常' ? 'text-green-500' : 'text-red-500 '">{{ item.status }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div id="base" class="title">
          基本信息
        </div>
        <div class="card">
          <div class="flex flex-col gap-y-4">
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">姓名：</span>
              <span class="text-gray-600">张三</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">年龄：</span>
              <span class="text-gray-600">25</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">性别：</span>
              <span class="text-gray-600">男</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-700 font-bold">身份证号码：</span>
              <span class="text-gray-600">123456789012345678</span>
            </div>
          </div>
        </div> -->
        <div id="special" class="title">
          异常名单
        </div>
        <CSpecialList :data="specialData" />
        <div id="netloan" class="title">
          借贷记录
        </div>
        <CBankLoanBehavior :data="bankLoanBehavior" />
        <div id="loan" class="title">
          借贷申请记录
        </div>
        <CBankLoanApplication :data="bankLoanApplicationData" />
        <div id="marriage" class="title">
          婚姻状态
        </div>
        <CMarriage :data="marriageData" />

        <div id="ent" class="title">
          关联企业
        </div>
        <CRelatedEnterprises :data="entData" />
        <div id="bad" class="title">
          不良风险评估
        </div>
        <CBad :data="badData" />
        <div id="lawsuit" class="title">
          涉诉案件
        </div>
        <CLawsuit :data="lawsuitData" />
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>

</style>

<route lang="json">
  {
    "layout": "page"
  }
</route>
