<template>
  <div class="card">
    <div class="rounded-lg border border-gray-200 pb-4 mb-4">
      <div class="flex items-center mb-4 p-4">
        <div class="w-8 h-8 flex items-center justify-center mr-2">
          <img src="@/assets/images/report/glzdryhy2.png" alt="公安重点人员核验" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">公安重点人员核验</span>
      </div>

      <div class="mt-4">
        <!-- 核验结果概览 -->
        <div class="mb-4">
          <div class="mb-3">
            <LTitle title="核验概览" />
          </div>
          <div class="px-4">
            <div class="grid grid-cols-2 gap-4">
              <div class="rounded-lg border p-2 text-center" :class="getOverviewCardStyle()">
                <div class="text-xl font-bold mb-1" :class="getOverviewTextStyle()">
                  {{ riskCount }}
                </div>
                <div class="text-sm font-medium text-gray-700">风险项数量</div>
              </div>
              <div class="rounded-lg border p-2 text-center" :class="getOverviewCardStyle()">
                <div class="text-xl font-bold mb-1" :class="getOverviewTextStyle()">
                  {{ riskCount > 0 ? '有风险' : '安全' }}
                </div>
                <div class="text-sm font-medium text-gray-700">综合评估</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 详细核验项目 -->
        <div class="space-y-3 p-4">
          <div v-for="(item, key) in securityItems" :key="key"
            class="relative rounded-lg border p-3 transition-all duration-300" :class="getSecurityItemCardStyle(item)">
            <!-- 右上角风险标签 -->
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-lg rounded-tr-lg" :class="getSecurityTagClass(item)">
                {{ item.hasRisk ? '危险' : '安全' }}
              </div>
            </div>

            <div class="flex items-center">
              <div class="w-8 h-8 flex items-center justify-center mr-3">
                <img :src="getSecurityItemIcon(item)" :alt="item.name" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="flex items-center mb-1">
                  <div class="font-bold text-gray-800">{{ item.name }}</div>
                  <!-- 风险等级标签 -->
                  <div class="ml-2">
                    <div class="px-2 py-1 text-xs font-medium   rounded-md"
                      :class="item.severity === 'high' ? 'text-[#EB3C3C] bg-[#EB3C3C1A] ' : 'text-[#D6943E] bg-[#D6943E1A]'">
                      {{ item.severity === 'high' ? '高级' : '中级' }}
                    </div>
                  </div>
                </div>
                <div class="text-sm text-[#999999]">{{ item.description }}</div>
              </div>
            </div>

            <!-- 风险等级可视化（仅命中时显示） -->
            <div v-if="item.hasRisk" class="mt-3">
              <div class="w-full bg-gray-200 rounded-full h-1.5">
                <div class="h-1.5 rounded-full transition-all duration-700" :class="getRiskLevelBarStyle(item.severity)"
                  :style="{ width: getRiskLevelWidth(item.severity) }"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 高风险警告 -->
        <div v-if="hasHighRiskItems" class="px-4">
          <div class="flex items-center mb-3">
            <div class="w-4 h-4 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/wxts_icon.png" alt="风险提示" class="w-4 h-4 object-contain" />
            </div>
            <div class="font-bold text-[#EB3C3C]">高风险警告</div>
          </div>
          <div class="ml-6 text-sm mb-1 text-[#EB3C3C]">
            检测到公安重点人员风险，建议立即停止业务往来并进行详细核实。
          </div>
          <div class="ml-6 text-sm text-[#EB3C3C]">
            命中项目：{{ highRiskItemNames.join('、') }}
          </div>
        </div>

        <!-- 安全提示 -->
        <div v-if="!riskCount" class="px-4 mt-4">
          <div class="flex items-center mb-3">
            <div class="w-4 h-4 flex items-center justify-center mr-2">
              <img src="@/assets/images/report/wxts_icon.png" alt="安全提示" class="w-4 h-4 object-contain" />
            </div>
            <div class="font-bold text-gray-800">公安核验通过</div>
          </div>
          <div class="ml-6 text-sm text-gray-600">
            未命中公安重点人员名单，各项安全指标正常。
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="安全信息展示申请人的网络安全和信息安全相关风险，包括设备信息、网络环境、行为模式等。数据通过设备指纹、IP地址、操作系统等技术手段收集。安全信息可以帮助识别设备伪造、代理申请、批量注册等异常行为。建议关注设备一致性、网络环境稳定性和行为模式的合理性，对异常情况进行重点排查。" />
</template>

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

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  apiId: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
  notifyRiskStatus: {
    type: Function,
    default: () => { },
  },
})

