<template>
	<view>
		<basics v-if="PageCur=='basics'"></basics>
		<components v-if="PageCur=='component'"></components>
		<manage v-if="PageCur=='manage'"></manage>
		<plugin v-if="PageCur=='plugin'"></plugin>
		<view class="cu-bar tabbar bg-white shadow foot">
			
			<view class="action" @click="NavChange" data-cur="basics">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='basics'?'text-blue':'text-gray'">数据概览</view>
			</view>
			<view class="action" @click="NavChange" data-cur="manage">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/plugin' + [PageCur=='manage'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='manage'?'text-blue':'text-gray'">工作台</view>
			</view>
			<view class="action" @click="NavChange" data-cur="plugin">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/about' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='plugin'?'text-blue':'text-gray'">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import basics from "@/pages/basics/home.vue"
	import components from "@/pages/component/home.vue"
	import manage from "@/pages/plugin/manage.vue"
	import plugin from "@/pages/plugin/home.vue"

	// Tab 页面常量
	const TAB_PAGES = {
		MANAGE: 'manage',
		BASICS: 'basics',
		COMPONENT: 'component',
		PLUGIN: 'plugin'
	};

	export default {
		components: {
			basics,
			components,
			manage,
			plugin
		},
		data() {
			return {
				PageCur: TAB_PAGES.BASICS,
			}
		},
		methods: {
			/**
			 * 切换当前 Tab 页面
			 * @param {Object} e - 事件对象
			 */
			NavChange(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			},
		}
	}
</script>

<style>

</style>
