<template>
		<view class="index-header ">
			<view class="con">
				<view class="tabbar_item" @click="goToPage(1)">
					<view class="uni-tabbar_bd">
						<view class="uni-tabbar_icon">
						<image :src="'/static/tabbar/'+(selectActive==1?'meun_icon_home_sel@3x':'meun_icon_home_nor@3x')+'.png'" mode="aspectFit" class="img1"></image>
						</view>
						<view class="uni-tabbar_label"  :class="['text', selectActive==1?'active':'']">
							Home
						</view>
					</view>
				</view>
			<view class="tabbar_item" @click="goToPage(2)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tabbar/'+(selectActive==2?'meun_icon_search_sel@3x':'meun_icon_search_nor@3x')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==2?'active':'']">
						Search
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(3)" v-if="status=='open'">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tabbar/'+(selectActive==3?'meun_icon_game_sel@2x':'meun_icon_game_nor@2x')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==3?'active':'']">
						Game
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(4)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tabbar/'+(selectActive==4?'meun_icon_promotion_sel@2x':'meun_icon_promotion_nor@2x')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==4?'active':'']">
						Promotion
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(5)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tabbar/'+(selectActive==5?'meun_icon_my_sel@2x':'meun_icon_my_nor@2x')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==5?'active':'']">
						My
					</view>
				</view>
			</view>
			</view>
			</view>
</template>
<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import md5 from 'js-md5'
	import store from '@/store'
	const COMPONENT_NAME = 'tabBar'
	export default {
		name: COMPONENT_NAME,
	
	  
		
		props: {
		selectActive: {
			type: Number,
			default () {
				return 1
			}
		},
		},
		data() {
			return {
				status:''
			}
		},
		computed: {
		
		},
		mounted() {
	this.openGame()
		},
		methods: {
			openGame() {
				const post = api.info()
				post.then(d => {
					this.status=d.data.gameMenuStatus
					
					})
					.catch((e) => {
						console.log(e)
					})
			},
		goToPage(num) {
				if(num == 1) {
					this.selectActive = 1
					uni.switchTab({
						url: '/pages/menu/goods/index'
					})
				} else if (num == 2) {
					this.selectActive = 2
				    uni.switchTab({
				    	url:'/pages/menu/search/index'
				    })
				} else if (num == 3) {
					this.selectActive = 3
					uni.switchTab({
						url: '/pages/menu/color/index'
					})
				}else if (num == 4) {
					this.selectActive = 4
					uni.switchTab({
						url: '/pages/menu/promotion/index'
					})
				}else if (num == 5) {
					this.selectActive = 5
					uni.switchTab({
						url: '/pages/menu/My/index'
					})
				}
				
			}

	},
	}
</script>


<style scoped lang="scss">
	.active{
		color: rgb(52, 2, 107) !important;
	}
	.uni-tabbar_label {
		color: rgb(153, 153, 153);
		    font-size: 10px;
		    line-height: normal;
		    margin-top: 3px;
			position: relative;
			    text-align: center;
    font-size: 20rpx !important;
}
	.uni-tabbar_icon{
		width: 24px !important;
		    height: 24px !important;
			position: relative;
			    display: inline-block;
			    margin-top: 5px;
	}
	.uni-tabbar_icon image {
	    width: 100%;
	    height: 100%;
	}
	.uni-tabbar_bd{
		height: 100rpx;
		position: relative;
		    -webkit-flex-direction: column;
		    flex-direction: column;
		    cursor: pointer;
	}
.con{
	width: 100%;
	background-color: rgb(247, 247, 250);
	    position: fixed;
	   bottom: 0;
	padding-top: 28rpx;
	    padding-bottom: 30rpx ;
	    background-image: -webkit-linear-gradient(bottom, #FAF8F8, #FFFFFF) !important;
	    background-image: linear-gradient(to top, #FAF8F8, #FFFFFF) !important;
		border-top: 2rpx solid #F7F4F4;
		display: flex;
		    z-index: 998;
		    box-sizing: border-box;
}
.tabbar_item{
	display: -webkit-box;
	width: 150rpx;
	height: 100rpx;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
		webkit-flex-direction: column;
		    flex-direction: column;
		    -webkit-box-flex: 1;
		    -webkit-flex: 1;
		    flex: 1;
		    font-size: 0;
		    text-align: center;
		    -webkit-tap-highlight-color: rgba(0,0,0,0);
}	
	
</style>
