<template>
  <view
    class="status-badge"
    :class="[
      `badge-${variant}`,
      `badge-${size}`,
      `badge-status-${statusType}`
    ]"
    :style="customStyle"
  >
    <!-- 点状指示器 -->
    <view v-if="showDot" class="badge-dot"></view>

    <!-- 文字 -->
    <text class="badge-text">{{ displayText }}</text>
  </view>
</template>

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

type OrderStatus =
  | 'pending_pay'        // 待支付
  | 'pending_confirm'    // 待确认
  | 'confirmed'          // 已确认
  | 'checked_in'         // 已入住
  | 'completed'          // 已完成
  | 'cancelled'          // 已取消
  | 'refunding'          // 退款中
  | 'refunded'           // 已退款

type StatusVariant = 'solid' | 'outline' | 'dot'
type StatusSize = 'small' | 'medium' | 'large'

interface Props {
  status?: OrderStatus | string  // 订单状态
  text?: string                  // 自定义文字
  variant?: StatusVariant        // 样式变体
  size?: StatusSize              // 尺寸
  icon?: string                  // 自定义图标
  showDot?: boolean              // 是否显示点状指示器
  color?: string                 // 自定义颜色
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'solid',
  size: 'medium',
  showDot: false
})

// 状态配置
const statusConfig: Record<string, { text: string; type: string; icon?: string }> = {
  pending_pay: { text: '待支付', type: 'warning', icon: 'clock' },
  pending_confirm: { text: '待确认', type: 'info', icon: 'hourglass' },
  confirmed: { text: '已确认', type: 'success', icon: 'checkmark-circle' },
  checked_in: { text: '已入住', type: 'primary', icon: 'home' },
  completed: { text: '已完成', type: 'success', icon: 'checkmark-circle' },
  cancelled: { text: '已取消', type: 'default', icon: 'close-circle' },
  refunding: { text: '退款中', type: 'warning', icon: 'refresh' },
  refunded: { text: '已退款', type: 'default', icon: 'arrow-back' }
}

// 显示文字
const displayText = computed(() => {
  if (props.text) return props.text
  if (props.status && statusConfig[props.status]) {
    return statusConfig[props.status].text
  }
  return props.status || ''
})

// 状态类型
const statusType = computed(() => {
  if (props.status && statusConfig[props.status]) {
    return statusConfig[props.status].type
  }
  return 'default'
})

// 图标
const icon = computed(() => {
  if (props.icon) return props.icon
  if (props.status && statusConfig[props.status]) {
    return statusConfig[props.status].icon
  }
  return ''
})

// 图标尺寸
const iconSize = computed(() => {
  const sizeMap = {
    small: 20,
    medium: 24,
    large: 28
  }
  return sizeMap[props.size]
})

// 自定义样式
const customStyle = computed(() => {
  if (props.color) {
    return {
      color: props.variant === 'solid' ? '#FFFFFF' : props.color,
      backgroundColor: props.variant === 'solid' ? props.color : 'transparent',
      borderColor: props.color
    }
  }
  return {}
})
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
  border-radius: $radius-xs;
  font-weight: $font-medium;
  white-space: nowrap;
  transition: $transition-all;
}

/* ========== 尺寸 ========== */
.badge-small {
  padding: 4rpx 12rpx;
  font-size: $font-xs;
  height: 40rpx;
}

.badge-medium {
  padding: 6rpx 16rpx;
  font-size: $font-sm;
  height: 48rpx;
}

.badge-large {
  padding: 8rpx 20rpx;
  font-size: $font-base;
  height: 56rpx;
}

/* ========== 样式变体 ========== */

/* 实心样式 */
.badge-solid {
  border: none;
}

/* 描边样式 */
.badge-outline {
  background: transparent;
  border: 1rpx solid;
}

/* 点状样式 */
.badge-dot {
  background: transparent;
  padding-left: 24rpx;
  position: relative;

  .badge-dot {
    position: absolute;
    left: 8rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
  }
}

/* ========== 状态颜色 ========== */

/* 默认 */
.badge-status-default.badge-solid {
  background: $gray-100;
  color: $text-secondary;
}

.badge-status-default.badge-outline {
  border-color: $gray-300;
  color: $text-secondary;
}

.badge-status-default .badge-dot {
  background: $gray-400;
}

/* 主色 */
.badge-status-primary.badge-solid {
  background: $gradient-primary;
  color: $text-inverse;
}

.badge-status-primary.badge-outline {
  border-color: $primary-color;
  color: $primary-color;
}

.badge-status-primary .badge-dot {
  background: $primary-color;
}

/* 成功 */
.badge-status-success.badge-solid {
  background: $success-bg;
  color: $success-color;
}

.badge-status-success.badge-outline {
  border-color: $success-color;
  color: $success-color;
}

.badge-status-success .badge-dot {
  background: $success-color;
}

/* 警告 */
.badge-status-warning.badge-solid {
  background: $warning-bg;
  color: $warning-color;
}

.badge-status-warning.badge-outline {
  border-color: $warning-color;
  color: $warning-color;
}

.badge-status-warning .badge-dot {
  background: $warning-color;
}

/* 错误 */
.badge-status-error.badge-solid {
  background: $error-bg;
  color: $error-color;
}

.badge-status-error.badge-outline {
  border-color: $error-color;
  color: $error-color;
}

.badge-status-error .badge-dot {
  background: $error-color;
}

/* 信息 */
.badge-status-info.badge-solid {
  background: $info-bg;
  color: $info-color;
}

.badge-status-info.badge-outline {
  border-color: $info-color;
  color: $info-color;
}

.badge-status-info .badge-dot {
  background: $info-color;
}

/* ========== 图标和文字 ========== */
.badge-icon {
  flex-shrink: 0;
}

.badge-text {
  line-height: 1;
}
</style>
