<template>
  <div class="card rounded-lg border border-gray-200 pb-2 mb-2">
    <div class="flex items-center justify-between mb-4 px-4 pt-4">
      <span class="font-bold text-gray-800">借贷意向统计概览</span>
      <!-- 维度切换按钮组 -->
      <div class="inline-flex rounded-full overflow-hidden text-sm">
        <button class="px-4 py-1 border border-[#2B79EE] rounded-l-full"
          :class="dimension === 'id' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
          @click="$emit('update:dimension', 'id')">
          身份证匹配
        </button>
        <button class="px-4 py-1 border border-[#2B79EE] border-l-0 rounded-r-full"
          :class="dimension === 'cell' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
          @click="$emit('update:dimension', 'cell')">
          手机号匹配
        </button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-4 px-4 pb-4">
      <div v-for="item in items" :key="item.label"
        class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]">
        <div class="text-xl font-bold text-[#111827]">
          {{ item.value }}
          <span class="text-sm text-gray-500 ml-1">{{ item.unit }}</span>
        </div>
        <div class="text-sm text-gray-600 mt-1">
          {{ item.label }}
        </div>
      </div>
    </div>

    <!-- 风险汇总 -->
    <div class="px-4 pb-4 mt-4">
      <LTitle title="风险汇总" />
      <div class="space-y-2 mt-3">
        <div v-for="risk in riskSummary" :key="risk.label" class="flex justify-between items-center text-sm">
          <span class="text-gray-600">{{ risk.label }}</span>
          <span class="font-semibold" :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 { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails, getRiskSummary, generateRiskRemark } from '../utils/dataParser'

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

const items = computed(() => {
  const v = props.data || {}

  // 近12个月申请次数（总/银行/非银）
  const m12 = getApplicationCounts(v, 'm12', props.dimension)

  // 近12个月申请机构总数（银行+非银）
  const bankOrgs = getBankOrgDetails(v, 'm12', props.dimension)
  const nbankOrgs = getNBankOrgDetails(v, 'm12', props.dimension)
  const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
  const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
  const orgTotal = bankOrgTotal + nbankOrgTotal

  // 近12个月周末 / 夜间申请次数（银行+非银）
  const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
  const weekendTotal =
    Number(v[`als_m12_${dimKey}_bank_week_allnum`] || 0) +
    Number(v[`als_m12_${dimKey}_nbank_week_allnum`] || 0)
  const nightTotal =
    Number(v[`als_m12_${dimKey}_bank_night_allnum`] || 0) +
    Number(v[`als_m12_${dimKey}_nbank_night_allnum`] || 0)

  return [
    { label: '总申请次数', value: m12.total || 0, unit: '次' },
    { label: '总申请机构数', value: orgTotal || 0, unit: '家' },
    { label: '银行申请次数', value: m12.bank || 0, unit: '次' },
    { label: '非银申请次数', value: m12.nbank || 0, unit: '次' },
    { label: '夜间申请次数', value: nightTotal || 0, unit: '次' },
    { label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
  ]
})

// 风险汇总
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>
