<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="confirmDates">确定</text>
      </view>
      <view class="picker-body">
        <view class="date-section">
          <text class="date-label">入住日期</text>
          <picker mode="date" :value="tempCheckIn" :start="todayStr" @change="onCheckInChange">
            <view class="date-value">{{ tempCheckIn }}</view>
          </picker>
        </view>
        <view class="date-section">
          <text class="date-label">退房日期</text>
          <picker mode="date" :value="tempCheckOut" :start="minCheckOut" @change="onCheckOutChange">
            <view class="date-value">{{ tempCheckOut }}</view>
          </picker>
        </view>
        <view class="date-summary">
          <text>共 {{ tempNights }} 晚</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

const props = defineProps<{
  checkIn: string;
  checkOut: string;
}>();

const emit = defineEmits<{
  (e: 'change', checkIn: string, checkOut: string): void;
}>();

const visible = ref(false);
const tempCheckIn = ref(props.checkIn);
const tempCheckOut = ref(props.checkOut);

const todayStr = formatDate(new Date());

const minCheckOut = computed(() => {
  const d = new Date(tempCheckIn.value);
  d.setDate(d.getDate() + 1);
  return formatDate(d);
});

const tempNights = computed(() => {
  return calcNights(tempCheckIn.value, tempCheckOut.value);
});

watch(() => [props.checkIn, props.checkOut], ([ci, co]) => {
  tempCheckIn.value = ci;
  tempCheckOut.value = co;
});

function open() {
  tempCheckIn.value = props.checkIn;
  tempCheckOut.value = props.checkOut;
  visible.value = true;
}

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

function confirmDates() {
  emit('change', tempCheckIn.value, tempCheckOut.value);
  close();
}

function onCheckInChange(e: any) {
  tempCheckIn.value = e.detail.value;
  if (new Date(tempCheckOut.value) <= new Date(tempCheckIn.value)) {
    const next = new Date(tempCheckIn.value);
    next.setDate(next.getDate() + 1);
    tempCheckOut.value = formatDate(next);
  }
}

function onCheckOutChange(e: any) {
  tempCheckOut.value = e.detail.value;
}

function calcNights(checkIn: string, checkOut: string): number {
  const diff = new Date(checkOut).getTime() - new Date(checkIn).getTime();
  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
}

function formatDate(date: Date): string {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

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%;
  max-height: 60vh;
  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: 24rpx 32rpx;
}

.date-section {
  margin-bottom: 24rpx;
}

.date-label {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 12rpx;
  display: block;
}

.date-value {
  font-size: 30rpx;
  color: #333;
  padding: 16rpx 24rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
}

.date-summary {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 600;
}
</style>
