<template>
  <view v-if="visible" class="popup-mask" @tap="close">
    <view class="picker-panel" @tap.stop>
      <view class="picker-header">
        <text class="picker-cancel" @tap="close">取消</text>
        <text class="picker-title">房间及人数</text>
        <text class="picker-confirm" @tap="confirm">确定</text>
      </view>
      <view class="picker-body">
        <!-- 房间数 -->
        <view class="counter-row">
          <view class="counter-info">
            <text class="counter-label">房间</text>
          </view>
          <view class="counter-actions">
            <view :class="['counter-btn', { disabled: tempRoomCount <= 1 }]" @tap="tempRoomCount > 1 && tempRoomCount--">－</view>
            <text class="counter-value">{{ tempRoomCount }}</text>
            <view :class="['counter-btn', { disabled: tempRoomCount >= 10 }]" @tap="tempRoomCount < 10 && tempRoomCount++">＋</view>
          </view>
        </view>

        <!-- 成人数 -->
        <view class="counter-row">
          <view class="counter-info">
            <text class="counter-label">成人</text>
            <text class="counter-desc">18岁及以上</text>
          </view>
          <view class="counter-actions">
            <view :class="['counter-btn', { disabled: tempAdultCount <= 1 }]" @tap="tempAdultCount > 1 && tempAdultCount--">－</view>
            <text class="counter-value">{{ tempAdultCount }}</text>
            <view :class="['counter-btn', { disabled: tempAdultCount >= tempRoomCount * 4 }]" @tap="tempAdultCount < tempRoomCount * 4 && tempAdultCount++">＋</view>
          </view>
        </view>

        <!-- 儿童数 -->
        <view class="counter-row">
          <view class="counter-info">
            <text class="counter-label">儿童</text>
            <text class="counter-desc">2-17岁</text>
          </view>
          <view class="counter-actions">
            <view :class="['counter-btn', { disabled: tempChildCount <= 0 }]" @tap="tempChildCount > 0 && tempChildCount--">－</view>
            <text class="counter-value">{{ tempChildCount }}</text>
            <view :class="['counter-btn', { disabled: tempChildCount >= tempRoomCount * 3 }]" @tap="tempChildCount < tempRoomCount * 3 && tempChildCount++">＋</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const props = defineProps<{
  roomCount?: number;
  adultCount?: number;
  childCount?: number;
}>();

const emit = defineEmits<{
  (e: 'change', roomCount: number, adultCount: number, childCount: number): void;
}>();

const visible = ref(false);
const tempRoomCount = ref(props.roomCount || 1);
const tempAdultCount = ref(props.adultCount || 1);
const tempChildCount = ref(props.childCount || 0);

function open() {
  tempRoomCount.value = props.roomCount || 1;
  tempAdultCount.value = props.adultCount || 1;
  tempChildCount.value = props.childCount || 0;
  visible.value = true;
}

function close() {
  visible.value = false;
}

function confirm() {
  emit('change', tempRoomCount.value, tempAdultCount.value, tempChildCount.value);
  close();
}

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}

.picker-panel {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-confirm {
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 600;
}

.picker-body {
  padding: 16rpx 32rpx;
}

.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.counter-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.counter-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.counter-desc {
  font-size: 24rpx;
  color: #999;
}

.counter-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.counter-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;

  &.disabled {
    color: #ccc;
    background: #fafafa;
  }
}

.counter-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  min-width: 48rpx;
  text-align: center;
}
</style>
