<template>
	<div style="overflow-y: auto">
		<a-layout>
			<Header @onChangeCurrent="onChangeCurrent" />
			<div style="width: 71%; margin-left: 10%">
				<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>
		</a-layout>
		<Footer />
	</div>
</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 onChangeCurrent = (current) => {
		indexType.value = current

		router.push({
			path: '/' + current
		})
	}
	const handlerItemSidebar = (item) => {
		// emit('handlerItemSidebar', item)
	}

	const handlerItemCorrelation = (item) => {
		// emit('handlerItemSidebar', item)
	}
	const handleOpenResourceDetails = (item) => {
		// emit('handlerItemSidebar', item)
		// indexType.value = 'resourceDetails'
		// nextTick(() => {
		// 	console.log('看看呢', ResourceDetailsRef.value, item) /
		// 		// if (ResourceDetailsRef.value) {
		// 		// 	ResourceDetailsRef.value.setData(item)
		// 		// }
		// })
		console.log('看看呢', item)
		router.push({
			path: '/portal/resourceDetails',
			query: {
				id: item.id
			}
		})
	}
	onMounted(() => {
		// setTimeout(() => {
		// 	images.value = 'http://192.168.1.245:10005/education/2025/7/2/1940361083973906434.jpg'
		// }, 10000)
	})
	EventBus.off('openResourceDetails', handleOpenResourceDetails)
	EventBus.on('openResourceDetails', handleOpenResourceDetails)
</script>

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