<template>
	<div>
		<ComplexChoices />
		<div style="height: 20px"></div>
		<a-row :gutter="16">
			<a-col :span="18">
				<ResourceList />
			</a-col>
			<a-col :span="6">
				<SidebarRecommend @handlerItem="handlerItemSidebar" />
				<Correlation @handlerItem="handlerItemCorrelation" />
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import ComplexChoices from './components/ComplexChoices.vue'
	import ResourceList from './components/ResourceList.vue'
	import SidebarRecommend from './components/SidebarRecommend.vue'
	import Correlation from './components/Correlation.vue'

	const handlerItemSidebar = (item) => {
		// emit('handlerItemSidebar', item)
	}

	const handlerItemCorrelation = (item) => {
		// emit('handlerItemSidebar', item)
	}
</script>

<style scoped>
	.content {
		padding-left: 10%;
		padding-right: 30%;
	}
</style>
