<template>
  <div class="card rounded-lg border border-gray-200 mb-2">
    <div class="flex items-center justify-between px-4 pt-4 pb-2">
      <div>
        <div class="text-sm text-gray-500">支付行为评分</div>
        <div class="flex items-baseline gap-2 mt-1">
          <span class="text-3xl font-bold text-[#111827]">
            {{ scoreDisplay }}
          </span>
          <span class="text-sm text-gray-400">分</span>
          <span
            class="inline-flex items-center px-2 py-0.5 rounded-full text-sm"
            :class="levelClass"
          >
            {{ level }}
          </span>
        </div>
      </div>
      <div class="text-right text-sm text-gray-500 max-w-[11rem] leading-relaxed">
        分数基于近两年查验及还款行为综合评估，分数越高代表支付行为越稳定、违约风险越低。
      </div>
    </div>
    <div class="px-4 pb-4 text-sm text-gray-500">
      最近一次查验距今天数：
      <span class="font-medium text-[#111827]">{{ latestQueryText }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { getBehavLevel, mapScoreTo100 } from '../utils/dataParser'

const props = defineProps({
  score: {
    type: Number,
    default: 0
  },
  latestQueryText: {
    type: String,
    default: '暂无查验记录'
  }
})

const scoreDisplay = computed(() => (props.score > 0 ? props.score : '--'))

const level = computed(() => getBehavLevel(props.score))

// 按等级给不同颜色
const levelClass = computed(() => {
  const mapped = mapScoreTo100(props.score)
  if (mapped >= 85) {
    return 'bg-emerald-50 text-emerald-600'
  }
  if (mapped >= 70) {
    return 'bg-blue-50 text-blue-600'
  }
  if (mapped >= 55) {
    return 'bg-amber-50 text-amber-600'
  }
  return 'bg-red-50 text-red-600'
})
</script>

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


