<template>
  <view class="container">
    <QuickBookingCalender class="calendar" @update:date="onDateSelected" />
    <view
      v-for="item in commodityGroupDTOList"
      :key="commodityGroupKey(item.title)"
    >
      <QuickBookingContentList :commodityDTO="item" />
    </view>
  </view>
</template>

<script setup>
import QuickBookingCalender from "./QuickBookingCalender.vue";
import QuickBookingContentList from "./QuickBookingContentList.vue";
import { ref, nextTick } from "vue";
import { onMounted } from "vue";
import { quickBookingComponent } from "@/request/api/MainPageDataApi";
import { SCROLL_TO_BOTTOM } from "@/constant/constant";

const selectedDate = ref({});

const commodityGroupDTOList = ref([]);
const formattedDate = ref("");

const loadQuickBookingComponent = async () => {
  formattedDate.value = formatDate(selectedDate.value.fullDate || new Date());
  const res = await quickBookingComponent(formattedDate.value);
  if (res.code === 0 && res.data) {
    commodityGroupDTOList.value = res.data.commodityGroupDTOList;
    nextTick(() => {
      setTimeout(() => {
        uni.$emit(SCROLL_TO_BOTTOM, true);
      }, 300);
    });
  }
};

const onDateSelected = (date) => {
  console.log("Selected date:", date);
  selectedDate.value = date;
  loadQuickBookingComponent();
};

// 格式化日期为 yyyy-MM-dd
const formatDate = (date) => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const commodityGroupKey = (title) => {
  return `${title}${formattedDate.value}`;
};

onMounted(() => {
  console.log("=============");
  loadQuickBookingComponent();
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  flex: 1;
  margin-bottom: 12px;

  .calendar {
    width: 100%;
  }
}
</style>