<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">
          <image :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';

let menuIcon = {
  index: {
    active: require('@/static/images/components/tabBar/index.active.png'),
    default: require('@/static/images/components/tabBar/index.png')
  },
  message:{
    active: require('@/static/images/components/tabBar/message.active.png'),
    default: require('@/static/images/components/tabBar/message.png')
  },
  center:{
    active: require('@/static/images/components/tabBar/my.active.png'),
    default: require('@/static/images/components/tabBar/my.png')
  },
  collection:{
    active: require('@/static/images/components/tabBar/collection.active.png'),
    default: require('@/static/images/components/tabBar/collection.png')
  }
};
export default {
	name: 'hsTabBar',
	components: {},
	data() {
		return {
			currentPath: '', //当前页面路径
      cartNum: '',

      type1: [

      ]
		};
	},
	mounted() {
		this.currentPath = this.$Route.path ? this.$Route.path : this.$Route.fullPath;
	},
	computed: {
    tabbarData() {
      let type = uni.getStorageSync("assignType") || 1;

      return {
        style: 1,
        list: type == 1 ? [
          { name: '首页', path: '/pages/home/index',
            activeImage: menuIcon['index'].active,
            image: menuIcon['index'].default,
          },
          { name: '消息', path: '', message: 1 ,
            activeImage: menuIcon['message'].active,
            image: menuIcon['message'].default,
          },
          { name: '我的',
            path: '/pages/user/center/index',
            // path: '',
            activeImage: menuIcon['center'].active,
            image: menuIcon['center'].default,
          },
        ] : [
          { name: '首页', path: '/pages/brands/brands',
            activeImage: menuIcon['index'].active,
            image: menuIcon['index'].default,
          },
          { name: '收藏', path: '/pages/brands/collection',
            activeImage: menuIcon['collection'].active,
            image: menuIcon['collection'].default,
          },
          { name: '我的',
            path: '/pages/user/center/index',
            // path: '',
            activeImage: menuIcon['center'].active,
            image: menuIcon['center'].default,
          },
        ]
      }
    },
		// ...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);
				// }
        // console.log(this.tabbarData.list.map((item) => item.path))
        // console.log(this.currentPath)
				return this.tabbarData.list.map((item) => item.path)
            .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>