// 从data中解构出需要的字段
const securityInfo = computed(() => {
  return props.data?.securityInfo || {}
})

// 公安重点人员项目配置
const securityConfig = {
  front: {
    name: '前科',
    description: '表明用户在刑或有前科',
    severity: 'high',
    icon: '👤',
    color: 'red'
  },
  drug: {
    name: '涉毒',
    description: '表明用户制、贩、藏、运、涉毒品风险较高',
    severity: 'high',
    icon: '💊',
    color: 'red'
  },
  takeDrug: {
    name: '吸毒',
    description: '表明用户吸食毒品风险较高',
    severity: 'high',
    icon: '🚬',
    color: 'red'
  },
  escape: {
    name: '在逃',
    description: '表明用户有在逃、在逃撤销历史风险',
    severity: 'high',
    icon: '🏃',
    color: 'red'
  },
  icase: {
    name: '涉案',
    description: '表明用户涉黑、涉疆藏，在逃，涉刑案等风险较高',
    severity: 'high',
    icon: '⚫',
    color: 'red'
  },
  ikey: {
    name: '重点人员名单',
    description: '表明用户为公安机关重点人员名单风险',
    severity: 'high',
    icon: '🎯',
    color: 'red'
  },
  itrancase: {
    name: '涉交通案件',
    description: '表明用户涉交通案件',
    severity: 'medium',
    icon: '🚗',
    color: 'orange'
  }
}

// 处理公安核验项目数据
const securityItems = computed(() => {
  const items = {}

  Object.keys(securityConfig).forEach(key => {
    const value = securityInfo.value?.[key] || 0
    const hasRisk = value > 0

    items[key] = {
      ...securityConfig[key],
      hasRisk,
      value
    }
  })

  return items
})

// 计算风险项数量
const riskCount = computed(() => {
  return Object.values(securityItems.value).filter(item => item.hasRisk).length
})

// 是否有高风险项目
const hasHighRiskItems = computed(() => {
  return Object.values(securityItems.value).some(item =>
    item.hasRisk && item.severity === 'high'
  )
})

// 是否有中风险项目
const hasMediumRiskItems = computed(() => {
  return Object.values(securityItems.value).some(item =>
    item.hasRisk && item.severity === 'medium'
  )
})

// 获取标题图标
const getTitleIcon = () => {
  if (hasHighRiskItems.value || hasMediumRiskItems.value) {
    return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  }
  return new URL('@/assets/images/report/qsgg.png', import.meta.url).href
}

// 高风险项目名称
const highRiskItemNames = computed(() => {
  return Object.values(securityItems.value)
    .filter(item => item.hasRisk && item.severity === 'high')
    .map(item => item.name)
})

// 获取概览卡片样式 - 根据风险情况动态变化
const getOverviewCardStyle = () => {
  if (riskCount.value === 0) {
    return 'border-[#4CAF508F] bg-[#4CAF501A]' // 无风险：绿色
  } else if (hasHighRiskItems.value) {
    return 'border-[#EB3C3C8F] bg-[#EB3C3C1A]' // 高风险：红色
  } else {
    return 'border-[#D6943E8F] bg-[#D6943E1A]' // 中风险：橙色
  }
}

// 获取概览文字样式 - 根据风险情况动态变化
const getOverviewTextStyle = () => {
  if (riskCount.value === 0) {
    return 'text-[#4CAF50]' // 无风险：绿色
  } else if (hasHighRiskItems.value) {
    return 'text-[#EB3C3C]' // 高风险：红色
  } else {
    return 'text-[#D6943E]' // 中风险：橙色
  }
}

// 获取公安项目卡片整体样式
const getSecurityItemCardStyle = (item) => {
  if (item.hasRisk) {
    if (item.severity === 'high') {
      return 'bg-[#F9ECEC] border-[#F0CACA]'
    } else {
      return 'bg-[#F9F5ED] border-[#FFB74D8F]'
    }
  }
  return 'bg-[#ECF9EF] border-[#CAECD3]'
}

