<template>
	<view>
		<view class="tab-bar">
		    <view v-for="(item,index) in list" :key="index" :class="'tab-bar-item '+(item.bulge?'bulge':'')" @click="item.jump=='nav'?navigateTo(item.pagePath,index):switchTab(item.pagePath,index)">
		    <image class="image" :src="selected == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
		    <view v-if="item.text" class="tab-bar-view" :style="'color: '+(selected==index?selectedColor:color)+';'">{{item.text}}</view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		data() {
			return {
				color: "#504E4E",
				selected:0,
				selectedColor: "#504E4E",
				list: [
				    {
				        pagePath: "/pages/index/index",
				        text: "首页",
				        iconPath: "/static/icon/tabbar/home.png",
				        selectedIconPath: "/static/icon/tabbar/home.png"
				    },
				    {
				        pagePath: "/pages/classify/classify",
				        text: "分类",
				        iconPath: "/static/icon/tabbar/classify.png",
				        selectedIconPath: "/static/icon/tabbar/classify.png"
				    },
				    // {
				    //     pagePath: "/pages/shoppingCart/shoppingCart",
				    //     text: "购物车",
				    //     iconPath: "/static/icon/tabbar/shoppingCart.png",
				    //     selectedIconPath: "/static/icon/tabbar/shoppingCart.png"
				    // },
				    // {
				    //     pagePath: "/pages/sharedRespository/sharedRespository",
				    //     text: "共享仓",
				    //     iconPath: "/static/icon/tabbar/sharedRespository.png",
				    //     selectedIconPath: "/static/icon/tabbar/sharedRespository.png"
				    // },
				    {
				        pagePath: "/pages/mine/mine",
				        text: "我的",
				        iconPath: "/static/icon/tabbar/mine.png",
				        selectedIconPath: "/static/icon/tabbar/mine.png"
				    }
				]
			};
		},
		props:{
			current:Number
		},
		methods:{
			switchTab(url,index) {
				if(index==2||index==4)
				{
					//如果是购物车和我的，需要登录
					let token = uni.getStorageSync('token')
					if (!token) {
						uni.navigateTo({
							url:'/pages/login/login'
						})
						return
					} 
				}
				uni.switchTab({url})
			},
			navigateTo(url,index) {
			    uni.navigateTo({
			        url: url
			    }) 
			}
		}
	}
</script>

<style lang="less">
.tab-bar {
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
	box-shadow: 0 0 5rpx 0 rgba(145,145,145,0.53);
	z-index: 99;
	.tab-bar-item
	{
	    flex: 1;
	    text-align: center;
	    display: flex;
	    align-items: center;
	    flex-direction: column;
		.image {
		  margin: 16rpx 0 8rpx 0;
		  width: 40rpx;
		  height: 40rpx;
		}
	}
}

  
  .bulge
  {
      position: relative;
  }
  .bulge .image
  {
    position: absolute;
    top: -47rpx;
    width: 94rpx;
    height: 94rpx;
  }
  .bulge .tab-bar-view
  {
    margin-top: 60rpx;
  }
  .tab-bar-item .tab-bar-view {
    font-size: 22rpx;
    font-weight: 500;
  }
  .tab-bar .bg 
  {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      z-index: -1;
  }
</style>