<template>
  <div class="risk-warning-section card">
    <LTitle title="规则风险提示" type="red" class="mb-4" />

    <!-- 总风险统计 -->
    <div class="total-risk-summary mb-4">
      <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z">
                </path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">总风险统计</span>
          </div>
          <div class="text-right">
            <div class="text-2xl font-bold text-red-600">{{ riskWarning.totalRiskCounts || 0 }}</div>
            <div class="text-sm text-gray-600">总风险点数量</div>
          </div>
        </div>

        <!-- 风险等级分布 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div class="risk-level-item">
            <div class="text-sm text-gray-600">高风险</div>
            <div class="text-lg font-bold text-red-600">{{ getHighRiskCount() }}</div>
          </div>
          <div class="risk-level-item">
            <div class="text-sm text-gray-600">中风险</div>
            <div class="text-lg font-bold text-orange-600">{{ getMiddleRiskCount() }}</div>
          </div>
          <div class="risk-level-item">
            <div class="text-sm text-gray-600">风险等级</div>
            <div class="text-lg font-bold text-gray-600">{{ riskWarning.level || '-' }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 各模块风险详情 -->
    <div class="module-risks">
      <!-- 要素核查 -->
      <div v-if="getElementVerificationRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">要素核查</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                {{ getElementVerificationRisks().length }}条风险
              </span>
            </div>
          </div>w'w'w'w'w'w'w'w'w'w
          <div class="risk-list">
            <div v-for="risk in getElementVerificationRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 运营商核验 -->
      <div v-if="getOperatorVerificationRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">运营商核验</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
                {{ getOperatorVerificationRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getOperatorVerificationRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 公安重点人员核验 -->
      <div v-if="getPoliceVerificationRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z">
                </path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">公安重点人员核验</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">
                {{ getPoliceVerificationRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getPoliceVerificationRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 逾期风险 -->
      <div v-if="getOverdueRiskRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1">
                </path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">逾期风险</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-700">
                {{ getOverdueRiskRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getOverdueRiskRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 法院曝光台信息 -->
      <div v-if="getCourtRiskRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                </path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">法院曝光台信息</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
                {{ getCourtRiskRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getCourtRiskRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 借贷评估 -->
      <div v-if="getLoanEvaluationRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-yellow-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">借贷评估</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">
                {{ getLoanEvaluationRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getLoanEvaluationRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 租赁风险评估 -->
      <div v-if="getLeasingRiskRisks().length > 0" class="risk-module mb-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <div class="flex items-center mb-3">
            <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center mr-2">
              <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
                </path>
              </svg>
            </div>
            <span class="font-bold text-gray-800">租赁风险评估</span>
            <div class="ml-auto">
              <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">
                {{ getLeasingRiskRisks().length }}条风险
              </span>
            </div>
          </div>
          <div class="risk-list">
            <div v-for="risk in getLeasingRiskRisks()" :key="risk.key" class="risk-item">
              <div class="flex items-center justify-between">
                <div class="risk-description">
                  <div class="font-medium">{{ risk.description }}</div>
                  <div class="text-sm text-gray-600">{{ risk.detail }}</div>
                </div>
                <div class="risk-level-badge" :class="getRiskLevelClass(risk.level)">
                  {{ risk.level }}
                </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 riskWarning = computed(() => props.data?.riskWarning || {});

// 风险等级样式
const getRiskLevelClass = (level) => {
  if (level === '高风险') return 'bg-red-100 text-red-700'
  if (level === '中风险') return 'bg-orange-100 text-orange-700'
  return 'bg-gray-100 text-gray-700'
}

// 获取高风险数量
const getHighRiskCount = () => {
  const highRiskFields = [
    'idCardTwoElementMismatch', 'phoneThreeElementMismatch',
    'shortPhoneDuration', 'noPhoneDuration',
    'hasCriminalRecord', 'isEconomyFront', 'isDisrupSocial', 'isKeyPerson', 'isTrafficRelated',
    'hitHighRiskBankLastTwoYears', 'hitHighRiskNonBankLastTwoYears',
    'hitCivilCase', 'hitCriminalRisk', 'hitAdministrativeCase', 'hitPreservationReview',
    'hitExecutionCase', 'hitBankruptcyAndLiquidation', 'hitDirectlyUnderCase', 'hitCompensationCase',
    'frequentApplicationRecent', 'frequentNonBankApplications', 'highDebtPressure', 'frequentBankApplications',
    'frequentRentalApplications', 'veryFrequentRentalApplications'
  ]

  return highRiskFields.reduce((count, field) => {
    return count + (riskWarning[field] || 0)
  }, 0)
}

// 获取中风险数量
const getMiddleRiskCount = () => {
  const middleRiskFields = [
    'idCardPhoneProvinceMismatch', 'isAntiFraudInfo',
    'hitCurrentOverdue',
    'moreFrequentNonBankApplications', 'highFraudGangLevel', 'moreFrequentBankApplications'
  ]

  return middleRiskFields.reduce((count, field) => {
    return count + (riskWarning[field] || 0)
  }, 0)
}

// 要素核查风险
const getElementVerificationRisks = () => {
  const risks = []

  if (riskWarning.idCardTwoElementMismatch) {
    risks.push({
      key: 'idCardTwoElementMismatch',
      description: '身份证二要素信息对比结果不一致',
      detail: '身份证号与姓名信息不匹配',
      level: '高风险'
    })
  }

  if (riskWarning.phoneThreeElementMismatch) {
    risks.push({
      key: 'phoneThreeElementMismatch',
      description: '手机三要素简版不一致',
      detail: '手机号与身份证号、姓名信息不匹配',
      level: '高风险'
    })
  }

  return risks
}

// 运营商核验风险
const getOperatorVerificationRisks = () => {
  const risks = []

  if (riskWarning.shortPhoneDuration) {
    risks.push({
      key: 'shortPhoneDuration',
      description: '手机在网时长极短',
      detail: '手机号在网时间过短，存在风险',
      level: '高风险'
    })
  }

  if (riskWarning.shortPhoneDurationSlight) {
    risks.push({
      key: 'shortPhoneDurationSlight',
      description: '手机在网时长较短',
      detail: '手机号在网时间较短，存在风险',
      level: '高风险'
    })
  }

  if (riskWarning.idCardPhoneProvinceMismatch) {
    risks.push({
      key: 'idCardPhoneProvinceMismatch',
      description: '身份证号手机号归属省不一致',
      detail: '身份证归属地与手机号归属地不匹配',
      level: '中风险'
    })
  }

  if (riskWarning.noPhoneDuration) {
    risks.push({
      key: 'noPhoneDuration',
      description: '手机在网状态为风险号',
      detail: '手机号状态异常，存在风险',
      level: '高风险'
    })
  }

  return risks
}

// 公安重点人员核验风险
const getPoliceVerificationRisks = () => {
  const risks = []

  if (riskWarning.hasCriminalRecord) {
    risks.push({
      key: 'hasCriminalRecord',
      description: '该用户有前科',
      detail: '用户存在犯罪前科记录',
      level: '高风险'
    })
  }

  if (riskWarning.isEconomyFront) {
    risks.push({
      key: 'isEconomyFront',
      description: '该用户有经济类前科',
      detail: '用户存在经济类犯罪前科',
      level: '高风险'
    })
  }

  if (riskWarning.isDisrupSocial) {
    risks.push({
      key: 'isDisrupSocial',
      description: '该用户有妨害社会管理秩序',
      detail: '用户存在妨害社会管理秩序记录',
      level: '高风险'
    })
  }

  if (riskWarning.isKeyPerson) {
    risks.push({
      key: 'isKeyPerson',
      description: '该用户为重点人员',
      detail: '用户被列为重点监管人员',
      level: '高风险'
    })
  }

  if (riskWarning.isTrafficRelated) {
    risks.push({
      key: 'isTrafficRelated',
      description: '该用户为涉交通案件',
      detail: '用户存在交通相关案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.isAntiFraudInfo) {
    risks.push({
      key: 'isAntiFraudInfo',
      description: '该用户为涉赌涉诈',
      detail: '用户存在涉赌涉诈相关风险',
      level: '中风险'
    })
  }

  return risks
}

// 逾期风险
const getOverdueRiskRisks = () => {
  const risks = []

  if (riskWarning.hitHighRiskBankLastTwoYears) {
    risks.push({
      key: 'hitHighRiskBankLastTwoYears',
      description: '近两年命中银行高风险',
      detail: '近两年在银行机构存在高风险记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitHighRiskNonBankLastTwoYears) {
    risks.push({
      key: 'hitHighRiskNonBankLastTwoYears',
      description: '近两年命中非银高风险',
      detail: '近两年在非银行机构存在高风险记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitCurrentOverdue) {
    risks.push({
      key: 'hitCurrentOverdue',
      description: '该用户命中当前逾期',
      detail: '用户当前存在逾期记录',
      level: '中风险'
    })
  }

  return risks
}

// 法院曝光台信息
const getCourtRiskRisks = () => {
  const risks = []

  if (riskWarning.hitCivilCase) {
    risks.push({
      key: 'hitCivilCase',
      description: '该用户命中民事案件',
      detail: '用户存在民事案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitCriminalRisk) {
    risks.push({
      key: 'hitCriminalRisk',
      description: '该用户命中刑事风险',
      detail: '用户存在刑事风险记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitAdministrativeCase) {
    risks.push({
      key: 'hitAdministrativeCase',
      description: '该用户命中行政案件',
      detail: '用户存在行政案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitPreservationReview) {
    risks.push({
      key: 'hitPreservationReview',
      description: '该用户命中保全审查',
      detail: '用户存在保全审查记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitExecutionCase) {
    risks.push({
      key: 'hitExecutionCase',
      description: '该用户命中执行案件',
      detail: '用户存在执行案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitBankruptcyAndLiquidation) {
    risks.push({
      key: 'hitBankruptcyAndLiquidation',
      description: '该用户命中强制清算与破产案件',
      detail: '用户存在破产清算案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitDirectlyUnderCase) {
    risks.push({
      key: 'hitDirectlyUnderCase',
      description: '该用户命中直辖案件',
      detail: '用户存在直辖案件记录',
      level: '高风险'
    })
  }

  if (riskWarning.hitCompensationCase) {
    risks.push({
      key: 'hitCompensationCase',
      description: '该用户命中赔偿案件',
      detail: '用户存在赔偿案件记录',
      level: '高风险'
    })
  }

  return risks
}

// 借贷评估风险
const getLoanEvaluationRisks = () => {
  const risks = []

  if (riskWarning.frequentApplicationRecent) {
    risks.push({
      key: 'frequentApplicationRecent',
      description: '近期申请机构极为频繁',
      detail: '近期在多个机构频繁申请贷款',
      level: '高风险'
    })
  }

  if (riskWarning.frequentNonBankApplications) {
    risks.push({
      key: 'frequentNonBankApplications',
      description: '在非银机构申请次数极多',
      detail: '在非银行机构申请次数过多',
      level: '高风险'
    })
  }

  if (riskWarning.highDebtPressure) {
    risks.push({
      key: 'highDebtPressure',
      description: '偿债压力极高',
      detail: '用户偿债压力过大',
      level: '高风险'
    })
  }

  if (riskWarning.frequentBankApplications) {
    risks.push({
      key: 'frequentBankApplications',
      description: '在银行机构申请次数极多',
      detail: '在银行机构申请次数过多',
      level: '高风险'
    })
  }

  if (riskWarning.moreFrequentNonBankApplications) {
    risks.push({
      key: 'moreFrequentNonBankApplications',
      description: '在非银机构申请次数较多',
      detail: '在非银行机构申请次数较多',
      level: '中风险'
    })
  }

  if (riskWarning.highFraudGangLevel) {
    risks.push({
      key: 'highFraudGangLevel',
      description: '欺诈团伙等级较高',
      detail: '用户存在欺诈团伙关联风险',
      level: '中风险'
    })
  }

  if (riskWarning.moreFrequentBankApplications) {
    risks.push({
      key: 'moreFrequentBankApplications',
      description: '在银行机构申请次数较多',
      detail: '在银行机构申请次数较多',
      level: '中风险'
    })
  }

  return risks
}

// 租赁风险评估风险
const getLeasingRiskRisks = () => {
  const risks = []

  if (riskWarning.frequentRentalApplications) {
    risks.push({
      key: 'frequentRentalApplications',
      description: '在租赁机构申请极为频繁',
      detail: '在租赁机构申请过于频繁',
      level: '高风险'
    })
  }

  if (riskWarning.veryFrequentRentalApplications) {
    risks.push({
      key: 'veryFrequentRentalApplications',
      description: '在租赁机构申请次数极多',
      detail: '在租赁机构申请次数过多',
      level: '高风险'
    })
  }

  return risks
}

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

  // 获取高风险数量
  const highRiskCount = getHighRiskCount();
  const middleRiskCount = getMiddleRiskCount();

  // 高风险数量越多，分数越低
  let score = 100;

  // 高风险扣分（每个高风险扣10分）
  score -= highRiskCount * 10;

  // 中风险扣分（每个中风险扣5分）
  score -= middleRiskCount * 5;

  // 确保分数在合理范围内
  return Math.max(20, Math.min(100, score));
});

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

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

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

.total-risk-summary {
  .risk-level-item {
    @apply text-center p-2;
  }
}

.risk-module {
  .risk-list {
    @apply space-y-2;
  }

  .risk-item {
    @apply p-3 bg-gray-50 rounded-lg border border-gray-200;
  }

  .risk-description {
    @apply flex-1;
  }

  .risk-level-badge {
    @apply px-2 py-1 rounded-full text-xs font-medium;
  }
}
</style>