<template>
  <div class="risk-supervision-section card">
    <div class="p-2 relative border border-gray-200 rounded-lg ">
      <!-- 头部 -->
      <div class="flex items-center justify-between mb-3 p-4 ">
        <div class="flex items-center">
          <div class="w-10 h-10 flex items-center justify-center mr-2">
            <img src="@/assets/images/report/glfxjd.png" alt="关联风险监督" class="w-10 h-10 object-contain" />
          </div>
          <div>
            <div class="font-bold text-lg text-[#333333]">关联风险监督</div>
            <div class="text-sm text-[#999999]">最后申请时间: {{ riskSupervision.leastApplicationTime || '未知' }}</div>
          </div>
        </div>
      </div>

      <!-- 关联统计卡片 -->
      <div class="space-y-3">
        <!-- 同一身份证关联手机号数 -->
        <div class="bg-[#F9F9F9] rounded-lg border border-gray-200 p-4">
          <div class="flex items-center">
            <div class="w-10 h-10 flex items-center justify-center mr-3">
              <img src="@/assets/images/report/glsjh.png" alt="身份证关联手机号" class="w-10 h-10 object-contain" />
            </div>
            <div class="flex-1">
              <div class="text-lg font-bold text-[#333333]">{{ riskSupervision.rentalRiskListIdCardRelationsPhones || 0
                }}</div>
              <div class="text-sm text-[#999999]">同一身份证关联手机号数</div>
            </div>
          </div>
        </div>

        <!-- 同一手机号关联身份证数 -->
        <div class="bg-[#F9F9F9] rounded-lg border border-gray-200 p-4">
          <div class="flex items-center">
            <div class="w-10 h-10 flex items-center justify-center mr-3">
              <img src="@/assets/images/report/glsfz.png" alt="手机号关联身份证" class="w-10 h-10 object-contain" />
            </div>
            <div class="flex-1">
              <div class="text-lg font-bold text-[#333333]">{{ riskSupervision.rentalRiskListPhoneRelationsIdCards || 0
                }}</div>
              <div class="text-sm text-[#999999]">同一手机号关联身份证数</div>
            </div>
          </div>
        </div>

        <!-- 风险状态卡片 -->
        <div class="bg-[#F9F9F9] rounded-lg border border-gray-200 p-4">
          <div class="flex items-center">
            <div class="w-10 h-10 flex items-center justify-center mr-3">
              <img :src="getRiskStatusIcon()" :alt="getRiskStatusText()" class="w-10 h-10 object-contain" />
            </div>
            <div class="flex-1">
              <div class="text-lg font-bold text-[#333333]">{{ getRiskStatusText() }}</div>
              <div class="text-sm text-[#999999]">{{ getRiskStatusDescription() }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="关联风险监督通过分析同一身份证关联的手机号数量和同一手机号关联的身份证数量来识别潜在风险。正常情况下，一个身份证对应的手机号数量和一个手机号对应的身份证数量都应该较少。如果关联数量异常较多，可能存在身份信息被冒用、团伙作案或其他欺诈风险。建议结合最后申请时间和详情信息综合判断风险等级。" />
</template>

<script setup>
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 = {} } = props.data

// 检查是否有监督风险
const hasSupervisionRisk = () => {
  return riskSupervision.rentalRiskListIdCardRelationsPhones > 0 ||
    riskSupervision.rentalRiskListPhoneRelationsIdCards > 0 ||
    (riskSupervision.details && riskSupervision.details !== '无')
}

// 获取风险状态图标
const getRiskStatusIcon = () => {
  if (hasSupervisionRisk()) {
    return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  } else {
    return new URL('@/assets/images/report/zq.png', import.meta.url).href
  }
}

// 获取风险状态文本
const getRiskStatusText = () => {
  if (hasSupervisionRisk()) {
    return '发现关联风险'
  } else {
    return '无关联风险'
  }
}

// 获取风险状态描述
const getRiskStatusDescription = () => {
  if (hasSupervisionRisk()) {
    return '当前发现关联风险监督问题'
  } else {
    return '当前未发现关联风险监督问题'
  }
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  const supervision = riskSupervision.value || {};

  // 没有数据 -> 无风险 -> 100分
  if (Object.keys(supervision).length === 0) {
    return 100;
  }

  // 同一身份证关联手机号数
  const idCardRelationsPhones = supervision.rentalRiskListIdCardRelationsPhones || 0;
  // 同一手机号关联身份证数
  const phoneRelationsIdCards = supervision.rentalRiskListPhoneRelationsIdCards || 0;

  // 关联数量异常多 -> 高风险
  if (idCardRelationsPhones >= 10 || phoneRelationsIdCards >= 10) {
    return 30;
  }
  // 关联数量较多 -> 中高风险
  if (idCardRelationsPhones >= 5 || phoneRelationsIdCards >= 5) {
    return 50;
  }
  // 关联数量中等 -> 中风险
  if (idCardRelationsPhones >= 3 || phoneRelationsIdCards >= 3) {
    return 70;
  }
  // 关联数量较少 -> 中低风险
  if (idCardRelationsPhones > 0 || phoneRelationsIdCards > 0) {
    return 85;
  }

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

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

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

<style lang="scss" scoped>
.risk-supervision-section {
  @apply space-y-4;
}
</style>
