<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 && totalCases > 0 ?
            (stats.totalRiskItems / totalCases).toFixed(1) :
            '0.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-gray-500 mb-1">
          占比{{ totalCases > 0 && stats ?
            ((stats.highRiskItems /
              totalCases) * 100).toFixed(1) : '0.0' }}%
        </div>
        <div class="text-xs text-orange-600">
          <span class="mr-3">失信{{ stats.sxbzxrCount || 0 }}</span>
          <span style="color: #D6943E;">限高{{ stats.xgbzxrCount || 0 }}</span>
        </div>
      </div>

      <!-- 已结案件卡片 -->
      <div class="p-4 bg-[#2B79EE1A] border border-[#2B79EE4D] rounded-xl text-center">
        <div class="text-2xl font-bold text-[#2B79EE] mb-1">{{ stats.closedCases || 0 }}家</div>
        <div class="text-sm font-medium text-gray-800 mb-1">已结案件</div>
        <div class="text-xs text-gray-500">
          占比{{ totalCases > 0 && stats ?
            Math.round((stats.closedCases / totalCases) * 100) :
            0
          }}%
        </div>
      </div>

      <!-- 案件类型卡片 -->
      <div class="p-4 bg-[#2B79EE1A] border border-[#2B79EE4D] rounded-xl text-center">
        <div class="text-2xl font-bold text-[#2B79EE] mb-1">{{ stats.caseTypes.length || 0 }}家</div>
        <div class="text-sm font-medium text-gray-800 mb-1">案件类型</div>
        <div class="text-xs text-gray-500">
          涉及多种类型
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
      <!-- 案件类型分布 -->
      <LTitle title="案件类型分布" />
      <div class="h-[300px] px-4">
        <v-chart :option="caseTypeChartOption" autoresize />
      </div>

      <!-- 风险等级分布 -->
      <LTitle title="风险等级分布" />
      <div class="bg-[#F9ECEC] border border-[#F0CACA] rounded-xl mx-4 p-4">
        <div class="grid grid-cols-3 gap-4 text-center">
          <!-- 高风险案件 -->
          <div>
            <div class="text-sm text-gray-600 mb-1">高风险案件</div>
            <div class="text-xl font-bold text-[#EB3C3C]">{{ stats.highRiskItems || 0 }}条</div>
          </div>
          <!-- 中风险案件 -->
          <div>
            <div class="text-sm text-gray-600 mb-1">中风险案件</div>
            <div class="text-xl font-bold text-[#EB3C3C]">{{ stats.mediumRiskItems || 0 }}条</div>
          </div>
          <!-- 低风险案件 -->
          <div>
            <div class="text-sm text-gray-600 mb-1">低风险案件</div>
            <div class="text-xl font-bold text-[#D6943E]">{{ stats.lowRiskItems || 0 }}条</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import LTitle from '@/components/LTitle.vue'
import { lawsuitTypeMap, getCaseTypeText, getCaseTypeDarkColor } from '../utils/lawsuitUtils.js'

// 注册必须的组件
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent])

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

// 案件类型分布横向柱状图配置
const caseTypeChartOption = computed(() => {
  // 获取所有可能的案件类型，确保即使没有数据的类型也会显示
  const allCaseTypes = Object.keys(lawsuitTypeMap).map(key => ({
    type: key,
    name: lawsuitTypeMap[key].text,
    color: lawsuitTypeMap[key].color,
    darkColor: lawsuitTypeMap[key].darkColor,
    count: 0, // 默认为0
  }))

  // 如果有统计数据，更新数量
  if (props.stats && props.stats.caseTypes && props.stats.caseTypes.length > 0) {
    // 用实际数据更新默认值
    props.stats.caseTypes.forEach(item => {
      const existingType = allCaseTypes.find(type => type.type === item.type)
      if (existingType) {
        existingType.count = item.count
      }
    })
  } else {
    // 如果没有任何数据，显示暂无数据的信息
    return {
      title: {
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#aaa',
        },
      },
    }
  }

  // 准备横向柱状图数据 - 不过滤，显示所有类型
  const categories = allCaseTypes.map(item => item.name)
  const values = allCaseTypes.map(item => item.count)

  return {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        const dataIndex = params[0].dataIndex
        return `${categories[dataIndex]}: ${values[dataIndex]}件`
      },
    },
    grid: {
      left: '0%',
      right: '5%',
      bottom: '5%',
      top: '5%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: function (value) {
        // 如果最大值是0，设置一个最小值让柱子能显示
        return Math.max(value.max, 1)
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#f0f0f0',
        },
      },
      axisLabel: {
        fontSize: 10,
        color: '#666',
      },
      axisLine: {
        lineStyle: {
          color: '#ddd',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: categories,
      axisLabel: {
        fontSize: 10,
        color: '#666',
      },
      axisLine: {
        lineStyle: {
          color: '#ddd',
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '案件数量',
        type: 'bar',
        barWidth: '30%',
        data: values.map((value) => {
          return {
            value: value === 0 ? 0.1 : value, // 0值显示为0.1，让柱子能显示一个小尖尖
            itemStyle: {
              color: '#5d7eeb',
              borderRadius: [0, 4, 4, 0],
            },
          }
        }),
        label: {
          show: true,
          position: 'right',
          fontSize: 10,
          color: '#666',
          formatter: function (params) {
            // 如果是0.1（实际为0），显示为0
            return params.value === 0.1 ? '0' : params.value
          },
        },
      },
    ],
  }
})

// 获取风险概览样式
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>
