<template>
  <div class="element-verification card">
    <LTitle title="要素核查" class="mb-4" />

    <!-- 身份证二要素验证 -->
    <div class="verification-section mb-4">
      <div class="bg-white rounded-lg border border-gray-200 p-4 relative">
        <div class="absolute top-0 right-0">
          <div class="px-2 py-1 text-xs text-white bg-[#4CAF50] rounded-bl-xl rounded-tr-xl">
            {{ getRiskFlagText(sfzeysFlag) }}
          </div>
        </div>
        <div class="flex items-center mb-3">
          <div class="w-10 h-10 flex items-center justify-center mr-3">
            <img src="@/assets/images/report/sfz.png" alt="身份证" class="w-10 h-10 object-contain" />
          </div>
          <span class="font-bold text-gray-800">身份证二要素验证</span>
        </div>

        <div v-if="personCheckDetails" class="verification-details">
          <div class="rounded-lg p-4 relative" :class="getVerificationResultClass(personCheckDetails.result)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getResultTagClass(personCheckDetails.result)">
                {{ getResultText(personCheckDetails.result) }}
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-10 h-10 mr-4">
                <img :src="getResultIcon(personCheckDetails.result)" :alt="getResultText(personCheckDetails.result)"
                  class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="font-bold text-gray-800">{{ personCheckDetails.ele || '身份证号、姓名' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机三要素验证 -->
    <div class="verification-section mb-4">
      <div class="bg-white rounded-lg border border-gray-200 p-4 relative">
        <div class="absolute top-0 right-0">
          <div class="px-2 py-1 text-xs text-white bg-[#E53935] rounded-bl-xl rounded-tr-xl">
            {{ getRiskFlagText(sjsysFlag) }}
          </div>
        </div>
        <div class="flex items-center mb-3">
          <div class="w-10 h-10 flex items-center justify-center mr-3">
            <img src="@/assets/images/report/sjh.png" alt="手机号" class="w-10 h-10 object-contain" />
          </div>
          <span class="font-bold text-gray-800">手机三要素验证</span>
        </div>

        <div v-if="phoneCheckDetails" class="verification-details">
          <div class="rounded-lg p-4 relative" :class="getVerificationResultClass(phoneCheckDetails.result)">
            <div class="absolute top-0 right-0">
              <div class="px-2 py-1 text-xs text-white rounded-bl-xl rounded-tr-xl"
                :class="getResultTagClass(phoneCheckDetails.result)">
                {{ getResultText(phoneCheckDetails.result) }}
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-10 h-10 mr-4">
                <img :src="getResultIcon(phoneCheckDetails.result)" :alt="getResultText(phoneCheckDetails.result)"
                  class="w-8 h-8 object-contain" />
              </div>
              <div class="flex-1">
                <div class="font-bold text-gray-800">{{ phoneCheckDetails.ele || '身份证号、手机号、姓名' }}</div>
                <div class="text-sm text-gray-600">{{ phoneCheckDetails.phoneCompany || '运营商: 中国移动' }}</div>
              </div>
            </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 {
  sfzeysFlag = 0,
  personCheckDetails = {},
  sjsysFlag = 0,
  phoneCheckDetails = {}
} = props.data

// 风险标识相关函数
const getRiskFlagClass = (flag) => {
  if (flag === 1) return 'bg-[#E53935]'
  if (flag === 2) return 'bg-[#4CAF50]'
  return 'bg-gray-500'
}

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

// 校验结果相关函数
const getResultClass = (result) => {
  if (result === '一致') return 'text-green-600'
  if (result === '不一致') return 'text-red-600'
  return 'text-gray-600'
}

const getResultText = (result) => {
  if (result === '一致') return '核验一致'
  if (result === '不一致') return '核验不一致'
  return result || '未查得'
}

// 验证结果背景样式
const getVerificationResultClass = (result) => {
  if (result === '一致') return 'bg-[#F0FFF0] border border-green-200'
  if (result === '不一致') return 'bg-[#FFF0F0] border border-red-200'
  return 'bg-gray-50 border border-gray-200'
}

// 结果标签颜色
const getResultTagClass = (result) => {
  if (result === '一致') return 'bg-[#4CAF50]'
  if (result === '不一致') return 'bg-[#E53935]'
  return 'bg-gray-500'
}

// 结果图标
const getResultIcon = (result) => {
  if (result === '一致') return new URL('@/assets/images/report/zq.png', import.meta.url).href
  if (result === '不一致') return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 身份证二要素验证不一致 -> 高风险 -> 20分
  if (sfzeysFlag.value === 1) {
    return 20;
  }
  // 手机三要素验证不一致 -> 高风险 -> 30分
  if (sjsysFlag.value === 1) {
    return 30;
  }
  // 都一致 -> 低风险 -> 100分
  return 100;
});

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

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

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

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

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