<template>
  <div class="">
    <!-- 概览标题 -->
    <div class="p-4">
      <!-- 风险概览总结 -->
      <div class="p-4 rounded-lg" :class="getRiskOverviewClass()">
        <div class="flex items-center">
          <div class="w-12 h-12 mr-3 flex-shrink-0">
            <img :src="getRiskIcon()" alt="风险" class="w-12 h-12 object-contain" />
          </div>
          <div class="text-gray-700">
            {{ totalCases }}
            起涉诉案件中，
            <span v-if="stats.highRiskItems > 0" class="text-orange-600 font-medium">
              {{ stats.highRiskItems }}
            </span>
            <span v-else class="text-green-600 font-medium">0</span>
            起高风险案件
            <span v-if="stats.caseTypes.length > 0" class="ml-1">
              ，涉及 {{ stats.caseTypes.length }} 种案件类型
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要风险指标 -->
    <div class="grid grid-cols-2 gap-3 p-4">
      <!-- 风险事项卡片 -->
      <div class="p-4 bg-[#EB3C3C1A] border border-[#EB3C3C4D] rounded-xl text-center">
        <div class="text-2xl font-bold text-[#EB3C3C] mb-1">{{ stats.totalRiskItems || 0 }}项</div>
        <div class="text-sm font-medium text-gray-800 mb-1">风险事项</div>
        <div class="text-xs text-gray-500">
          命中{{ stats.totalRiskItems || 0 }}个规则
        </div>
      </div>

      <!-- 高风险案件卡片 -->
      <div class="p-4 bg-[#EB3C3C1A] border border-[#EB3C3C4D] rounded-xl text-center">
        <div class="text-2xl font-bold text-[#EB3C3C] mb-1">{{ stats.highRiskItems || 0 }}件</div>
        <div class="text-sm font-medium text-gray-800 mb-1">高风险案件</div>
        <div class="text-xs text-orange-600">
          <span class="mr-3">失信{{ stats.sxbzxrCount || 0 }}</span>
          <span>限高{{ stats.xgbzxrCount || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'

const props = defineProps({
  stats: {
    type: Object,
    required: true,
  },
  totalCases: {
    type: Number,
    required: true,
  },
})

// 获取风险概览样式
const getRiskOverviewClass = () => {
  // 有高风险案件 - 红色警告
  if (props.stats.highRiskItems > 0) {
    return 'bg-[#F9ECEC] border border-[#F0CACA]'
  }
  // 有案件但无高风险 - 黄色警示
  if (props.totalCases > 0) {
    return 'bg-[#FFF8E1] border border-[#FFE082]'
  }
  // 无案件 - 绿色正常
  return 'bg-[#ECF9EF] border border-[#CAECD3]'
}

// 获取风险图标
const getRiskIcon = () => {
  // 有高风险案件 - 高风险图标
  if (props.stats.highRiskItems > 0) {
    return new URL('../../../assets/images/report/gfx.png', import.meta.url).href
  }
  // 有案件但无高风险 - 中风险图标
  if (props.totalCases > 0) {
    return new URL('../../../assets/images/report/zfx.png', import.meta.url).href
  }
  // 无案件 - 正常图标
  return new URL('../../../assets/images/report/zq.png', import.meta.url).href
}
</script>
