<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/sdszryhy.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()">
                  {{ overallRiskLevel.level }}
                </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()">
                  {{ riskItemCount }}
                </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 antiFraudItems" :key="key"
            class="relative rounded-lg border p-3 transition-all duration-300" :class="getAntiFraudItemCardStyle(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="getRiskLevelBadgeStyle(item.riskLevel)">
                {{ getRiskLevelText(item.riskLevel) }}
              </div>
            </div>

            <div class="flex items-center">
              <div class="w-10 h-10 flex items-center justify-center mr-3">
                <img :src="getAntiFraudItemIcon(item)" :alt="item.name" class="w-10 h-10 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>
                <div class="text-sm text-[#999999]">{{ getItemRiskDescription(key, item.riskLevel) }}</div>

                <!-- 风险等级进度条 - 只和右侧内容等宽 -->
                <div class="mt-3">
                  <div class="flex items-center space-x-1">
                    <div v-for="level in ['0', 'A', 'B', 'C', 'D']" :key="level" class="flex-1 h-2 rounded-full"
                      :class="getRiskIndicatorStyle(level, item.riskLevel)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 风险分数显示 -->
        <div v-if="antiFraudInfo?.riskScore" class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <span class="text-xl mr-2">📊</span>
              <span class="font-semibold text-gray-800">综合风险评分</span>
            </div>
            <div class="text-lg font-bold text-blue-600">
              {{ antiFraudInfo.riskScore }}
            </div>
          </div>
        </div>

        <!-- 高风险警告 -->
        <div v-if="hasHighRisk" 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>

        <!-- 安全提示 -->
        <div v-if="!riskItemCount && !antiFraudInfo?.riskScore" 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 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 space-y-1">
            <div><strong>0：</strong>无风险</div>
            <div><strong>A：</strong>较低风险 - 近三个月有参与疑似涉赌涉诈中风险交易</div>
            <div><strong>B：</strong>低风险 - 近三个月有参与疑似涉赌涉诈高风险交易，近期未参与</div>
            <div><strong>C：</strong>中风险 - 近三个月有与赌博庄家、欺诈收款关联交易</div>
            <div><strong>D：</strong>高风险 - 近三个月有被交易处罚，涉赌、涉诈等高危风险交易</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="反欺诈信息通过多维度数据分析识别潜在的欺诈风险，包括身份信息伪造、虚假申请、团伙欺诈等。数据来源于公安部门、金融监管机构和专业反欺诈机构。反欺诈模型采用机器学习和人工智能技术，能够实时识别异常行为模式。建议对高风险评分的申请进行人工复核，并加强身份验证和信息核实。" />
</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 antiFraudInfo = computed(() => {
  return props.data?.antiFraudInfo || {}
})

// 涉赌涉诈项目配置
const antiFraudConfig = {
  moneyLaundering: {
    name: '疑似跑分风险',
    icon: '💰',
    baseDescription: '跑分洗钱风险评估'
  },
  deceiver: {
    name: '疑似欺诈风险',
    icon: '🎭',
    baseDescription: '欺诈行为风险评估'
  },
  gamblerPlayer: {
    name: '疑似赌博玩家风险',
    icon: '🎲',
    baseDescription: '赌博玩家风险评估'
  },
  gamblerBanker: {
    name: '疑似赌博庄家风险',
    icon: '🏦',
    baseDescription: '赌博庄家风险评估'
  }
}

// 判断是否有涉赌涉诈数据
const hasAntiFraudData = computed(() => {
  return antiFraudInfo.value && Object.keys(antiFraudInfo.value).length > 0
})

// 处理涉赌涉诈项目数据 - 始终显示四个项目
const antiFraudItems = computed(() => {
  const items = {}

  Object.keys(antiFraudConfig).forEach(key => {
    const value = antiFraudInfo.value?.[key] || '0'

    items[key] = {
      ...antiFraudConfig[key],
      riskLevel: value
    }
  })

  return items
})

// 计算有风险的项目数量
const riskItemCount = computed(() => {
  return Object.values(antiFraudItems.value).filter(item => item.riskLevel !== '0').length
})

// 是否有高风险
const hasHighRisk = computed(() => {
  return Object.values(antiFraudItems.value).some(item =>
    item.riskLevel === 'C' || item.riskLevel === 'D'
  )
})

