<template>
  <div class="bg-white rounded-xl shadow-sm p-6">
    <LTitle title="基本信息" />

    <div class="mt-4">
      <!-- 个人基本信息 -->
      <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 mb-4">
        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
          <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
          个人信息
        </h3>
        <div class="grid grid-cols-1 gap-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">姓名</span>
            <span class="text-gray-800 font-semibold">{{ baseInfo?.name || '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">性别</span>
            <span class="text-gray-800">{{ baseInfo?.sex || '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">年龄</span>
            <span class="text-gray-800">{{ baseInfo?.age ? baseInfo.age + '岁' : '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">身份证号</span>
            <span class="text-gray-800 font-mono">{{ baseInfo?.idCard || '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 font-medium">手机号码</span>
            <span class="text-gray-800 font-mono">{{ baseInfo?.phone || '-' }}</span>
          </div>
        </div>
      </div>

      <!-- 地域信息 -->
      <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-4 mb-4">
        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
          <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
          地域信息
        </h3>
        <div class="grid grid-cols-1 gap-3">
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">户籍所在地</span>
            <span class="text-gray-800">{{ baseInfo?.location || '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2 border-b border-gray-200">
            <span class="text-gray-600 font-medium">号码归属地</span>
            <span class="text-gray-800">{{ baseInfo?.phoneArea || '-' }}</span>
          </div>
          <div class="flex justify-between items-center py-2">
            <span class="text-gray-600 font-medium">手机运营商</span>
            <span class="text-gray-800">{{ baseInfo?.channel || '-' }}</span>
          </div>
        </div>
      </div>

      <!-- 手机号状态 -->
      <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
          <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
          号码状态
        </h3>
        <div class="flex items-center justify-between py-2">
          <span class="text-gray-600 font-medium">手机号状态</span>
          <div class="flex items-center">
            <span class="mr-2">{{ phoneStatusInfo.icon }}</span>
            <span :class="phoneStatusInfo.color" class="font-semibold">
              {{ phoneStatusInfo.text }}
            </span>
          </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 { formatPhoneStatus } from '../utils/simpleSplitter.js'

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

// 从data中解构出需要的字段
const baseInfo = computed(() => {
  return props.data?.baseInfo || {}
})

// 手机号状态信息
const phoneStatusInfo = computed(() => {
  return formatPhoneStatus(baseInfo.value?.status || -1)
})

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 基本信息模块主要是展示基础信息，没有明显的风险指标
  // 根据手机号状态进行简单评分

  const status = baseInfo.value?.status || -1;

  // 手机号状态为异常或停机 -> 中风险 -> 70分
  if (status === 2 || status === 3) {
    return 70;
  }
  // 手机号状态为离网 -> 高风险 -> 50分
  if (status === 4) {
    return 50;
  }

  // 其他情况 -> 低风险 -> 100分
  return 100;
});

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

<style lang="scss" scoped>
.border-b:last-child {
  @apply border-b-0;
}
</style>
