<template>
	<view>
		<basics v-if="PageCur=='basics'"></basics>
		<components v-if="PageCur=='component'"></components>
		<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-cyan':'text-gray'">概览</view>
			</view>
			<view class="action" @click="NavChange" data-cur="component">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='component'?'text-cyan':'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-cyan':'text-gray'">我的</view>
			</view>
		</view>
	</view>
</template>

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

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

<style>

</style>
