<template>
	<a-row :gutter="20">
		<a-col  span="4">
			<common-left-sider :menu_list="menu_list" :selected_key="selectedKeys"
				@changeKey="changeKey"></common-left-sider>
		</a-col>
		<a-col span="20">
			<div style="width: 100%;background-color: #fff;height: calc(100vh - 100px); overflow: auto; padding: 10px;border-radius: 8px;cursor: pointer;">
				<website-notice v-if="curKey" :key_id="curKey"></website-notice>
			</div>
		</a-col>
		<!-- <a-col span="4">
			<a-list size="small" bordered :data-source="data" style="height: 294px; cursor: pointer;">
				<template #renderItem="{ item }">
					<a-list-item>{{ item }}</a-list-item>
				</template>
				<template #header>
					<div>Header</div>
				</template>
			</a-list>
		</a-col> -->
	</a-row>
</template>
<script setup lang="ts">
	import { ref, onMounted, computed, watch ,onBeforeUnmount} from 'vue';
	import WebsiteNotice from '@/components/information/website-notice/index.vue'
	let menu_list = ref([{ title: '本站公告', key: 3 },{ title: '小榄动态', key: 4},{ title: '职场攻略', key: 5},{ title: '创业就业', key: 6},{ title: '劳动与法', key: 8}, { title: '热门资讯', key: 1}])
	let curKey = ref<Number>(3)
	let selectedKeys = ref<Number[]>([3])
	const changeKey = (data) => {
		if(data.key != 1) {
			curKey.value = data.key;
			sessionStorage.removeItem('article_data')
		} else {
			curKey.value = data.key;
		}
	}
	onMounted(() => {
		if(sessionStorage.getItem('article_data')) {
			selectedKeys.value = [1];
			curKey.value = 1;
		}
	})
	
	onBeforeUnmount(() => {
		sessionStorage.removeItem('article_data')
	})
	
</script>

<style>
</style>