<template>
  <div class="operator-verification 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="getOnlineTimeRiskTagClass(inTime)">
            {{ getOnlineTimeRiskText(inTime) }}
          </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/zwsc.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="rounded-xl p-4 relative" :class="getOnlineTimeResultClass(inTime)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getOnlineTimeRiskTagClass(inTime)">
                {{ getOnlineTimeRiskText(inTime) }}
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-10 h-10 mr-4">
                <img :src="getOnlineTimeIcon(inTime)" :alt="getOnlineTimeRiskText(inTime)"
                  class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="font-bold text-gray-800">{{ getOnlineTimeText(inTime) }}</div>
                <div class="text-sm text-gray-600">状态说明：{{ getOnlineTimeStatusText(inTime) }}</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="getPhoneVailRiskTagClass(phoneVailRiskFlag)">
            {{ getPhoneVailRiskText(phoneVailRiskFlag) }}
          </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/sjh.png" alt="手机信息验证" class="w-8 h-8 object-contain" />
          </div>
          <span class="font-bold text-gray-800">手机信息验证</span>
        </div>

        <div v-if="phoneVailRisks" class="verification-details">
          <div class="rounded-xl p-4 relative" :class="getPhoneVailResultClass(phoneVailRiskFlag)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getPhoneVailRiskTagClass(phoneVailRiskFlag)">
                {{ getPhoneVailRiskText(phoneVailRiskFlag) }}
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-10 h-10 mr-4">
                <img :src="getPhoneVailIcon(phoneVailRiskFlag)" :alt="getPhoneVailRiskText(phoneVailRiskFlag)"
                  class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="font-bold text-gray-800">手机状态：{{ phoneVailRisks.phoneStatus || '沉默号' }}</div>
                <div class="text-sm text-gray-600">运营商：{{ phoneVailRisks.phoneCompany || '移动' }} 在网时长：{{
                  phoneVailRisks.phoneTimes || '3个月' }}</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="getBelongRiskTagClass(belongRiskFlag)">
            {{ getRiskFlagText(belongRiskFlag) }}
          </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/gsdfx.png" alt="归属地风险" class="w-8 h-8 object-contain" />
          </div>
          <span class="font-bold text-gray-800">归属地风险</span>
        </div>

        <div v-if="belongRisks" class="verification-details  bg-[#9999991A] py-4 rounded-xl">
          <div class="flex flex-col gap-2 px-4">
            <div class="flex pb-2 pl-2">
              <span class="text-[#666666] w-[6em]">身份证省份：</span>
              <span class="text-[#333333]">{{ belongRisks.personProvence || '江苏省' }}</span>
            </div>
            <div class="flex pb-2 pl-2">
              <span class="text-[#666666] w-[6em]">身份证城市：</span>
              <span class="text-[#333333]">{{ belongRisks.personCity || '徐州市' }}</span>
            </div>
            <div class="flex pb-2 pl-2">
              <span class="text-[#666666] w-[6em]">手机省份：</span>
              <span class="text-[#333333]">{{ belongRisks.phoneProvence || '江苏' }}</span>
            </div>
            <div class="flex pb-2 pl-2">
              <span class="text-[#666666] w-[6em]">手机城市：</span>
              <span class="text-[#333333]">{{ belongRisks.phoneCity || '徐州' }}</span>
            </div>
            <div class="flex pb-2 pl-2">
              <span class="text-[#666666] w-[6em]">手机卡类型：</span>
              <span class="text-[#333333]">{{ belongRisks.phoneCardType || '移动' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="运营商核验通过手机运营商提供的权威数据进行验证。在网时长反映手机号的使用稳定性，时长越长风险越低。手机状态包括正常、停机、离网等，异常状态需要重点关注。归属地风险通过比较身份证归属地与手机号归属地的一致性来判断风险。手机卡类型包括实名制和非实名制，建议关注非实名制手机卡的风险。数据更新频率为实时。" />
</template>

<script setup>
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 {
  inTime = '',
  phoneVailRiskFlag = 0,
  phoneVailRisks = {},
  belongRiskFlag = 0,
  belongRisks = {}
} = props.data

// 在网时长相关函数
const getOnlineTimeClass = (time) => {
  const timeValue = parseInt(time)
  if (timeValue >= 24) return 'bg-green-100 text-green-700'
  if (timeValue >= 12) return 'bg-blue-100 text-blue-700'
  if (timeValue >= 6) return 'bg-yellow-100 text-yellow-700'
  if (timeValue >= 3) return 'bg-orange-100 text-orange-700'
  return 'bg-red-100 text-red-700'
}

// 在网时长风险标签颜色
const getOnlineTimeRiskTagClass = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return 'bg-[#E53935]'
  if (timeValue >= 24) return 'bg-[#4CAF50]'
  if (timeValue >= 12) return 'bg-[#4CAF50]'
  if (timeValue >= 6) return 'bg-[#FFC107]'
  if (timeValue >= 3) return 'bg-[#FFC107]'
  return 'bg-[#E53935]'
}

// 在网时长结果背景样式
const getOnlineTimeResultClass = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return 'bg-[#FFF0F0] border border-red-200'
  if (timeValue >= 24) return 'bg-[#F0FFF0] border border-green-200'
  if (timeValue >= 12) return 'bg-[#F0FFF0] border border-green-200'
  if (timeValue >= 6) return 'bg-[#FFFBF0] border border-yellow-200'
  if (timeValue >= 3) return 'bg-[#FFFBF0] border border-yellow-200'
  return 'bg-[#FFF0F0] border border-red-200'
}

