<template>
  <div class="card">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
      <div class="flex items-center mb-4 p-4">
        <div class="w-8 h-8 flex items-center justify-center mr-2">
          <img src="@/assets/images/report/jdpg.png" alt="多头共债子分" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">多头共债子分</span>
      </div>
      <div class="mt-4">
        <!-- 评分概览 -->
        <div class="mb-6">
          <LTitle title="评分概览" />
          <div class="grid grid-cols-2 gap-4 p-4">
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold" :class="getScoreClass(data.general)">
                {{ formatScore(data.general) }}
              </div>
              <div class="text-sm text-gray-600 mt-1">多头申请通用分</div>
            </div>
            <div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
              <div class="text-2xl font-bold" :class="getScoreClass(data.shortCycle)">
                {{ formatScore(data.shortCycle) }}
              </div>
              <div class="text-sm text-gray-600 mt-1">短周期多头共债子分</div>
            </div>
          </div>
        </div>

        <!-- 详细评分 -->
        <div class="mb-6">
          <LTitle title="详细评分" />
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">长周期多头共债子分</span>
              <span class="text-[#333333] font-bold" :class="getScoreClass(data.longCycle)">
                {{ formatScore(data.longCycle) }}
              </span>
            </div>
            <div class="text-sm text-gray-500 ml-2">长周期指窗口期6个月+</div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">非银行多头共债子分</span>
              <span class="text-[#333333] font-bold" :class="getScoreClass(data.nonBank)">
                {{ formatScore(data.nonBank) }}
              </span>
            </div>
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">银行多头共债子分</span>
              <span class="text-[#333333] font-bold" :class="getScoreClass(data.bank)">
                {{ formatScore(data.bank) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 说明 -->
        <div class="p-4">
          <div class="text-sm text-gray-500">
            <div>注：分数区间为0～100分，分数越高风险越大</div>
            <div class="mt-1">短周期指窗口期7天～3个月</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LTitle from '@/components/LTitle.vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const formatScore = (score) => {
  if (score === undefined || score === null) return '-'
  return score
}

const getScoreClass = (score) => {
  if (score === undefined || score === null) return 'text-gray-400'
  if (score >= 80) return 'text-red-600'
  if (score >= 60) return 'text-orange-500'
  if (score >= 40) return 'text-yellow-500'
  return 'text-[#1FBE5D]'
}
</script>

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

