<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/tongyonh/'+(selectActive==1?'Uniona':'Union')+'.png'" mode="aspectFit" class="img1"></image>
						</view>
						<view class="uni-tabbar_label"  :class="['text', selectActive==1?'active':'']">
						Wallet
						</view>
					</view>
				</view>
			<view class="tabbar_item" @click="goToPage(2)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==2?'nft_icon':'nft_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==2?'active':'']">
						NFT
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(3)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==3?'market_icona':'market_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==3?'active':'']">
						Market
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(4)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==4?'Discover_icona':'Discover_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==4?'active':'']">
						Discover
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(5)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==5?'Profile_icon':'Profile_icona')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==5?'active':'']">
						Profile
					</view>
				</view>
			</view>
			</view>
			</view>
</template>
<script>

	const COMPONENT_NAME = 'tabBar'
	export default {
		name: COMPONENT_NAME,
	
	  
		
		props: {
		selectActive: {
			type: Number,
			default () {
				return 1
			}
		},
		},
		data() {
			return {
				status:''
			}
		},
		computed: {
		
		},
		mounted() {
		},
		methods: {
		
		goToPage(num) {
				if(num == 1) {
					uni.reLaunch({
						url: '/pages/menu/wallet/index'
					})
					
				} else if (num == 2) {
				    uni.showToast({
				    	title: 'Not yet open',
				    	icon: 'none',
				    	duration: 1500,
				    })
				} else if (num == 3) {
					uni.reLaunch({
						url: '/pages/menu/market/index'
					})
				}else if (num == 4) {
					uni.reLaunch({
						url: '/pages/menu/discover/index'
					})
				}else if (num == 5) {
					uni.reLaunch({
						url: '/pages/menu/profile/index'
					})
				}
				
			}

	},
	}
</script>


<style scoped lang="scss">
	.active{
		color: #5B53FF !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;
	   left: 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>
