<template>
  <div class="card">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
      <div class="flex items-center p-4">
        <div class="w-8 h-8 flex items-center justify-center mr-2">
          <img src="@/assets/images/report/sfxxhy.png" alt="身份信息核验" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">身份信息核验</span>
      </div>

      <div class="">
        <!-- 核验概览 -->
        <div class="mb-3">
          <div class="">
            <LTitle title="核验概览" />
          </div>
          <div class="grid grid-cols-2 gap-4 p-4">
            <div class="rounded-lg border border-[#EB3C3C8F] bg-[#EB3C3C1A] p-2 text-center">
              <div class="text-xl font-bold text-[#EB3C3C] mb-1">
                {{ getOverallVerificationStatus }}
              </div>
              <div class="text-sm font-medium text-gray-700">综合核验状态</div>
            </div>
            <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-2 text-center">
              <div class="text-xl font-bold text-[#1FBE5D] mb-1">
                {{ inTimeInfo.text }}
              </div>
              <div class="text-sm font-medium text-gray-700">在网时长</div>
            </div>
          </div>
        </div>

        <!-- 实名核验 -->
        <div class="mb-3">
          <div class="mb-3">
            <LTitle title="实名核验" />
          </div>
          <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-3 m-4">
            <div class="flex items-center">
              <div class="w-8 h-8 flex items-center justify-center mr-3">
                <img :src="finalAuthResultIcon" alt="实名核验" class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="text-lg font-bold text-[#1FBE5D] mb-1">
                  {{ finalAuthResultInfo.text }}
                </div>
                <div class="text-sm font-medium text-gray-700 mb-1">实名核验结果</div>
                <div class="text-xs text-gray-500">说明:{{ getFinalAuthResultDescription }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 运营商核验 -->
        <div class="mb-3">
          <div class="">
            <LTitle title="运营商核验" />
          </div>
          <div class="space-y-3 p-4">
            <!-- 三要素核验 -->
            <div class="rounded-lg border border-[#EB3C3C8F] bg-[#EB3C3C1A] p-3">
              <div class="flex items-center">
                <div class="w-8 h-8 flex items-center justify-center mr-3">
                  <img :src="verificationIcon" alt="三要素核验" class="w-8 h-8 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="text-lg font-bold text-[#EB3C3C] mb-1">
                    {{ verificationInfo.text }}
                  </div>
                  <div class="text-sm font-medium text-gray-700 mb-1">运营商三要素核验</div>
                  <div class="text-xs text-gray-500">三要素核验:{{ getVerificationDescription }}</div>
                </div>
              </div>
            </div>

            <!-- 在网时长 -->
            <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-3">
              <div class="flex items-center">
                <div class="w-8 h-8 flex items-center justify-center mr-3">
                  <img :src="inTimeIcon" alt="在网时长" class="w-8 h-8 object-contain" />
                </div>
                <div class="flex-1">
                  <div class="text-lg font-bold text-[#1FBE5D] mb-1">
                    {{ inTimeInfo.text }}
                  </div>
                  <div class="text-sm font-medium text-gray-700 mb-1">运营商在网时长</div>
                  <div class="text-xs text-gray-500">在网时长:{{ getInTimeDescription }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 身份核验风险提示 -->
        <div v-if="riskLevel !== 'none'" 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">身份核验风险提示</div>
          </div>
          <div class="ml-6 text-sm mb-1" :class="riskContentColor">
            {{ riskDescription }}
          </div>
          <div class="ml-6 text-sm" :class="riskContentColor">
            风险项:{{ verificationRiskItems.join('、') }}
          </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>实名核验:验证姓名与身份证号的一致性</div>
            <div>三要素核验:验证姓名、身份证号、手机号在运营商的一致性</div>
            <div>在网时长:手机号在运营商的使用时长,时长越长信用度越高</div>
          </div>
        </div>
      </div>


    </div>
  </div>
  <!-- 温馨提示 -->
  <LRemark
    content="在网状态信息展示申请人手机号的详细在网情况，包括在网时长、运营商信息、号码状态和实名认证情况等。数据来源于三大运营商的权威数据。在网时长反映手机号的使用稳定性，时长越长风险越低。号码状态包括正常、停机、销户等，异常状态需要重点关注。建议结合实名认证情况和归属地信息进行综合判断。" />

</template>

<script setup>
import { computed } from 'vue'
import LRemark from '@/components/LRemark.vue'
import LTitle from '@/components/LTitle.vue'
import { formatVerificationResult, formatInTime } from '../utils/simpleSplitter.js'
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 standLiveInfo = computed(() => {
  return props.data?.standLiveInfo || {}
})

// 实名核验结果
const finalAuthResultInfo = computed(() => {
  return formatVerificationResult(standLiveInfo.value?.finalAuthResult)
})

// 运营商三要素核验结果
const verificationInfo = computed(() => {
  return formatVerificationResult(standLiveInfo.value?.verification)
})

// 在网时长信息
const inTimeInfo = computed(() => {
  return formatInTime(standLiveInfo.value?.inTime)
})

// 是否有核验风险
const hasVerificationRisk = computed(() => {
  return standLiveInfo.value?.finalAuthResult === '1' || standLiveInfo.value?.verification === '1'
})

// 整体核验状态
const getOverallVerificationStatus = computed(() => {
  if (hasVerificationRisk.value) return '有风险'
  return '通过'
})

// 核验风险项目
const verificationRiskItems = computed(() => {
  const items = []
  if (standLiveInfo.value?.finalAuthResult === '1') items.push('实名核验不一致')
  if (standLiveInfo.value?.verification === '1') items.push('三要素核验不一致')
  return items
})

// 实名核验描述
const getFinalAuthResultDescription = computed(() => {
  if (standLiveInfo.value?.finalAuthResult === '0') return '姓名与身份证号一致'
  if (standLiveInfo.value?.finalAuthResult === '1') return '姓名与身份证号不一致或不存在'
  return '未进行核验'
})

// 三要素核验描述
const getVerificationDescription = computed(() => {
  if (standLiveInfo.value?.verification === '0') return '姓名、身份证号、手机号在运营商一致'
  if (standLiveInfo.value?.verification === '1') return '姓名、身份证号、手机号在运营商不一致'
  return '未进行核验'
})

// 在网时长描述
const getInTimeDescription = computed(() => {
  const inTime = standLiveInfo.value?.inTime
  const descriptions = {
    '0': '在网时长0-3个月，较短',
    '3': '在网时长3-6个月，偏短',
    '6': '在网时长6-12个月，一般',
    '12': '在网时长12-24个月，较长',
    '24': '在网时长24个月以上，很长',
    '99': '手机号状态异常或已离网',
    '-1': '查无记录'
  }
  return descriptions[inTime] || '未知状态'
})

// 根据风险等级获取图标
const getIconByRiskLevel = (riskLevel) => {
  const icons = {
    'none': new URL('@/assets/images/report/zq.png', import.meta.url).href,
    'medium': new URL('@/assets/images/report/zfx.png', import.meta.url).href,
    'high': new URL('@/assets/images/report/gfx.png', import.meta.url).href,
  }
  return icons[riskLevel] || icons.medium
}

// 标题图标 - 根据整体风险状态
const headerIcon = computed(() => {
  if (hasVerificationRisk.value) {
    return getIconByRiskLevel('high')
  }
  return getIconByRiskLevel('none')
})

// 实名核验图标
const finalAuthResultIcon = computed(() => {
  const result = standLiveInfo.value?.finalAuthResult
  if (result === '0') return getIconByRiskLevel('none')
  if (result === '1') return getIconByRiskLevel('high')
  return getIconByRiskLevel('medium')
})

// 三要素核验图标
const verificationIcon = computed(() => {
  const result = standLiveInfo.value?.verification
  if (result === '0') return getIconByRiskLevel('none')
  if (result === '1') return getIconByRiskLevel('high')
  return getIconByRiskLevel('medium')
})

// 在网时长图标
const inTimeIcon = computed(() => {
  const inTime = standLiveInfo.value?.inTime
  // 24个月以上：无风险
  if (inTime === '24' || inTime === '12') return getIconByRiskLevel('none')
  // 6个月以上：中风险
  if (inTime === '6') return getIconByRiskLevel('medium')
  // 6个月以下、异常状态：高风险
  if (inTime === '0' || inTime === '3' || inTime === '99' || inTime === '-1') {
    return getIconByRiskLevel('high')
  }
  return getIconByRiskLevel('medium')
})

// 风险提示图标
const riskIcon = computed(() => {
  return getIconByRiskLevel('high')
})

// 风险等级评估
const riskLevel = computed(() => {
  const finalAuth = standLiveInfo.value?.finalAuthResult
  const verification = standLiveInfo.value?.verification
  const inTime = standLiveInfo.value?.inTime

  // 高风险：实名或三要素核验不一致
  if (finalAuth === '1' || verification === '1') return 'high'

  // 中风险：在网时长较短或异常
  if (inTime === '0' || inTime === '3' || inTime === '99' || inTime === '-1') return 'medium'

  // 低风险：在网时长一般
  if (inTime === '6') return 'low'

  return 'none'
})

// 风险内容颜色
const riskContentColor = computed(() => {
  const level = riskLevel.value
  const colors = {
    'high': 'text-[#EB3C3C]',
    'medium': 'text-[#FF8C00]',
    'low': 'text-[#FFD700]',
    'none': 'text-gray-600'
  }
  return colors[level] || colors.none
})

// 风险描述内容
const riskDescription = computed(() => {
  const level = riskLevel.value
  const descriptions = {
    'high': '检测到身份核验存在不一致情况，存在高风险，建议立即核实身份信息。',
    'medium': '检测到部分信息异常，存在中风险，建议进一步核实相关信息。',
    'low': '检测到轻微异常，存在低风险，建议关注相关信息。',
    'none': '身份核验信息正常，风险较低。'
  }
  return descriptions[level] || descriptions.none
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  const finalAuth = standLiveInfo.value?.finalAuthResult
  const verification = standLiveInfo.value?.verification
  const inTime = standLiveInfo.value?.inTime

  // 实名核验不一致 -> 高风险 -> 20分
  if (finalAuth === '1') {
    return 20;
  }
  // 三要素核验不一致 -> 高风险 -> 30分
  if (verification === '1') {
    return 30;
  }

  // 在网时长异常或已离网 -> 高风险 -> 40分
  if (inTime === '99' || inTime === '-1') {
    return 40;
  }
  // 在网时长0-3个月 -> 高风险 -> 50分
  if (inTime === '0') {
    return 50;
  }
  // 在网时长3-6个月 -> 中风险 -> 70分
  if (inTime === '3') {
    return 70;
  }
  // 在网时长6-12个月 -> 中低风险 -> 85分
  if (inTime === '6') {
    return 85;
  }
  // 在网时长12-24个月 -> 低风险 -> 95分
  if (inTime === '12') {
    return 95;
  }
  // 在网时长24个月以上 -> 低风险 -> 100分
  if (inTime === '24') {
    return 100;
  }

  // 默认低风险 -> 100分
  return 100;
});

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

// 暴露给父组件
defineExpose({
  riskScore
});
</script>
<style>
.tips-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  object-fit: contain;
}
</style>