<!--
 * @Author: zwq
 * @Date: 2024-09-23 14:35:30
 * @LastEditors: zwq
 * @LastEditTime: 2024-09-23 14:48:08
 * @Description:
-->
<template>
	<div>
		<div style="background: #f2f4f9; height: 40px; width: 100%">
			<ButtonNav
				:menus="['走势分析', '对比分析', '同比分析', '环比分析']"
				@change="currentMenu">
				<template v-slot:tab1>
					<div>走势分析</div>
				</template>
				<template v-slot:tab2>
					<div>对比分析</div>
				</template>
				<template v-slot:tab3>
					<div>同比分析</div>
				</template>
				<template v-slot:tab4>
					<div>环比分析</div>
				</template>
			</ButtonNav>
		</div>
		<div class="app-container">
			<div v-if="activeName === '走势分析'">
				<trendAnalysis />
			</div>
			<div v-else-if="activeName === '对比分析'">
				<contrastAnalysis />
			</div>
			<div v-else-if="activeName === '同比分析'">
				<yoyAnalysis />
			</div>
			<div v-else-if="activeName === '环比分析'">
				<qoqAnalysis />
			</div>
		</div>
	</div>
</template>

<script>
import ButtonNav from '@/components/ButtonNav';
import trendAnalysis from './trendAnalysis';
import contrastAnalysis from './contrastAnalysis';
import yoyAnalysis from './yoyAnalysis';
import qoqAnalysis from './qoqAnalysis';

export default {
	name: '',
	data() {
		return {
			activeName: '走势分析',
		};
	},
	components: {
		ButtonNav,
		trendAnalysis,
		contrastAnalysis,
		yoyAnalysis,
		qoqAnalysis,
	},
	created() {},
	methods: {
		currentMenu(val) {
			this.activeName = val;
		},
	},
};
</script>
<style lang="scss"></style>