// 获取公安项目图标
const getSecurityItemIcon = (item) => {
  if (item.hasRisk) {
    if (item.severity === 'high') {
      return new URL('@/assets/images/report/gfx.png', import.meta.url).href
    } else {
      return new URL('@/assets/images/report/zfx.png', import.meta.url).href
    }
  }
  return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

// 获取公安风险标签样式
const getSecurityTagClass = (item) => {
  if (item.hasRisk) {
    return 'bg-[#E53935]' // 危险统一使用红色
  }
  return 'bg-[#4CAF50]' // 安全使用绿色
}

// 获取严重程度标签样式
const getSeverityBadgeStyle = (severity) => {
  const styleMap = {
    'high': 'bg-red-100 text-red-800 border border-red-200',
    'medium': 'bg-orange-100 text-orange-800 border border-orange-200',
    'low': 'bg-yellow-100 text-yellow-800 border border-yellow-200'
  }
  return styleMap[severity] || 'bg-gray-100 text-gray-800'
}

// 获取严重程度文本
const getSeverityText = (severity) => {
  const textMap = {
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  return textMap[severity] || '未知'
}

// 获取状态边框样式
const getStatusBorderStyle = (hasRisk) => {
  return hasRisk ? 'border-red-200' : 'border-green-200'
}

// 获取状态圆圈样式
const getStatusCircleStyle = (hasRisk) => {
  return hasRisk ? 'bg-red-500 shadow-lg' : 'bg-green-500 shadow-lg'
}

// 获取状态文字颜色
const getStatusTextColor = (hasRisk) => {
  return hasRisk ? 'text-red-700' : 'text-green-700'
}

// 获取状态描述
const getStatusDescription = (hasRisk, itemName) => {
  return hasRisk ? `检测到${itemName}相关风险` : `${itemName}核验通过`
}

// 获取风险状态标签样式
const getRiskStatusBadgeStyle = (item) => {
  if (item.hasRisk) {
    if (item.severity === 'high') {
      return 'text-red-800 bg-red-200 border-red-400'
    } else {
      return 'text-orange-800 bg-orange-200 border-orange-400'
    }
  }
  return 'text-green-800 bg-green-200 border-green-400'
}

// 获取风险等级文字颜色
const getRiskLevelTextColor = (severity) => {
  const colorMap = {
    'high': 'text-red-700',
    'medium': 'text-orange-700',
    'low': 'text-yellow-700'
  }
  return colorMap[severity] || 'text-gray-600'
}

// 获取风险等级进度条样式
const getRiskLevelBarStyle = (severity) => {
  const styleMap = {
    'high': 'bg-gradient-to-r from-red-500 to-red-700',
    'medium': 'bg-gradient-to-r from-orange-500 to-orange-700',
    'low': 'bg-gradient-to-r from-yellow-500 to-yellow-700'
  }
  return styleMap[severity] || 'bg-gray-400'
}

// 获取风险等级进度条宽度
const getRiskLevelWidth = (severity) => {
  const widthMap = {
    'high': '90%',
    'medium': '70%',
    'low': '50%'
  }
  return widthMap[severity] || '30%'
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 计算高风险数量和中风险数量
  let highRiskCount = 0;
  let mediumRiskCount = 0;

  Object.values(securityItems.value).forEach(item => {
    if (item.hasRisk) {
      if (item.severity === 'high') {
        highRiskCount++;
      } else if (item.severity === 'medium') {
        mediumRiskCount++;
      }
    }
  });

  // 没有风险 -> 100分
  if (highRiskCount === 0 && mediumRiskCount === 0) {
    return 100;
  }

  // 计算风险分数
  let score = 100;

  // 每个高风险扣20分（公安重点人员风险很高）
  score -= highRiskCount * 20;

  // 每个中风险扣10分
  score -= mediumRiskCount * 10;

  // 确保分数在合理范围内
  return Math.max(20, Math.min(100, score));
});

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);

// 暴露给父组件
defineExpose({
  riskScore
});
</script>

<style lang="scss" scoped>
// 组件样式</style>
