<template>
  <div class="police-key-person-check card">
    <!-- 公安重点人员核验产品 -->
    <div class="verification-section mb-4">
      <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
        <div class="absolute top-0 right-0">
          <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
            :class="getRiskFlagTagClass(highRiskFlag)">
            {{ getRiskFlagText(highRiskFlag) }}
          </div>
        </div>
        <div class="flex items-center mb-3">
          <div class="w-8 h-8 flex items-center justify-center mr-3">
            <img src="@/assets/images/report/gazdryhycp.png" alt="公安重点人员核验产品" class="w-8 h-8 object-contain" />
          </div>
          <span class="font-bold text-gray-800">公安重点人员核验产品</span>
        </div>

        <div v-if="keyPersonCheckList" class="verification-details">
          <div class="space-y-2">
            <!-- 前科 -->
            <div class="rounded-xl p-4 relative" :class="getRiskTypeResultClass(keyPersonCheckList.fontFlag)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getRiskTypeTagClass(keyPersonCheckList.fontFlag)">
                  {{ getRiskTypeText(keyPersonCheckList.fontFlag) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getRiskTypeIcon(keyPersonCheckList.fontFlag)"
                    :alt="getRiskTypeText(keyPersonCheckList.fontFlag)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">前科</div>
                </div>
              </div>
            </div>

            <!-- 经济类前科 -->
            <div class="rounded-xl p-4 relative" :class="getRiskTypeResultClass(keyPersonCheckList.jingJiFontFlag)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getRiskTypeTagClass(keyPersonCheckList.jingJiFontFlag)">
                  {{ getRiskTypeText(keyPersonCheckList.jingJiFontFlag) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getRiskTypeIcon(keyPersonCheckList.jingJiFontFlag)"
                    :alt="getRiskTypeText(keyPersonCheckList.jingJiFontFlag)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">经济类前科</div>
                </div>
              </div>
            </div>

            <!-- 妨害社会管理秩序 -->
            <div class="rounded-xl p-4 relative" :class="getRiskTypeResultClass(keyPersonCheckList.fangAiFlag)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getRiskTypeTagClass(keyPersonCheckList.fangAiFlag)">
                  {{ getRiskTypeText(keyPersonCheckList.fangAiFlag) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getRiskTypeIcon(keyPersonCheckList.fangAiFlag)"
                    :alt="getRiskTypeText(keyPersonCheckList.fangAiFlag)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">妨害社会管理秩序</div>
                </div>
              </div>
            </div>

            <!-- 重点 -->
            <div class="rounded-xl p-4 relative" :class="getRiskTypeResultClass(keyPersonCheckList.zhongDianFlag)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getRiskTypeTagClass(keyPersonCheckList.zhongDianFlag)">
                  {{ getRiskTypeText(keyPersonCheckList.zhongDianFlag) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getRiskTypeIcon(keyPersonCheckList.zhongDianFlag)"
                    :alt="getRiskTypeText(keyPersonCheckList.zhongDianFlag)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">重点</div>
                </div>
              </div>
            </div>

            <!-- 涉交通案件 -->
            <div class="rounded-xl p-4 relative" :class="getRiskTypeResultClass(keyPersonCheckList.sheJiaoTongFlag)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getRiskTypeTagClass(keyPersonCheckList.sheJiaoTongFlag)">
                  {{ getRiskTypeText(keyPersonCheckList.sheJiaoTongFlag) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getRiskTypeIcon(keyPersonCheckList.sheJiaoTongFlag)"
                    :alt="getRiskTypeText(keyPersonCheckList.sheJiaoTongFlag)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">涉交通案</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 涉赌涉诈核验产品 -->
    <div class="verification-section mb-4">
      <div class="bg-white rounded-xl border border-gray-200 p-4 relative">
        <div class="absolute top-0 right-0">
          <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
            :class="getAntiFraudRiskFlagTagClass(antiFraudInfo)">
            {{ getAntiFraudRiskFlagText(antiFraudInfo) }}
          </div>
        </div>
        <div class="flex items-center mb-3">
          <div class="w-8 h-8 flex items-center justify-center mr-3">
            <img src="@/assets/images/report/sdszhycp.png" alt="涉赌涉诈核验产品" class="w-8 h-8 object-contain" />
          </div>
          <span class="font-bold text-gray-800">涉赌涉诈核验产品</span>
        </div>

        <div class="verification-details">
          <div class="space-y-2">
            <!-- 疑似跑分风险 -->
            <div class="rounded-xl p-4 relative" :class="getAntiFraudRiskResultClass(antiFraudInfo?.moneyLaundering)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getAntiFraudRiskTagClass(antiFraudInfo?.moneyLaundering)">
                  {{ getAntiFraudRiskText(antiFraudInfo?.moneyLaundering) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getAntiFraudRiskIcon(antiFraudInfo?.moneyLaundering)"
                    :alt="getAntiFraudRiskText(antiFraudInfo?.moneyLaundering)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">疑似跑分风险</div>
                </div>
              </div>
            </div>

            <!-- 疑似欺诈风险 -->
            <div class="rounded-xl p-4 relative" :class="getAntiFraudRiskResultClass(antiFraudInfo?.deceiver)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getAntiFraudRiskTagClass(antiFraudInfo?.deceiver)">
                  {{ getAntiFraudRiskText(antiFraudInfo?.deceiver) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getAntiFraudRiskIcon(antiFraudInfo?.deceiver)"
                    :alt="getAntiFraudRiskText(antiFraudInfo?.deceiver)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">疑似欺诈风险</div>
                </div>
              </div>
            </div>

            <!-- 疑似赌博玩家风险 -->
            <div class="rounded-xl p-4 relative" :class="getAntiFraudRiskResultClass(antiFraudInfo?.gamblerPlayer)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getAntiFraudRiskTagClass(antiFraudInfo?.gamblerPlayer)">
                  {{ getAntiFraudRiskText(antiFraudInfo?.gamblerPlayer) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getAntiFraudRiskIcon(antiFraudInfo?.gamblerPlayer)"
                    :alt="getAntiFraudRiskText(antiFraudInfo?.gamblerPlayer)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">疑似赌博玩家风险</div>
                </div>
              </div>
            </div>

            <!-- 疑似赌博庄家风险 -->
            <div class="rounded-xl p-4 relative" :class="getAntiFraudRiskResultClass(antiFraudInfo?.gamblerBanker)">
              <div class="absolute top-0 right-0">
                <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                  :class="getAntiFraudRiskTagClass(antiFraudInfo?.gamblerBanker)">
                  {{ getAntiFraudRiskText(antiFraudInfo?.gamblerBanker) }}
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 mr-4">
                  <img :src="getAntiFraudRiskIcon(antiFraudInfo?.gamblerBanker)"
                    :alt="getAntiFraudRiskText(antiFraudInfo?.gamblerBanker)" class="w-10 h-10 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="font-bold text-gray-800">疑似赌博庄家风险</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="公安重点人员检验通过多个权威数据源进行核验，包括前科记录、经济类前科、妨害社会管理秩序、重点人员和涉交通案件等。涉赌涉诈核验产品检测疑似跑分、欺诈、赌博玩家和庄家等风险。风险等级从A到D递增，D级为最高风险。检验结果基于公安部门和相关监管机构的数据，具有较高权威性。建议对命中任何风险项目的申请人进行重点审查。" />
</template>

<script setup>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'

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

// 从data中解构出需要的字段
const {
  highRiskFlag = 0,
  keyPersonCheckList = {},
  antiFraudInfo = {}
} = props.data

const getRiskFlagText = (flag) => {
  if (flag === 1) return '高风险'
  if (flag === 2) return '低风险'
  return '未查得'
}

// 风险标识标签颜色
const getRiskFlagTagClass = (flag) => {
  if (flag === 1) return 'bg-[#E53935]'
  if (flag === 2) return 'bg-[#4CAF50]'
  return 'bg-gray-500'
}

const getRiskTypeText = (flag) => {
  if (flag === 1) return '存在风险'
  if (flag === 0) return '无风险'
  return '未检验'
}

// 风险类型结果背景样式
const getRiskTypeResultClass = (flag) => {
  if (flag === 1) return 'bg-[#FFF0F0] border border-red-200'
  if (flag === 0) return 'bg-[#F0FFF0] border border-green-200'
  return 'bg-gray-50 border border-gray-200'
}

// 风险类型标签颜色
const getRiskTypeTagClass = (flag) => {
  if (flag === 1) return 'bg-[#E53935]'
  if (flag === 0) return 'bg-[#4CAF50]'
  return 'bg-gray-500'
}

// 风险类型图标
const getRiskTypeIcon = (flag) => {
  if (flag === 1) return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  if (flag === 0) return new URL('@/assets/images/report/zq.png', import.meta.url).href
  return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

const getAntiFraudRiskText = (risk) => {
  if (risk === '0' || !risk || risk === '') return '无风险'
  if (risk === 'A') return '较低风险'
  if (risk === 'B') return '低风险'
  if (risk === 'C') return '中风险'
  if (risk === 'D') return '高风险'
  return '无风险'
}

const getAntiFraudRiskFlagText = (info) => {
  if (!info || !hasAnyRisk(info)) return '无风险'
  return '存在风险'
}

// 涉赌涉诈风险标识标签颜色
const getAntiFraudRiskFlagTagClass = (info) => {
  if (!info || !hasAnyRisk(info)) return 'bg-[#4CAF50]'
  return 'bg-[#E53935]'
}

// 涉赌涉诈风险结果背景样式
const getAntiFraudRiskResultClass = (risk) => {
  if (risk === '0' || !risk || risk === '') return 'bg-[#F0FFF0] border border-green-200'
  if (risk === 'A' || risk === 'B' || risk === 'C' || risk === 'D') return 'bg-[#FFF0F0] border border-red-200'
  return 'bg-[#F0FFF0] border border-green-200'
}

// 涉赌涉诈风险标签颜色
const getAntiFraudRiskTagClass = (risk) => {
  if (risk === '0' || !risk || risk === '') return 'bg-[#4CAF50]'
  if (risk === 'A' || risk === 'B' || risk === 'C' || risk === 'D') return 'bg-[#E53935]'
  return 'bg-[#4CAF50]'
}

// 涉赌涉诈风险图标
const getAntiFraudRiskIcon = (risk) => {
  if (risk === '0' || !risk || risk === '') return new URL('@/assets/images/report/zq.png', import.meta.url).href
  if (risk === 'A' || risk === 'B' || risk === 'C' || risk === 'D') return new URL('@/assets/images/report/fqzpf.png', import.meta.url).href
  return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

// 检查是否有任何风险
const hasAnyRisk = (info) => {
  if (!info) return false
  const riskFields = ['moneyLaundering', 'deceiver', 'gamblerPlayer', 'gamblerBanker']
  return riskFields.some(field => {
    const value = info[field]
    return value && value !== '0' && value !== ''
  })
}

// 检查公安重点人员是否有风险
const hasKeyPersonRisk = computed(() => {
  const list = keyPersonCheckList;
  return list.fontFlag === 1 ||
    list.jingJiFontFlag === 1 ||
    list.fangAiFlag === 1 ||
    list.zhongDianFlag === 1 ||
    list.sheJiaoTongFlag === 1;
});

// 检查涉赌涉诈是否有风险
const hasAntiFraudRisk = computed(() => {
  return hasAnyRisk(antiFraudInfo);
});

// 判断是否有风险（公安重点人员检验有风险算风险）
const hasRisk = computed(() => {
  return highRiskFlag === 1 || hasKeyPersonRisk.value || hasAntiFraudRisk.value;
});

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 高风险标识 -> 高风险 -> 20分
  if (highRiskFlag === 1) {
    return 20;
  }

  // 检查是否有任何风险项
  const hasKeyPersonRiskValue = hasKeyPersonRisk.value;
  const hasAntiFraudRiskValue = hasAntiFraudRisk.value;

  if (hasKeyPersonRiskValue || hasAntiFraudRiskValue) {
    return 30; // 有风险项 -> 高风险
  }

  // 低风险标识 -> 低风险 -> 90分
  if (highRiskFlag === 2) {
    return 90;
  }

  // 无风险 -> 100分
  return 100;
});

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

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

<style lang="scss" scoped>
.police-key-person-check {
  @apply space-y-4;
}

.verification-section {
  .verification-details {
    @apply mt-3;
  }
}
</style>
