<template>
	<view class="container">
		<view class="calendar"></view>
		
		<view v-for="item in commodityGroupDTOList" :key="item.title">
			
			<QuickBookingContentList :commodityDTO="item" />
		</view>
		
	</view>
</template>

<script setup>
	import QuickBookingContentList from './QuickBookingContentList.vue'
	import { defineProps, ref } from 'vue'
	import { onMounted } from 'vue'
	import { quickBookingComponent } from '../../request/api/QuickBookingComponent'
	import { SCROLL_TO_BOTTOM } from '../../constant/constant'

	const commodityGroupDTOList = ref([])

	const loadQuickBookingComponent = async () => {
		const res = await quickBookingComponent('2025-07-29')
		if(res.code === 0 && res.data) {
			commodityGroupDTOList.value.push(...res.data.commodityGroupDTOList)
			uni.$emit(SCROLL_TO_BOTTOM, true)
		}
	}

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

<style scoped lang="scss">
	.container {
		width: 100%;
		flex: 1;
		margin-bottom: 12px;
		
		.calendar {
			width: 100%;
			height: 58px;
			margin: 12px 0 6px;
			background-color: rgba(140,236,255,0.24);	
		}
		
		
		
	}
</style>