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

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

interface Props {
  /** 消息状态：draft-草稿/pending-待发送/sending-发送中/sent-已发送/failed-发送失败/cancelled-已取消 */
  status: string;
}

const props = defineProps<Props>();

/** 状态文本映射 */
const statusText = computed(() => {
  const map: Record<string, string> = {
    draft: '草稿',
    pending: '待发送',
    sending: '发送中',
    sent: '已发送',
    failed: '发送失败',
    cancelled: '已取消'
  };
  return map[props.status] || props.status;
});
</script>

<style lang="scss" scoped>
.message-status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;

  &.status-draft {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
  }

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

  &.status-sending {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #90caf9;
  }

  &.status-sent {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
  }

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

  &.status-cancelled {
    background-color: #fafafa;
    color: #999;
    border: 1px solid #e0e0e0;
  }
}
</style>
