<template>
  <div class="apply-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/sjqsfx.png" alt="申请行为详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">申请行为详情</span>
    </div>

    <div class="p-4">
      <!-- 核心指标 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <!-- 申请准入分 -->
        <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
          <div class="text-2xl font-bold text-[#2B79EE] mb-1">
            {{ getValue(data.A22160001, '0') }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">申请准入分</div>
          <div class="text-xs text-gray-500">1-1000分</div>
        </div>

        <!-- 申请准入置信度 -->
        <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
          <div class="text-2xl font-bold text-[#2B79EE] mb-1">
            {{ formatConfidence(data.A22160002) }}
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">申请准入置信度</div>
          <div class="text-xs text-gray-500">50-100</div>
        </div>
      </div>

      <!-- 申请命中情况 -->
      <LTitle title="申请命中情况" />
      <div class="grid grid-cols-2 gap-4 mb-6 mt-3">
        <div class="bg-gray-50 rounded-lg p-3">
          <div class="text-sm text-gray-600 mb-1">申请命中机构数</div>
          <div class="text-lg font-bold text-gray-800">{{ getValue(data.A22160003, '0') }} 家</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-3">
          <div class="text-sm text-gray-600 mb-1">申请命中消金类机构数</div>
          <div class="text-lg font-bold text-gray-800">{{ getValue(data.A22160004, '0') }} 家</div>
        </div>
        <div class="bg-gray-50 rounded-lg p-3">
          <div class="text-sm text-gray-600 mb-1">申请命中网络贷款类机构数</div>
          <div class="text-lg font-bold text-gray-800">{{ getValue(data.A22160005, '0') }} 家</div>
        </div>
      </div>

      <!-- 机构查询统计 -->
      <LTitle title="机构查询统计" />
      <div class="mt-3">
        <div class="bg-gray-50 rounded-lg p-4 mb-4">
          <div class="flex justify-between items-center mb-3">
            <span class="text-sm text-gray-600">机构总查询次数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.A22160006, '0') }} 次</span>
          </div>
          <div class="flex justify-between items-center mb-3">
            <span class="text-sm text-gray-600">最近一次查询时间</span>
            <span class="text-lg font-bold text-gray-800">{{ formatTime(data.A22160007) }}</span>
          </div>
        </div>

        <div class="grid grid-cols-3 gap-3">
          <div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160008, '0') }}</div>
            <div class="text-xs text-gray-600">近1个月查询笔数</div>
          </div>
          <div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160009, '0') }}</div>
            <div class="text-xs text-gray-600">近3个月查询笔数</div>
          </div>
          <div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160010, '0') }}</div>
            <div class="text-xs text-gray-600">近6个月查询笔数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <LRemark
      content="申请行为详情展示申请人在各金融机构的申请记录和查询行为，包括申请准入分、命中机构数、机构查询次数等指标。申请行为反映了申请人的借贷需求和信用活跃度。频繁的申请可能暗示资金需求紧张或信用状况不佳。建议关注申请命中机构数和查询次数，过多的申请可能影响信用评分。" />
  </div>
</template>

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

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

<style scoped></style>

