<template>
	  <view class="menu_wrapper">
	    <view class="menu_content">
	      <view v-for="item in menuLists" :key="item.link" class="tabbar_item" :class="{'active':item.link == currentPage}" @click="navTo(item)">
	        <view class="pic">
				<view 
					v-if="item.link == currentPage"
					class="iconfont iconSize" 
					:class="`${item.selectedIconPath}`"
				>
				</view>
				<view
					v-else
					class="iconfont iconSize" 
					:class="`${item.iconPath}`"
				>
				</view>
				<view class="infoBody" v-if="item.link=='personalCenter'&&infoTotal>0">
					{{infoTotal}}
				</view>
				<!-- <image v-if="item.link == currentPage" :src="'/static/tabbar/' + item.selectedIconPath + '.png'" mode="widthFix"></image>
				<image v-else :src="'/static/tabbar/' + item.iconPath + '.png'" mode="widthFix"></image> -->
	        </view>
	        <view class="name">{{item.name}}</view>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
		props: ['currentPage','infoTotal'],
		name:"tabBar",
		data() {
			return {
				menuLists: [
				    {key:1,name:'首页',iconPath:'icon-shouye16',selectedIconPath:'home_active',link:'index'},
				    {key:2,name:'金融工具',iconPath:'icon-jurassic_toolkit',selectedIconPath:'sfp_active',link:'product'},
				    {key:3,name:'产品中心',iconPath:'icon-pinzhishangpinhuichang',selectedIconPath:'cffp_active',link:'courselist'},
				    {key:4,name:'我的',iconPath:'icon-gerenzhongxin',selectedIconPath:'my_active',link:'personalCenter'},
				]
			}
		},
		methods: {
			navTo(item) {
				if (item.link != this.currentPage) {
					// uni.navigateTo({
					// 	url:`/pages/${item.link}/${item.link}`
					// })
					uni.reLaunch({
						url:`/pages/${item.link}/${item.link}`
					})
				}
			}	
		},
		mounted() {
			console.log('info',this.infoTotal);
		}
	}
</script>

<style lang="scss" scoped>
	.menu_wrapper{
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100%;
		height: 70rpx;
		border-top: 2rpx solid #f5f5f5;
		background: #fff;
		color: #333;
		font-size: 24rpx;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding: 20rpx 25rpx 100rpx 25rpx;
		.menu_content{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.tabbar_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.pic{
				position: relative;
				// width: 60rpx;
				margin: 0 auto;
				.infoBody{
					box-sizing: border-box;
					text-align: center;
					position: absolute;
					top: -28%;
					right: -61%;
					width: 33rpx;
					height: 33rpx;
					background-color: rgba(212, 48, 48, 1);
					color: #fff;
					border-radius: 50%;
					line-height: 30rpx;
				}
				.iconSize{
					font-size: 40rpx;
				}
			}
			.name{
				
				// text-align: center;
				font-size: 26rpx;
				color: #666;
			}
		}
	}
	
</style>
