<template>
  <div class="card rounded-lg border border-gray-200 pb-2 mb-2">
    <div class="px-4 pt-4 pb-4">
      <LTitle title="风险汇总" />
      <div class="space-y-0 mt-3 rounded-lg overflow-hidden">
        <div v-for="(risk, index) in riskSummary" :key="risk.label"
          :class="['flex justify-between items-center text-lg py-4 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
          <span class="text-gray-600">{{ risk.label }}</span>
          <span class="font-semibold text-xl" :class="getRiskClass(risk.value)">{{ risk.value }}</span>
        </div>
      </div>
    </div>

    <!-- 风险汇总解读 -->
    <Remark :content="riskRemark" title="风险解读" :default-expanded="true" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getRiskSummary, generateRiskRemark } from '../utils/dataParser'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  // 维度：id（身份证） / cell（手机号）
  dimension: {
    type: String,
    default: 'id',
  },
})

// 风险汇总
const riskSummary = computed(() => {
  return getRiskSummary(props.data || {}, props.dimension)
})

// 风险汇总解读文本
const riskRemark = computed(() => {
  return generateRiskRemark(riskSummary.value)
})

// 根据风险等级返回对应的样式类
const getRiskClass = (level) => {
  switch (level) {
    case '无风险':
      return 'text-green-600'
    case '低风险':
      return 'text-blue-600'
    case '中风险':
      return 'text-amber-600'
    case '高风险':
      return 'text-red-600'
    default:
      return 'text-gray-600'
  }
}
</script>

<style scoped>
.card {
  background: #ffffff;
}
</style>
