<template>
  <view class="date-picker">
    <view class="date-list">
      <view
        v-for="(item, index) in dates"
        :key="index"
        class="date-item"
        :class="{ active: index === activeIndex }"
        @click="selectDate(index)"
      >
        <text class="label">{{ item.label }}</text>
        <text class="date">{{ item.date }}</text>
      </view>

      <!-- 日历按钮 -->
      <view class="calendar-btn btn-bom" @click="openCalendar">
        <image
          src="/static/booking_calendar.png"
          mode="widthFix"
          class="calendar-img"
        />
        <text class="calendar-text">日历</text>
      </view>
    </view>
    <!-- 日历组件 -->
    <Calender
      :visible="calendarVisible"
      mode="single"
      :default-value="selectedDate"
      @close="handleCalendarClose"
      @select="handleDateSelect"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
const emit = defineEmits(["update:date"]); // 声明事件
import Calender from "@/components/Calender/index.vue";

const activeIndex = ref(2); // 默认今天
const dates = ref([]);

const calendarVisible = ref(false);
const selectedDate = ref("");

// 处理日历关闭
const handleCalendarClose = () => {
  calendarVisible.value = false;
};

// 处理日期选择
const handleDateSelect = (data) => {
  selectedDate.value = data.date;
  calendarVisible.value = false;
  console.log("选择的日期:", data.date);
  emit("update:date", { fullDate: selectedDate.value }); // 传回父组件
};

// 初始化日期（前天、昨天、今天、明天、后天）
const initDates = () => {
  const today = new Date();
  const labels = ["前天", "昨天", "今天", "明天", "后天"];
  for (let i = -2; i <= 2; i++) {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    const month = d.getMonth() + 1;
    const day = d.getDate();
    dates.value.push({
      label: labels[i + 2],
      date: `${month}/${day}`,
      fullDate: `${d.getFullYear()}-${String(month).padStart(2, "0")}-${String(
        day
      ).padStart(2, "0")}`,
    });
  }
};

const selectDate = (index) => {
  activeIndex.value = index;
  emit("update:date", dates.value[index]); // 传回父组件
};

const openCalendar = () => {
  calendarVisible.value = true;
};

onMounted(() => {
  initDates();
});
</script>

<style scoped>
.date-picker {
  background: rgba(140, 236, 255, 0.24);
  padding: 8rpx 0;
  border-radius: 16rpx;
  margin: 12px 0 6px;
  min-width: 325px;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
}

.date-list {
  display: flex;
}

.date-item,
.calendar-btn {
  flex: 1; /* 等宽 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rpx 0;
  border-radius: 16rpx;
}

.label {
  font-size: 24rpx;
  color: #999;
}
.date {
  font-size: 28rpx;
  font-weight: bold;
  color: #555;
}

.date-item.active {
  background-color: #00a6ff;
}
.date-item.active .label,
.date-item.active .date {
  color: #fff;
}

/* 日历按钮 */
.calendar-btn {
  background: #fff;
  border-radius: 0 16rpx 16rpx 0;
  margin: -8rpx 0;
}
.calendar-img {
  width: 16px;
  height: 16px;
}
.calendar-text {
  font-size: 22rpx;
  color: #666;
  margin-top: 4rpx;
}
</style>
