<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: "#858C9A",
				selected:0,
				selectedColor: "#F3C368",
				list: [
				    {
				        "pagePath": "/pages/index/index",
				        "text": "新闻动量",
				        "iconPath": "/static/icon/tabbar/home.png",
				        "selectedIconPath": "/static/icon/tabbar/home_s.png"
				    },
				    {
				        "pagePath": "/pages/concept/concept",
				        "text": "概念中心",
				        "iconPath": "/static/icon/tabbar/concept.png",
				        "selectedIconPath": "/static/icon/tabbar/concept_s.png"
				    },
					{
					    "pagePath": "/pages/geGuCenter/geGuCenter",
					    "text": "个股中心",
					    "iconPath": "/static/icon/tabbar/gegu.png",
					    "selectedIconPath": "/static/icon/tabbar/gegu_s.png"
					},
					{
					    "pagePath": "/pages/ztfx/ztfx",
					    "text": "涨停分析",
					    "iconPath": "/static/icon/tabbar/zt.png",
					    "selectedIconPath": "/static/icon/tabbar/zt_s.png"
					},
				    {
				        "pagePath": "/pages/mine/mine",
				        "text": "个人中心",
				        "iconPath": "/static/icon/tabbar/mine.png",
				        "selectedIconPath": "/static/icon/tabbar/mine_s.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: 110rpx;
    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: 98;
	.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>