<template>
    <!-- 底部导航 -->
    <view class="tabbar">
       <view class="tabbar-item" v-for="(item, index) in tabberMenu" :key="index" @click="tabbarChange(item.pagePath,index)">
          <image class="item-img" :src='item.selectedIconPath' v-if="current == index"></image>
          <image class="item-img1" :src='item.iconPath' v-else></image>
    	  <view>{{item.text}}</view>
       </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed,onMounted, watch, } from 'vue';
onMounted(()=>{
	uni.hideTabBar({
		animation:false
	})
})
const curPath = ref('')
watch(curPath, () => {
	const pages = getCurrentPages()
	curPath.value  = pages.slice(-1)[0].route
}, {
	immediate: true,
	deep: true
})
const student = [
	{
		pagePath:'/pages/student/home',
		text:'首页',
		iconPath: "/static/images/tabBar/tab-home.png",
		selectedIconPath: "/static/images/tabBar/tab-home-current.png"
	},
	{
		pagePath:'/pages/student/couser_Center',
		text:'课程中心',
		iconPath: "/static/images/tabBar/tab-cate.png",
		selectedIconPath: "/static/images/tabBar/tab-cate-current.png"
	},
	{
		pagePath:'/pages/student/learning_Center',
		text:'学习中心',
		iconPath: "/static/images/tabBar/tab-cart.png",
		selectedIconPath: "/static/images/tabBar/tab-cart-current.png"
	},
	{
		pagePath:'/pages/student/personal_Center',
		text:'个人中心',
		iconPath: "/static/images/tabBar/tab-my.png",
		selectedIconPath: "/static/images/tabBar/tab-my-current.png"
	}
];
const teacher= [
	{
		pagePath:'/pages/teacher/home',
		text:'首页',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/teacher/course',
		text:'课程',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/teacher/natural',
		text:'资源',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/teacher/personal_Center',
		text:'个人中心',
		iconPath: "",
		selectedIconPath: ""
	}
];
const administrators = [
	{
		pagePath:'/pages/administrators/home',
		text:'首页',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/administrators/resource_Library',
		text:'资源库',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/administrators/educational',
		text:'教务模块',
		iconPath: "",
		selectedIconPath: ""
	},
	{
		pagePath:'/pages/administrators/system_User',
		text:'系统用户',
		iconPath: "",
		selectedIconPath: "/"
	},
	{
		pagePath:'/pages/administrators/personal_Center',
		text:'个人中心',
		iconPath: "",
		selectedIconPath: ""
	}
]
const tabberMenu = computed(() => {
	if(uni.getStorageSync('student')){
		return student
	}
	if(uni.getStorageSync('teacher')){
		return teacher
	}
	if(uni.getStorageSync('administrators')){
		return administrators
	}
})
const current = computed(() => tabberMenu.value?.findIndex(o => o.pagePath.includes(curPath.value)))
const tabbarChange = (path:any,index:any) =>{
	    uni.switchTab({
	        url: path,
	    })
}
</script>
//创建一个公共组件名为tabbar,在需要底部导航的页面中，引入tabbar组件就可以了，此外pages.json中的tabbar配置路径必须写上，onMounted是隐藏掉了系统自身的底部导航栏，用的是自己自定义的导航栏了