<template>
<view class="tabber">
	<view class="logo_bc">
		<image src="https://simlove-sdk.oss-cn-shenzhen.aliyuncs.com/img/logo_bc.png" mode="widthFix"></image>
	</view>
	<view v-for="(item,index) in tabberList" :key="index" @click="onTabber(item.pagePath,index)" :class="curRoute==item.pagePath?'choice tabberList':'tabberList'">
		<view :class="item.icon=='icon-logo'?'icon scale':(item.icon=='icon-shoppingCart' && isAnimationCart)?'icon animationCart':'icon'">
			<slIcon :name="item.icon" :color="curRoute==item.pagePath?'#7cc6f1':'#999'" :size="item.icon=='icon-logo'?'50rpx':'40rpx'"/>
			<view class="shoppingCartNum" v-if="shoppingCartNum>0 && item.icon=='icon-shoppingCart'">
				{{shoppingCartNum}}
			</view>
		</view>
		<view class="name">{{item.text}}</view>
	</view>
	<slBottomLift/>
</view>
</template>

<script>
import slIcon from '@/sdk/sl-icon/index.vue';
import slBottomLift from '@/sdk/sl-bottomLift/index.vue';
import {mapState,mapGetters} from "vuex"
export default{
	components:{
		slIcon,
		slBottomLift
	},
	data(){
		return {
			tabberList:[{
					"text": "首页",
					"pagePath": "/pages/index/index",
					"icon":"icon-home"
				},
				{
					"text": "全部商品",
					"pagePath": "/pages/allProducts/allProducts",
					"icon":"icon-allProducts"
				},
				{
					"text": "周期购",
					"pagePath": "/pages/cycle/cycle",
					"icon":"icon-logo"
				},
				{
					"text": "购物车",
					"pagePath": "/pages/shoppingCart/shoppingCart",
					"icon":"icon-shoppingCart"
				},
				{
					"text": "我的",
					"pagePath": "/pages/my/my",
					"icon":"icon-my"
				}
			],
			curRoute:'/pages/index/index',
			isAnimationCart:false
		}
	},
	computed: {
	  ...mapState({
	    // shoppingCartNum: state => state.app.shoppingCartNum,
	  }),
	  ...mapGetters(["shoppingCartNum"]),
	},
	watch:{
		shoppingCartNum(e){
			console.log(e)
			if(e){
				this.isAnimationCart=true
				setTimeout(e=>{
					this.isAnimationCart=false
				},500)
			}
		}
	},
	created() {
		uni.hideTabBar()
	},
	mounted() {
		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
		this.curRoute=`/${curRoute}`
	},
	methods:{
		onTabber(pagePath,index){
			uni.switchTab({
				url: pagePath,
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tabber{
	width: 100%;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	display: flex;
	flex-wrap: wrap;
	padding: 10rpx 0 0;
	box-shadow: 0 10rpx 10rpx rgba(0,0,0,0.5);
	.tabberList{
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		color: #999;
		.name{
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	}
	.choice{
		color: #7cc6f1;
	}
	.logo_bc{
		width: 120rpx;
		position: absolute;
		top: -30rpx;
		left: 50%;
		z-index: -1;
		margin-left: -56rpx;
	}
	.icon{
		transform-origin: bottom;
		position: relative;
	}
	.scale{
		transform: scale(1.2);
		animation-name: beat;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
	}
	@keyframes beat {
	    0% {
	      transform: scale(1.2);
	    }
	    50% {
	      transform: scale(1.4);
	    }
	  }
	.shoppingCartNum{
		height: 30rpx;
		background: $sl-theme-red;
		font-size: 20rpx;
		color: #fff;
		border-radius: 15rpx;
		position: absolute;
		top: -7rpx;
		left: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
		line-height: 30rpx;
	}
	.animationCart{
		animation-name: Cart;
		animation-duration: 0.5s;
		animation-iteration-count: none;
	}
	@keyframes Cart{
	   0%{
	    transform: scale(1,1);
	     }
	   50%{
		  transform: scale(0.6,1.2);
	     }
	   80%{
			transform: scale(1.2,0.6); 
	     }
		100%{
			transform: scale(0.6,1.2);
		  }
	}
}
</style>