<template>
	<van-tabbar :active="active" @change="changeTabbarHandler" active-color="#282828" nactive-color="#929292">
	  <van-tabbar-item name="home">
		  <image
			slot="icon"
			src="../static/image/home_active.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"
		  />
		  <image
			slot="icon-active"
			src="../static/image/home.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"
		  />
		  首页
	  </van-tabbar-item>
	  <van-tabbar-item name="classtime">
		  <image
			slot="icon"
			src="../static/image/classtime.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"/>
		  <image
			slot="icon-active"
			src="../static/image/classtion_active.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"/>
		  课表</van-tabbar-item>
	  <van-tabbar-item name="usercenter">
		  <image
			slot="icon"
			src="../static/image/center.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"/>
		  <image
			slot="icon-active"
			src="../static/image/center_active.png"
			mode="aspectFit"
			style="width: 44rpx; height: 44rpx;"/>
			我的
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props:{
			activeName:{
				type:String,
				default:""
			}
		},
		setup(props) {
			let data = reactive({
				active:props.activeName
			});
			const os = uni.getSystemInfoSync();
			//data.statusBarHeight = os.statusBarHeight
			let methods={

				changeTabbarHandler(e){
					data.active=e.detail
					let url
					if(data.active=='home'){
						url = 'index/index'
					}
					if(data.active=='classtime'){
						url = 'timetable/timeTable'
					}
					if(data.active=='usercenter'){
						url = 'person/person'
					}
					uni.reLaunch({
						url: '/pages/'+url
					});
				}
			}
			return {
				...toRefs(data),
				...methods
			};
		},
	};
</script>

<style scoped>
	.navbar {
		height: 100rpx;
		background:#F6F6F6;
	}

	.sticky {
		position: sticky;
		top: 0;
		z-index: 2;
	}
</style>
