<template>
	<view class="cont">
		<div class="tab"  @tap.stop="changeTabbar(0)">
			<view class="type1"  v-if="indexs==0">
				<image src="@/static/tabbar/home-active.png" mode="" ></image>
			</view>
			<view class="type2"   v-if="indexs!=0">
				<image src="@/static/tabbar/home.png" mode=""></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(1)">
			<view class="type1"  v-if="indexs==1">
				<image src="@/static/tabbar/fc-active.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=1">
				<image src="@/static/tabbar/fc.png" mode=""  ></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(2)">
			<view class="type1"  v-if="indexs==2">
				<image src="@/static/tabbar/fx-act.png" mode=""></image>
			</view>
			<view class="type2"  v-if="indexs!=2">
				<image src="@/static/tabbar/fx.png" mode=""  ></image>
			</view>
		</div>
		
	</view>
</template>

<script>
export default {
	props: {
		indexs: [Number, String], //题目id
	},
	data() {
		return {
			currentTabbarIndex: 0,

			// 自定义底栏对应页面的加载情况
			tabberPageLoadFlag: [],
			ispop: false,
			// indexs:1
		}
	},
	mounted() {
		this.currentTabbarIndex = this.indexs
		// setTimeout(()=>{
		// 	this.indexs=2
		// },300)
		 
	},
	methods:{
		changeTabbar(index) {
			// if (this.currentTabbarIndex === index) return
			if(index==0){
				uni.switchTab({
					url:'/page_adoptBee/index',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==1){
				uni.switchTab({
					url:'/page_adoptBee/renyang',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==2){
				uni.switchTab({
					url:'/pages/my',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.cont {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 78rpx;
		width: 664rpx;
		height: 122rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab{
			width: 96rpx;
			height: 82rpx;
			display: flex;
			// flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			.type1{
				
				
				image{
					width: 96rpx;
					height: 82rpx;
				}
			}
			.type2{
				
			
				image{
					margin-top: 8rpx;
					width: 40rpx;
					height: 68rpx;
				}
			}
			
		}
	}
</style>