// 获取标题图标
const getTitleIcon = () => {
  if (hasHighRisk.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 getAntiFraudItemCardStyle = (item) => {
  if (item.riskLevel === '0') {
    return 'bg-[#ECF9EF] border-[#CAECD3]'
  } else if (item.riskLevel === 'A' || item.riskLevel === 'B') {
    return 'bg-[#F9F5ED] border-[#FFB74D8F]'
  } else {
    return 'bg-[#F9ECEC] border-[#F0CACA]'
  }
}

// 获取涉赌涉诈项目图标
const getAntiFraudItemIcon = (item) => {
  if (item.riskLevel === '0') {
    return new URL('@/assets/images/report/zq.png', import.meta.url).href
  } else if (item.riskLevel === 'A' || item.riskLevel === 'B') {
    return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  } else {
    return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  }
}

// 获取涉赌涉诈风险标签样式
const getAntiFraudTagClass = (item) => {
  if (item.riskLevel === '0') {
    return 'bg-[#4CAF50]' // 安全使用绿色
  } else {
    return 'bg-[#E53935]' // 危险统一使用红色
  }
}

// 获取风险等级标签样式
const getRiskLevelBadgeStyle = (level) => {
  const styleMap = {
    '0': 'bg-[#4CAF50]',
    'A': 'bg-[#D6943E]',
    'B': 'bg-[#D6943E]',
    'C': 'bg-[#EB3C3C]',
    'D': 'bg-[#EB3C3C]'
  }
  return styleMap[level] || 'bg-[#999999]'
}

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

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

// 整体风险等级
const overallRiskLevel = computed(() => {
  const levels = Object.values(antiFraudItems.value).map(item => item.riskLevel)

  if (levels.includes('D')) {
    return { level: '高风险', color: 'text-red-700' }
  } else if (levels.includes('C')) {
    return { level: '中风险', color: 'text-red-600' }
  } else if (levels.includes('B')) {
    return { level: '低风险', color: 'text-orange-600' }
  } else if (levels.includes('A')) {
    return { level: '较低风险', color: 'text-yellow-600' }
  } else {
    return { level: '无风险', color: 'text-green-600' }
  }
})

// 获取风险等级样式
const getRiskLevelStyle = (level) => {
  const styleMap = {
    '0': 'text-green-700 bg-green-100 border-green-200',
    'A': 'text-yellow-700 bg-yellow-100 border-yellow-200',
    'B': 'text-orange-700 bg-orange-100 border-orange-200',
    'C': 'text-red-700 bg-red-100 border-red-200',
    'D': 'text-red-800 bg-red-200 border-red-300'
  }
  return styleMap[level] || 'text-gray-600 bg-gray-100 border-gray-200'
}

// 获取风险等级边框样式
const getRiskLevelBorderStyle = (level) => {
  const styleMap = {
    '0': 'bg-green-50 border-green-200',
    'A': 'bg-yellow-50 border-yellow-200',
    'B': 'bg-orange-50 border-orange-200',
    'C': 'bg-red-50 border-red-200',
    'D': 'bg-red-100 border-red-300'
  }
  return styleMap[level] || 'bg-gray-50 border-gray-200'
}

// 获取风险等级文本颜色
const getRiskLevelTextColor = (level) => {
  const colorMap = {
    '0': 'text-green-700',
    'A': 'text-yellow-700',
    'B': 'text-orange-700',
    'C': 'text-red-700',
    'D': 'text-red-800'
  }
  return colorMap[level] || 'text-gray-600'
}

// 获取风险等级描述背景
const getRiskLevelDescriptionBg = (level) => {
  const bgMap = {
    '0': 'bg-green-100',
    'A': 'bg-yellow-100',
    'B': 'bg-orange-100',
    'C': 'bg-red-100',
    'D': 'bg-red-200'
  }
  return bgMap[level] || 'bg-gray-100'
}

// 获取风险指示器样式
const getRiskIndicatorStyle = (currentLevel, itemLevel) => {
  const levelOrder = ['0', 'A', 'B', 'C', 'D']
  const currentIndex = levelOrder.indexOf(currentLevel)
  const itemIndex = levelOrder.indexOf(itemLevel)

  if (currentIndex <= itemIndex) {
    const activeStyles = {
      '0': 'bg-green-500',
      'A': 'bg-yellow-500',
      'B': 'bg-orange-500',
      'C': 'bg-red-500',
      'D': 'bg-red-600'
    }
    return activeStyles[currentLevel] || 'bg-gray-300'
  }
  return 'bg-gray-200'
}

// 获取风险等级文本
const getRiskLevelText = (level) => {
  const textMap = {
    '0': '无风险',
    'A': '较低风险',
    'B': '低风险',
    'C': '中风险',
    'D': '高风险'
  }
  return textMap[level] || '未知'
}

// 获取风险等级详细描述
const getRiskLevelDescription = (level) => {
  const descMap = {
    '0': '无风险',
    'A': '较低风险：近三个月有参与疑似涉赌涉诈中风险交易',
    'B': '低风险：近三个月有参与疑似涉赌涉诈高风险交易，近期未参与',
    'C': '中风险：近三个月有与赌博庄家、欺诈收款关联交易',
    'D': '高风险：近三个月有被交易处罚，涉赌、涉诈等高危风险交易'
  }
  return descMap[level] || '未知风险等级'
}

// 获取图标背景样式
const getIconBackgroundStyle = (level) => {
  const styleMap = {
    '0': 'bg-gradient-to-br from-green-400 to-green-600',
    'A': 'bg-gradient-to-br from-yellow-400 to-yellow-600',
    'B': 'bg-gradient-to-br from-orange-400 to-orange-600',
    'C': 'bg-gradient-to-br from-red-400 to-red-600',
    'D': 'bg-gradient-to-br from-red-600 to-red-800'
  }
  return styleMap[level] || 'bg-gradient-to-br from-gray-400 to-gray-600'
}

// 获取风险等级指示器样式
const getRiskLevelIndicatorStyle = (level) => {
  const styleMap = {
    '0': 'bg-green-500 text-white',
    'A': 'bg-yellow-500 text-white',
    'B': 'bg-orange-500 text-white',
    'C': 'bg-red-500 text-white',
    'D': 'bg-red-700 text-white animate-pulse'
  }
  return styleMap[level] || 'bg-gray-400 text-white'
}

// 获取风险等级指示器文本
const getRiskLevelIndicatorText = (level) => {
  return level === '0' ? '✓' : level
}

// 根据风险项目和风险等级获取具体描述
const getItemRiskDescription = (itemKey, riskLevel) => {
  // 基础描述映射
  const itemBaseDescriptions = {
    moneyLaundering: {
      name: '跑分洗钱',
      action: '参与跑分洗钱活动'
    },
    deceiver: {
      name: '欺诈行为',
      action: '涉及欺诈活动'
    },
    gamblerPlayer: {
      name: '赌博玩家',
      action: '参与赌博活动'
    },
    gamblerBanker: {
      name: '赌博庄家',
      action: '充当赌博庄家'
    }
  }

  const itemInfo = itemBaseDescriptions[itemKey]
  if (!itemInfo) return '未知风险项目'

  // 根据风险等级生成描述
  switch (riskLevel) {
    case '0':
      return `该用户未检测到${itemInfo.name}相关风险，账户交易行为正常。`

    case 'A':
      return `该用户在近三个月有参与疑似${itemInfo.name}的中风险交易，或历史有参与相关高风险交易但近期未参与，存在较低风险。`

    case 'B':
      return `该用户在近三个月有参与疑似${itemInfo.name}的高风险交易，但近期未参与涉赌诈等交易，存在低风险。`

    case 'C':
      return `该用户在近三个月有与${itemInfo.name}相关的关联交易，或疑似团伙性质的账户，或第三方支付投诉举报疑似为涉诈、涉赌的收款账户，存在中风险。`

    case 'D':
      return `该用户在近三个月有被交易处罚，如涉及${itemInfo.name}等高危风险交易的处罚，或近期被四方巡检稽核为收款账户，或第三方支付投诉举报定性为涉诈账户且近期有过高危收款行为，存在高风险。`

    default:
      return `该用户的${itemInfo.name}风险等级未知，建议进一步核实。`
  }
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 计算各风险等级的数量
  let dCount = 0; // 高风险
  let cCount = 0; // 中风险
  let bCount = 0; // 低风险
  let aCount = 0; // 较低风险

  Object.values(antiFraudItems.value).forEach(item => {
    const level = item.riskLevel;
    if (level === 'D') dCount++;
    else if (level === 'C') cCount++;
    else if (level === 'B') bCount++;
    else if (level === 'A') aCount++;
  });

  // 没有风险 -> 100分
  if (dCount === 0 && cCount === 0 && bCount === 0 && aCount === 0) {
    return 100;
  }

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

  // 每个D级（高风险）扣25分（涉赌涉诈风险极高）
  score -= dCount * 25;

  // 每个C级（中风险）扣15分
  score -= cCount * 15;

  // 每个B级（低风险）扣8分
  score -= bCount * 8;

  // 每个A级（较低风险）扣4分
  score -= aCount * 4;

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

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

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

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