<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 fumigation from './fumigation.vue'
	import ventilation from './ventilation.vue'
	import internalCirculation from './internalCirculation.vue'

	const current = ref(['fumigation'])
	const currentComponent = ref(fumigation)
	const menuList = [
		{
			key: 'fumigation',
			title: '熏蒸作业管理'
		},
		{
			key: 'ventilation',
			title: '通风作业管理'
		},
		{
			key: 'internalCirculation',
			title: '内环流作业管理'
		}
	]
	// 切换菜单
	function changeMenu(key) {
		switch (key) {
			case 'ventilation':
				return (currentComponent.value = ventilation)
			case 'internalCirculation':
				return (currentComponent.value = internalCirculation)
			default:
				return (currentComponent.value = fumigation)
		}
	}
	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>
