<template>
  <el-tag :type="tagType" :effect="effect" size="small" class="confidence-badge">
    {{ grade }}\u7ea7 {{ label }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  grade: string
  score?: number
  effect?: string
}>()

const gradeConfig: Record<string, { type: string; label: string }> = {
  A: { type: 'success', label: '\u9ad8\u7f6e\u4fe1' },
  B: { type: '', label: '\u4e2d\u9ad8\u7f6e\u4fe1' },
  C: { type: 'warning', label: '\u4e2d\u7f6e\u4fe1' },
  D: { type: 'danger', label: '\u4f4e\u7f6e\u4fe1' },
}

const tagType = computed(() => gradeConfig[props.grade]?.type || 'info')
const label = computed(() => gradeConfig[props.grade]?.label || '\u672a\u77e5')
</script>

<style scoped>
.confidence-badge {
  font-weight: 600;
}
</style>
