<template>
  <text 
    class="status-badge" 
    :class="[`status-${type}`, size && `size-${size}`]"
  >
    {{ text }}
  </text>
</template>

<script setup>
import { computed } from 'vue'
import { 
  APPLICATION_STATUS_TEXT, 
  POLICY_STATUS_TEXT, 
  CLAIM_STATUS_TEXT 
} from '@/utils/constants'

// 定义属性
const props = defineProps({
  status: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'application', 'policy', 'claim'].includes(value)
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  }
})

// 计算显示文本
const text = computed(() => {
  switch (props.type) {
    case 'application':
      return APPLICATION_STATUS_TEXT[props.status] || props.status
    case 'policy':
      return POLICY_STATUS_TEXT[props.status] || props.status
    case 'claim':
      return CLAIM_STATUS_TEXT[props.status] || props.status
    default:
      return props.status
  }
})
</script>

<style scoped>
.status-badge {
  display: inline-block;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

/* 尺寸变体 */
.size-small {
  padding: 4rpx 12rpx;
  font-size: 20rpx;
}

.size-normal {
  padding: 6rpx 16rpx;
  font-size: 22rpx;
}

.size-large {
  padding: 8rpx 20rpx;
  font-size: 24rpx;
}

/* 默认状态样式 */
.status-default {
  background: #f5f5f5;
  color: #666;
}

/* 申请状态样式 */
.status-pending {
  background: #fff7e6;
  color: #faad14;
}

.status-under_review {
  background: #e6f7ff;
  color: #1890ff;
}

.status-approved {
  background: #f6ffed;
  color: #52c41a;
}

.status-rejected {
  background: #fff2f0;
  color: #f5222d;
}

/* 保单状态样式 */
.status-active {
  background: #f6ffed;
  color: #52c41a;
}

.status-expired {
  background: #f5f5f5;
  color: #999;
}

.status-cancelled {
  background: #fff2f0;
  color: #f5222d;
}

.status-suspended {
  background: #fff7e6;
  color: #faad14;
}

/* 理赔状态样式 */
.status-reviewing {
  background: #e6f7ff;
  color: #1890ff;
}

.status-paid {
  background: #f6ffed;
  color: #52c41a;
}
</style>