<template>
  <div class="current-report-section bg-white rounded-lg border border-gray-200">
    <div class="flex items-center p-4">
      <div class="w-8 h-8 flex items-center justify-center mr-2">
        <img src="@/assets/images/report/gl.png" alt="信用详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">信用详情</span>
    </div>

    <div class="p-4">
      <!-- 网络贷款类信用 -->
      <LTitle title="网络贷款类信用" />
      <div class="mt-3 mb-6">
        <div class="grid grid-cols-2 gap-4 mb-4">
          <!-- 网贷授信额度 -->
          <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">
              {{ formatCreditAmount(data.C22180001) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">网贷授信额度</div>
          </div>

          <!-- 网贷额度置信度 -->
          <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">
              {{ formatConfidence(data.C22180002) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">网贷额度置信度</div>
          </div>
        </div>

        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款类机构数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180003, '0') }} 家</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款类产品数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180004, '0') }} 个</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款机构最大授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180005) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款机构平均授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180006) }}</span>
          </div>
        </div>
      </div>

      <!-- 消金贷款类信用 -->
      <LTitle title="消金贷款类信用" />
      <div class="mt-3 mb-6">
        <div class="grid grid-cols-2 gap-4 mb-4">
          <!-- 消金建议授信额度 -->
          <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4 text-center">
            <div class="text-xl font-bold text-[#1FBE5D] mb-1">
              {{ formatCreditAmount(data.C22180011) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">消金建议授信额度</div>
          </div>

          <!-- 消金额度置信度 -->
          <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4 text-center">
            <div class="text-xl font-bold text-[#1FBE5D] mb-1">
              {{ formatConfidence(data.C22180012) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">消金额度置信度</div>
          </div>
        </div>

        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180007, '0') }} 家</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类产品数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180008, '0') }} 个</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构最大授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180009) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构平均授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180010) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <LRemark
      content="信用详情展示申请人在网络贷款和消金贷款领域的授信情况，包括授信额度、机构数、产品数等指标。授信额度反映了金融机构对申请人信用状况的评估，额度越高通常表示信用状况越好。建议关注授信额度置信度，置信度越高表示评估结果越可靠。同时需要结合申请人的实际借贷行为和还款记录进行综合评估。" />
  </div>
</template>

<script setup>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { formatCreditAmount, formatConfidence, getValue } from '../utils/formatUtils'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped></style>

