<!-- 公开内容管理 -->
<template>
	<div class="pricemoitorrecord">
		<a-tabs
			v-model:activeKey="activeKey"
			@change="
				(val) => {
					activeKey = val
				}
			"
		>
			<a-tab-pane centered v-for="item in tabsList" :key="item.value" :tab="item.lable" />
		</a-tabs>
		<component :is="currentComponent" />
	</div>
</template>
<script setup>
	import Graphic from './comonents/Graphic.vue'
	import grainCondition from './comonents/grainCondition/index.vue'
	import InventoryQuantity from './comonents/InventoryQuantity.vue'
	import GrainQuality from './comonents/grainQuality.vue'
	import InOutStorageInformation from './comonents/InOutStorageInformation.vue'
	import VideoSurveillance from './comonents/videoSurveillance.vue'
	import storageJob from '../storageJob/storageJob.vue'
	const tabsList = ref([
		{ value: '1', lable: '图形展示' },
		{ value: '2', lable: '库存数量' },
		{ value: '3', lable: '粮食质量管理' },
		{ value: '4', lable: '出入库信息' },
		{ value: '5', lable: '粮情监管' },
		{ value: '6', lable: '保管作业' },
		{ value: '7', lable: '视频监控' }
	])
	const activeKey = ref('1')

	const currentComponent = computed(() => {
		switch (activeKey.value) {
			case '1':
				return Graphic
			case '2':
				return InventoryQuantity
			case '3':
				return GrainQuality
			case '4':
				return InOutStorageInformation
			case '5':
				return grainCondition
			case '6':
				return storageJob
			case '7':
				return VideoSurveillance
			default:
				return ''
		}
	})
</script>

<style lang="less" scoped>
	@import url('@/style/RLGI/reservoirArea.less');
</style>