// 在网时长图标
const getOnlineTimeIcon = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  if (timeValue >= 24) return new URL('@/assets/images/report/zq.png', import.meta.url).href
  if (timeValue >= 12) return new URL('@/assets/images/report/zq.png', import.meta.url).href
  if (timeValue >= 6) return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  if (timeValue >= 3) return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  return new URL('@/assets/images/report/zfx.png', import.meta.url).href
}

const getOnlineTimeText = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99) return '已离网'
  if (timeValue === -1) return '查无记录'
  if (timeValue >= 24) return '24个月以上'
  if (timeValue >= 12) return '12-24个月'
  if (timeValue >= 6) return '6-12个月'
  if (timeValue >= 3) return '3-6个月'
  return '0-3个月'
}

const getOnlineTimeTextClass = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return 'text-red-600'
  if (timeValue >= 24) return 'text-green-600'
  if (timeValue >= 12) return 'text-blue-600'
  if (timeValue >= 6) return 'text-yellow-600'
  if (timeValue >= 3) return 'text-orange-600'
  return 'text-red-600'
}

const getOnlineTimeRiskClass = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return 'text-red-600'
  if (timeValue >= 24) return 'text-green-600'
  if (timeValue >= 12) return 'text-blue-600'
  if (timeValue >= 6) return 'text-yellow-600'
  if (timeValue >= 3) return 'text-orange-600'
  return 'text-red-600'
}

const getOnlineTimeRiskText = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99 || timeValue === -1) return '高风险'
  if (timeValue >= 24) return '低风险'
  if (timeValue >= 12) return '低风险'
  if (timeValue >= 6) return '中风险'
  if (timeValue >= 3) return '中风险'
  return '高风险'
}

const getOnlineTimeStatusText = (time) => {
  const timeValue = parseInt(time)
  if (timeValue === 99) return '用户已离网'
  if (timeValue === -1) return '运营商查无记录'
  if (timeValue >= 24) return '长期稳定用户'
  if (timeValue >= 12) return '稳定用户'
  if (timeValue >= 6) return '一般用户'
  if (timeValue >= 3) return '新用户'
  return '风险用户'
}

// 手机信息验证相关函数
const getPhoneVailRiskClass = (flag) => {
  if (flag === 1) return 'bg-red-100 text-red-700'
  if (flag === 2) return 'bg-green-100 text-green-700'
  return 'bg-gray-100 text-gray-700'
}

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

// 手机信息验证风险标签颜色
const getPhoneVailRiskTagClass = (flag) => {
  if (flag === 1) return 'bg-[#E53935]'
  if (flag === 2) return 'bg-[#4CAF50]'
  return 'bg-gray-500'
}

// 手机信息验证结果背景样式
const getPhoneVailResultClass = (flag) => {
  if (flag === 1) return 'bg-[#FFF0F0] border border-red-200'
  if (flag === 2) return 'bg-[#F0FFF0] border border-green-200'
  return 'bg-gray-50 border border-gray-200'
}

// 手机信息验证图标
const getPhoneVailIcon = (flag) => {
  if (flag === 1) return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  if (flag === 2) 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 getRiskFlagClass = (flag) => {
  if (flag === 1) return 'bg-red-100 text-red-700'
  if (flag === 2) return 'bg-green-100 text-green-700'
  return 'bg-gray-100 text-gray-700'
}

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

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

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 手机号验证高风险 -> 高风险 -> 30分
  if (phoneVailRiskFlag.value === 1) {
    return 30;
  }
  // 归属地风险 -> 高风险 -> 40分
  if (belongRiskFlag.value === 1) {
    return 40;
  }
  // 在网时长风险（0-3个月或已离网） -> 高风险 -> 50分
  const timeValue = parseInt(inTime.value);
  if (timeValue === 99 || timeValue === -1 || timeValue < 3) {
    return 50;
  }
  // 在网时长较短（3-6个月） -> 中风险 -> 70分
  if (timeValue < 6) {
    return 70;
  }
  // 在网时长中等（6-12个月） -> 中低风险 -> 85分
  if (timeValue < 12) {
    return 85;
  }
  // 在网时长较长（12-24个月） -> 低风险 -> 95分
  if (timeValue < 24) {
    return 95;
  }
  // 在网时长很长（24个月以上） -> 低风险 -> 100分
  return 100;
});

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

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

<style lang="scss" scoped>
.operator-verification {
  @apply space-y-4;
}

.verification-section {
  .verification-details {
    @apply mt-3;
  }

  .detail-item {
    @apply p-2 bg-gray-50 rounded-xl;
  }
}
</style>
