<template>
	<view class="container">
		<view v-for="item in themeDTOList" :key="item.title">
			<DiscoveryCradContentList :recommendTheme="item" />
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue'
	import { onMounted } from 'vue'
	import { discoveryCradComponent } from '@/request/api/MainPageDataApi'
	import { SCROLL_TO_BOTTOM } from '@/constant/constant'
	import DiscoveryCradContentList from './DiscoveryCradContentList.vue'

	const themeDTOList = ref([])

	const loadDiscoveryCradComponent = async () => {
		const res = await discoveryCradComponent()
		if(res.code === 0 && res.data) {
			themeDTOList.value.push(...res.data.themeDTOList)
			
			nextTick(() => {
				uni.$emit(SCROLL_TO_BOTTOM, true)
			});
		}
	}

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

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