<template>
	<a-card>
		<div style="width: 100%;">
			<ComplexChoices />
			<a-row :gutter="16" class="mt-4">
				<a-col :span="18">
					<ResourceList />
				</a-col>
				<a-col :span="6">
					<SidebarRecommend/>
					<Correlation/>
				</a-col>
			</a-row>
		</div>
	</a-card>
</template>

<script setup>
	import Header from '@/views/portal/components/Header.vue'
	import BreadCrumb from '@/views/portal/components/BreadCrumb.vue'
	import Footer from '@/views/portal/components/Footer.vue'
	import ComplexChoices from './components/ComplexChoices.vue'
	import ResourceList from './components/ResourceList.vue'
	import SidebarRecommend from './components/SidebarRecommend.vue'
	import Correlation from './components/Correlation.vue'
	import { useRouter, useRoute } from 'vue-router'

	import EventBus from '@/utils/EventBus'

	const router = useRouter()
	const indexType = ref('resourceCenter')
	const handleOpenResourceDetails = (item) => {
		router.push({
			path: '/student/resourceDetails',
			query: {
				id: item.id
			}
		})
	}
	onMounted(() => {})
	EventBus.off('openResourceDetails', handleOpenResourceDetails)
	EventBus.on('openResourceDetails', handleOpenResourceDetails)
</script>

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