<template>
	<div style="overflow-y: auto">
		<a-layout>
			<Header @onChangeCurrent="onChangeCurrent" />
			<div style="width: 71%; margin-left: 10%">
				<BreadCrumb />
				<ResourceCenter v-if="indexType == 'resourceCenter'" />
				<ResourceDetails v-if="indexType == 'resourceDetails'" />
			</div>
		</a-layout>
		<Footer />
	</div>
</template>

<script setup>
	import Header from './components/Header.vue'
	import BreadCrumb from './components/BreadCrumb.vue'
	import Footer from './components/Footer.vue'
	import ResourceCenter from '@/views/resourceCenter/index.vue'
	import ResourceDetails from '@/views/resourceDetails/index.vue'

	const indexType = ref('resourceDetails')
	const onChangeCurrent = (current) => {
		indexType.value = current
	}

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

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

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