<template>
  <div class="card risk-supervision-section">
    <div class="rounded-lg border border-gray-200 pb-2 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/glfxjd2.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-6">
          <LTitle title="关联风险概览" />
          <div class="grid grid-cols-2 gap-4 p-4">
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold" :class="getOverallRiskColor">
                {{ getOverallRiskStatus }}
              </div>
              <div class="text-sm text-gray-600 mt-1">关联风险状态</div>
            </div>
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#2B79EE]">
                {{ totalAssociations }}
              </div>
              <div class="text-sm text-gray-600 mt-1">关联项目总数</div>
            </div>
          </div>
        </div>

        <!-- 身份证关联分析 -->
        <div class="mb-6">
          <LTitle title="身份证关联分析" />
          <div class="grid grid-cols-2 gap-4 p-4">
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#2B79EE]">
                {{ riskSupervision?.rentalRiskListIdCardRelationsPhones || 0 }}
              </div>
              <div class="text-sm text-gray-600 mt-1">同一身份证关联手机号数</div>
            </div>
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#2B79EE]">
                {{ riskSupervision?.rentalRiskListPhoneRelationsIdCards || 0 }}
              </div>
              <div class="text-sm text-gray-600 mt-1">同一手机号关联身份证数</div>
            </div>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="mb-6">
          <LTitle title="时间信息" />
          <div class="grid grid-cols-1 gap-4 p-4">
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold text-[#2B79EE]">
                {{ riskSupervision?.leastApplicationTime || '-' }}
              </div>
              <div class="text-sm text-gray-600 mt-1">最后申请时间</div>
            </div>
          </div>
        </div>

        <!-- 详细信息 -->
        <div v-if="riskSupervision?.details && riskSupervision.details !== '无'" class="mb-6">
          <LTitle title="详细信息" />
          <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
              <p class="text-gray-700 text-sm leading-relaxed">
                {{ riskSupervision.details }}
              </p>
            </div>
          </div>
        </div>

        <!-- 关联风险分析 -->
        <div class="mb-6">
          <LTitle title="关联风险分析" />
          <div class="bg-white p-4">
            <div class="space-y-3">
              <div class="grid grid-cols-1 gap-3">
                <div class="relative p-3 rounded-lg border" :class="getPhoneRiskCardClass">
                  <div class="absolute top-0 right-0">
                    <div class="px-2 py-1 text-xs text-white rounded-bl-lg rounded-tr-lg" :class="getPhoneRiskTagClass">
                      {{ getPhoneRiskLevel }}
                    </div>
                  </div>
                  <div>
                    <div class="font-medium text-gray-800 mb-1">手机号关联风险：</div>
                    <div class="text-sm text-gray-600">{{ getPhoneRiskDescription }}</div>
                  </div>
                </div>
                <div class="relative p-3 rounded-lg border" :class="getIdCardRiskCardClass">
                  <div class="absolute top-0 right-0">
                    <div class="px-2 py-1 text-xs text-white rounded-bl-lg rounded-tr-lg"
                      :class="getIdCardRiskTagClass">
                      {{ getIdCardRiskLevel }}
                    </div>
                  </div>
                  <div>
                    <div class="font-medium text-gray-800 mb-1">身份证关联风险：</div>
                    <div class="text-sm text-gray-600">{{ getIdCardRiskDescription }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 高关联风险警告 -->
        <div v-if="hasHighAssociationRisk" class="mb-6">
          <div class="space-y-3 p-4 bg-red-100 border border-red-300 rounded-lg">
            <div class="flex items-start">
              <div class="mr-3 mt-1">
                <img src="@/assets/images/report/zfx.png" alt="风险提示" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800 mb-2">高关联风险警告</h4>
                <p class="text-gray-400 text-sm">
                  检测到异常的身份证或手机号关联情况，可能存在身份伪冒、团伙欺诈等风险。
                </p>
                <div class="mt-2 text-sm">
                  <div v-if="highRiskItems.length > 0">
                    <span class="text-red-800 font-medium">风险项：</span>
                    <span class="text-red-700">{{ highRiskItems.join('、') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中等关联风险提示 -->
        <div v-else-if="hasMediumAssociationRisk" class="mb-6">
          <div class="space-y-3 p-4 bg-yellow-100 border border-yellow-300 rounded-lg">
            <div class="flex items-start">
              <div class="mr-3 mt-1">
                <img src="@/assets/images/report/zfx.png" alt="风险提示" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800 mb-2">关联风险提示</h4>
                <p class="text-gray-400 text-sm">
                  存在一定的关联风险，建议进一步核实相关信息。
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 正常提示 -->
        <div v-if="!hasAnyAssociationRisk" class="mb-6 mx-4">
          <div class="space-y-3 p-4 bg-[#ECF9EF] border border-[#CAECD3] rounded-lg">
            <div class="flex items-center">
              <div class="mr-3">
                <img src="@/assets/images/report/zq.png" alt="良好记录" class="w-10 h-10 object-contain" />
              </div>
              <div>
                <h4 class="font-semibold text-gray-800">关联风险正常</h4>
                <p class="text-gray-400 text-sm">
                  未检测到异常关联情况，风险较低。
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 风险说明 -->
        <div class="mb-6">
          <div class="space-y-2 p-4">
            <div class=" text-sm font-bold">风险说明</div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600 font-bold">身份证关联手机号：</span>
              <span class="text-[#333333]">同一身份证绑定的不同手机号数量</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600 font-bold">手机号关联身份证：</span>
              <span class="text-[#333333]">同一手机号绑定的不同身份证数量</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600 font-bold">风险评估：</span>
              <span class="text-[#333333]">关联数量过多可能存在身份伪冒或团伙风险</span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600 font-bold">正常范围：</span>
              <span class="text-[#333333]">一般情况下，关联数量在1-2个属于正常范围</span>
            </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 riskSupervision = computed(() => {
  return props.data?.riskSupervision || {}
})

// 身份证关联手机号数
const idCardRelations = computed(() => {
  return riskSupervision.value?.rentalRiskListIdCardRelationsPhones || 0
})

// 手机号关联身份证数
const phoneRelations = computed(() => {
  return riskSupervision.value?.rentalRiskListPhoneRelationsIdCards || 0
})

// 总关联项目数
const totalAssociations = computed(() => {
  return idCardRelations.value + phoneRelations.value
})

// 是否有高关联风险
const hasHighAssociationRisk = computed(() => {
  return idCardRelations.value > 3 || phoneRelations.value > 3
})

// 是否有中等关联风险
const hasMediumAssociationRisk = computed(() => {
  return !hasHighAssociationRisk.value && (idCardRelations.value > 1 || phoneRelations.value > 1)
})

// 是否有任何关联风险
const hasAnyAssociationRisk = computed(() => {
  return hasHighAssociationRisk.value || hasMediumAssociationRisk.value
})

// 整体风险状态
const getOverallRiskStatus = computed(() => {
  if (hasHighAssociationRisk.value) return '高风险'
  if (hasMediumAssociationRisk.value) return '中风险'
  return '正常'
})

// 整体风险颜色
const getOverallRiskColor = computed(() => {
  if (hasHighAssociationRisk.value) return 'text-red-600'
  if (hasMediumAssociationRisk.value) return 'text-yellow-600'
  return 'text-green-600'
})

// 身份证关联颜色
const getIdCardRelationColor = computed(() => {
  if (idCardRelations.value > 3) return 'text-red-600'
  if (idCardRelations.value > 1) return 'text-yellow-600'
  return 'text-green-600'
})

// 手机号关联颜色
const getPhoneRelationColor = computed(() => {
  if (phoneRelations.value > 3) return 'text-red-600'
  if (phoneRelations.value > 1) return 'text-yellow-600'
  return 'text-green-600'
})

// 手机号风险等级
const getPhoneRiskLevel = computed(() => {
  if (phoneRelations.value > 3) return '高风险'
  if (phoneRelations.value > 1) return '中风险'
  if (phoneRelations.value === 1) return '正常'
  return '无关联'
})

// 身份证风险等级
const getIdCardRiskLevel = computed(() => {
  if (idCardRelations.value > 3) return '高风险'
  if (idCardRelations.value > 1) return '中风险'
  if (idCardRelations.value === 1) return '正常'
  return '无关联'
})

// 手机号风险描述
const getPhoneRiskDescription = computed(() => {
  if (phoneRelations.value > 3) return '关联身份证数量异常，存在高风险'
  if (phoneRelations.value > 1) return '关联多个身份证，需要关注'
  if (phoneRelations.value === 1) return '关联情况正常'
  return '暂无关联记录'
})

// 身份证风险描述
const getIdCardRiskDescription = computed(() => {
  if (idCardRelations.value > 3) return '关联手机号数量异常，存在高风险'
  if (idCardRelations.value > 1) return '关联多个手机号，需要关注'
  if (idCardRelations.value === 1) return '关联情况正常'
  return '暂无关联记录'
})

// 高风险项目
const highRiskItems = computed(() => {
  const items = []
  if (idCardRelations.value > 3) items.push('身份证关联手机号过多')
  if (phoneRelations.value > 3) items.push('手机号关联身份证过多')
  return items
})

// 手机号风险卡片样式
const getPhoneRiskCardClass = computed(() => {
  if (phoneRelations.value > 3) return 'bg-red-50 border-red-300'
  if (phoneRelations.value > 1) return 'bg-yellow-50 border-yellow-300'
  return 'bg-green-50 border-green-300'
})

// 身份证风险卡片样式
const getIdCardRiskCardClass = computed(() => {
  if (idCardRelations.value > 3) return 'bg-red-50 border-red-300'
  if (idCardRelations.value > 1) return 'bg-yellow-50 border-yellow-300'
  return 'bg-green-50 border-green-300'
})

// 手机号风险标签样式
const getPhoneRiskTagClass = computed(() => {
  if (phoneRelations.value > 3) return 'bg-red-500 text-white'
  if (phoneRelations.value > 1) return 'bg-yellow-500 text-white'
  return 'bg-green-500 text-white'
})

// 身份证风险标签样式
const getIdCardRiskTagClass = computed(() => {
  if (idCardRelations.value > 3) return 'bg-red-500 text-white'
  if (idCardRelations.value > 1) return 'bg-yellow-500 text-white'
  return 'bg-green-500 text-white'
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 根据关联关系数量计算风险评分
  // 身份证关联手机号或手机号关联身份证超过3个视为高风险
  if (idCardRelations.value > 3 || phoneRelations.value > 3) {
    return 20; // 高风险
  }

  // 超过1个但不超过3个视为中等风险
  if (idCardRelations.value > 1 || phoneRelations.value > 1) {
    return 60; // 中等风险
  }

  // 1个或0个视为正常
  return 100; // 最安全
});

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

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

<style lang="scss" scoped>
.border-b:last-child {
  border-bottom: none;
}
</style>
