<template>
	<div class="pricemoitorrecord">
		<div class="menuBox">
			<a-menu v-model:selectedKeys="current" mode="horizontal">
				<a-menu-item v-for="item in menuList" :key="item.key" @click="changeMenu(item.key)"
					>{{ item.title }}
				</a-menu-item>
			</a-menu>
		</div>
		<component :is="currentComponent" />
	</div>
</template>
<script setup>
	import { provide } from 'vue'
	import archivesModule from './archives.vue'
	import gatherAndShow from './gatherAndShow.vue'

	const current = ref(['gather'])
	const currentComponent = ref(gatherAndShow)
	const menuList = [
		{
			key: 'gather',
			title: '粮情采集'
		},
		{
			key: 'archives',
			title: '粮情检查档案'
		},
		{
			key: 'exhibition',
			title: '粮情综合展示'
		}
	]
	// 切换菜单
	function changeMenu(key) {
		if (key == 'archives') {
			currentComponent.value = archivesModule
		} else {
			currentComponent.value = gatherAndShow
		}
	}
	provide('current', current)
</script>
<style scoped lang="less">
	.menuBox {
		opacity: 0.7;
		width: 400px;
		.ant-menu {
			line-height: 36px;
			.ant-menu-item {
				padding: 0 5px;
			}
		}
	}
</style>
