<template>
	<view class="custom-wrap">

		<u-transition :show="current === 0" name="slide-right">
			<Board v-if="current === 0" />
		</u-transition>
		<u-transition :show="current === 1" name="slide-right">
			<FunModule v-if="current === 1" />
		</u-transition>
		<u-transition :show="current === 2" name="slide-right">
			<About v-if="current === 2" />
		</u-transition>
		<u-tabbar :hideTabBar="false" v-model="current" active-color="var(--u-type-primary)" mid-button-size="60"
			:list="list" :mid-button="false"></u-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	/* 加载TabBar组件
	-------------------------------------------------------------*/
	import Board from './board/index.vue'
	import About from './about/index.vue'
	import FunModule from './fun/index.vue'
	// 定义响应式数据
	const list = ref([{
			iconPath: "home",
			selectedIconPath: "home-fill",
			text: "首页",
			isDot: false,
			customIcon: false,
		},
		{
			iconPath: "grid",
			selectedIconPath: "grid-fill",
			text: "功能",
			midButton: true,
			customIcon: false,
		},
		{
			iconPath: "account",
			selectedIconPath: "account-fill",
			text: "我的",
			isDot: false,
			customIcon: false,
		},
	])

	const current = ref(0)

	watch(current, (val) => {
		switch (val) {
			case 0:
				uni.setNavigationBarTitle({
					title: '首页'
				});
				break
			case 1:
				uni.setNavigationBarTitle({
					title: '功能'
				});
				break
			case 2:
				uni.setNavigationBarTitle({
					title: '我的'
				});
				break
		}
	})
</script>

<style lang="scss">
</style>