<template>
	<view class="shopro-tabbar-wrap" v-if="tabbarList && tabbarList.length && showTabbar">
		<view class="navbar" :style="{ background: tabbarData.bgcolor || '#fff' }">
			<view class="navbar-item" v-for="(tab, index) in tabbarList"
            :key="tab.name" @tap="switchTabbar(tab, index)"
            :class="[tab.path === currentPath ? 'active':'']">
        <div class="image">
          <img :src="tab.path === currentPath ? tab.activeImage : tab.image" style="height: 100%;width: 100%;"/>
          <div class="num" v-if="tab.message && cartNum">
            {{cartNum}}
          </div>
        </div>
        <div class="text">{{tab.name}}</div>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义底部导航
 * @property {Array} tabbarList - vuex初始化的底部导航数据
 * @property {String} currentPath -computed解析当前页面路径。
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import { router } from '@/config/router';
export default {
	name: 'hsTabBar',
	components: {},
	data() {
		return {
			currentPath: '', //当前页面路径
      cartNum: '100',
      tabbarData: {
        style: 1,
			  list: [
          { name: '首页', path: '/pages/home/index',activeImage: '',image:'' },
          { name: '消息', path: '',activeImage: '',image:'', message: 1 },
          { name: '我的', path: '/pages/user/center/index',activeImage: '',image:'' },
        ]
      }
		};
	},
	mounted() {
		this.currentPath = this.$Route.path === '/pages/home/index' ? this.$Route.path : this.$Route.fullPath;
	},
	computed: {
		// ...mapGetters(['cartNum', 'tabbarData']),
		// 底部导航栏列表
		tabbarList() {
			if (this.tabbarData) {
				return this.tabbarData.list;
			}
		},
		// 后台tabbarList数据中必需含有'/pages/index/index',不然逻辑混乱
		showTabbar() {
			if (this.tabbarData && this.tabbarData.list) {
				let arr = ['/pages/home/index'];
				let path = '';
				for (let item of this.tabbarData.list) {
					arr.push(item.path);
				}
				return arr.includes(this.currentPath);
			}
		}
	},
	methods: {
		// 切换tabbar
		switchTabbar(tab, index) {
			this.$tools.routerTo(tab.path, true);
		}
	}
};
</script>

<style lang="scss">
.shopro-tabbar-wrap {
	height: calc(142rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	position: relative;
	width: 100%;
	z-index: 70;

	.tabbar-box {
		position: fixed;
		display: flex;
		align-items: center;
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		border-top: 1rpx solid #eeeeee;
		background-color: #fff;
		z-index: 998;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.tabbar-item {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;

			.img-box {
				position: relative;

				.badge {
					position: absolute;
					/* #ifndef APP-NVUE */
					display: inline-flex;
					/* #endif */
					justify-content: center;
					align-items: center;
					line-height: 24rpx;
					padding: 4rpx 10rpx;
					border-radius: 100rpx;
					color: #fff;
					font-size: 24rpx;
					z-index: 9;
					background-color: $u-type-error;
					transform: scale(0.8);
					transform-origin: center center;
					top: 0;
					left: 46rpx;
					white-space: nowrap;
				}
			}

			.tabbar-icon {
				width: 50rpx;
				height: 50rpx;
				display: block;
			}

			.tabbar-text {
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}


}

.navbar{
  //position: absolute;
  //left: 0;
  //bottom: 0;
  //background: #fff;
  width: 100%;display: flex; flex: 1;
  position: fixed;
  display: flex;
  align-items: center;
  //width: 100%;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  border-top: 1rpx solid #eeeeee;
  background-color: #fff;
  z-index: 998;
  bottom: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.navbar-item{
  background: #fff;
  text-align: center;
  height: 60px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.navbar-item .text{
  font-size:  12px;
  position: relative; z-index: 2;
}
.navbar-item .image{
  height: 25px;
  width: 25px;    margin: 0 auto;
  position: relative; z-index: 2;
}
.navbar-item.active::after{
  position: absolute; content: "";
  height: 71px;
  width: 71px;
  background: #fff; border-radius: 50%;
  z-index: 1;
  left: 0;
  right: 0;
  top: -11px;
  margin: 0 auto;
  bottom: 0;
}
.num{
  position: absolute;
  background: #af8d66;
  right: -12px;
  top: -6px;
  width: 23px;
  height: 16px; line-height: 16px;
  color: #fff;border-radius: 9px;
}
</style>
