<template>
  <base-card class="guest-selector" variant="elevated" :clickable="true" @click="handleClick">
    <view class="selector-content">
      <!-- 标题 -->
      <view class="selector-header">
        <u-icon name="account" :size="24" :color="primaryColor" />
        <text class="selector-title">间数人数</text>
      </view>

      <!-- 数量显示 -->
      <view class="guest-display">
        <view class="guest-item">
          <text class="guest-number">{{ roomCount }}</text>
          <text class="guest-unit">间</text>
        </view>
        <view class="guest-divider"></view>
        <view class="guest-item">
          <text class="guest-number">{{ adultCount }}</text>
          <text class="guest-unit">成人</text>
        </view>
        <view class="guest-divider"></view>
        <view class="guest-item">
          <text class="guest-number">{{ childCount }}</text>
          <text class="guest-unit">儿童</text>
        </view>
      </view>
    </view>

    <!-- 右侧箭头 -->
    <view class="arrow-icon">
      <u-icon name="arrow-right" :size="20" color="#9CA3AF" />
    </view>
  </base-card>
</template>

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

interface Props {
  roomCount?: number;      // 房间数量
  adultCount?: number;     // 成人数量
  childCount?: number;     // 儿童数量
}

const props = withDefaults(defineProps<Props>(), {
  roomCount: 1,
  adultCount: 1,
  childCount: 0
});

const emit = defineEmits<{
  'click': [];
}>();

// 主色
const primaryColor = computed(() => '#FF6B35');

// 点击事件
function handleClick() {
  emit('click');
}
</script>

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

.guest-selector {
  position: relative;
}

.selector-content {
  @include flex-column(flex-start, flex-start);
  gap: $spacing-md;
}

/* ========== 头部 ========== */
.selector-header {
  @include flex-row(flex-start, center);
  gap: $spacing-xs;
}

.selector-title {
  font-size: $font-sm;
  color: $text-secondary;
  font-weight: $font-medium;
}

/* ========== 数量显示 ========== */
.guest-display {
  @include flex-row(flex-start, baseline);
  gap: $spacing-lg;
}

.guest-item {
  @include flex-row(flex-start, baseline);
  gap: 4rpx;
}

.guest-number {
  font-size: $font-xl;
  font-weight: $font-bold;
  color: $text-primary;
  line-height: 1;
}

.guest-unit {
  font-size: $font-sm;
  color: $text-secondary;
  font-weight: $font-regular;
}

.guest-divider {
  width: 2rpx;
  height: 32rpx;
  background: $border-base;
}

/* ========== 箭头图标 ========== */
.arrow-icon {
  position: absolute;
  right: $spacing-xl;
  top: 50%;
  transform: translateY(-50%);
}
</style>
