<!-- 出入库信息 -->
<template>
	<div class="pricemoitorrecord">
		<div class="menuBox">
			<a-menu v-model:selectedKeys="activeKey" mode="horizontal">
				<a-menu-item v-for="item in tabsList" :key="item.value" @click="changeMenu(item.value)"
					>{{ item.lable }}
				</a-menu-item>
			</a-menu>
		</div>
		<component :is="currentComponent" />
	</div>
</template>
<script setup>
	import Record from './RecordAnalysis/record.vue'
	import Analysis from './RecordAnalysis/analysis.vue'
	const tabsList = [
		{ value: '1', lable: '出入库业务记录' },
		{ value: '2', lable: '出入库分析' }
	]
	const activeKey = ref(['1'])
	const currentComponent = ref(Record)

	function changeMenu(key) {
		switch (key) {
			case '1':
				return (currentComponent.value = Record)
			case '2':
				return (currentComponent.value = Analysis)
			default:
				return ''
		}
	}
</script>

<style scoped lang="less">
	.menuBox {
		opacity: 0.7;
		min-width: 400px;

		.ant-menu {
			line-height: 36px;

			.ant-menu-item {
				padding: 0 5px;
			}
		}
	}
</style>
