<template>
  <span class="message-priority-badge" :class="`priority-${priority}`">
    {{ priorityText }}
  </span>
</template>

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

interface Props {
  /** 优先级：urgent-紧急/important-重要/normal-普通 */
  priority: string;
}

const props = defineProps<Props>();

/** 优先级文本映射 */
const priorityText = computed(() => {
  const map: Record<string, string> = {
    urgent: '紧急',
    important: '重要',
    normal: '普通'
  };
  return map[props.priority] || props.priority;
});
</script>

<style lang="scss" scoped>
.message-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;

  &.priority-urgent {
    background-color: #fee;
    color: #c00;
    border: 1px solid #fcc;
  }

  &.priority-important {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc80;
  }

  &.priority-normal {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
  }
}
</style>
