<template>
  <view class="order-quick-nav">
    <view class="nav-header" @click="handleViewAll">
      <text class="nav-title">我的订单</text>
      <view class="nav-more">
        <text class="more-text">全部订单</text>
        <u-icon name="arrow-right" :size="14" color="#9CA3AF"></u-icon>
      </view>
    </view>
    <view class="nav-grid">
      <view
        v-for="item in items"
        :key="item.status"
        class="nav-item"
        @click="handleItemTap(item.status)"
      >
        <view class="item-icon" :style="{ background: item.bgColor }">
          <u-icon :name="item.icon" :size="24" :color="item.iconColor"></u-icon>
        </view>
        <text class="item-label">{{ item.label }}</text>
        <view v-if="item.badge && item.badge > 0" class="item-badge">
          <text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface OrderNavItem {
  status: string
  label: string
  icon: string
  iconColor: string
  bgColor: string
  badge?: number
}

interface Props {
  items?: OrderNavItem[]
}

withDefaults(defineProps<Props>(), {
  items: () => [
    { status: 'pending', label: '待支付', icon: 'clock', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
    { status: 'confirmed', label: '待入住', icon: 'calendar', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
    { status: 'completed', label: '已完成', icon: 'checkmark-circle', iconColor: '#1A1A1A', bgColor: '#FFFFFF' },
    { status: 'cancelled', label: '已取消', icon: 'close-circle', iconColor: '#1A1A1A', bgColor: '#FFFFFF' }
  ]
})

const emit = defineEmits<{
  (e: 'item-tap', status: string): void
  (e: 'view-all'): void
}>()

function handleItemTap(status: string) {
  emit('item-tap', status)
}

function handleViewAll() {
  emit('view-all')
}
</script>

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

.order-quick-nav {
  background: $bg-card;
  margin: -$spacing-xl $spacing-2xl $spacing-lg;
  border-radius: $radius-lg;
  padding: $spacing-xl $spacing-lg;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.nav-header {
  @include flex-between;
  margin-bottom: $spacing-lg;
}

.nav-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
}

.nav-more {
  @include flex-row(flex-end, center);
  gap: 4rpx;
}

.more-text {
  font-size: $font-sm;
  color: $text-tertiary;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: $spacing-md;
}

.nav-item {
  position: relative;
  @include flex-column(center, center);
  gap: $spacing-sm;
  padding: $spacing-md 0;
  transition: $transition-transform;

  &:active {
    transform: scale(0.95);
  }
}

.item-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: $radius-base;
  @include flex-center;
}

.item-label {
  font-size: $font-xs;
  color: $text-secondary;
  font-weight: $font-medium;
}

.item-badge {
  position: absolute;
  top: 8rpx;
  right: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  background: $error-color;
  border-radius: $radius-round;
  padding: 0 8rpx;
  @include flex-center;
}

.badge-text {
  font-size: 20rpx;
  color: $text-inverse;
  font-weight: $font-semibold;
  line-height: 1;
  transform: scale(0.9);
}
</style>
