<!--
    @时间：2020-03-16
    @描述：自定义底部导航栏
    @使用：
        在main.js全部引入：
            import tabBar from "@/pages/common/tabBar.vue"
            Vue.component('tabBar', tabBar)
        
        在需要显示的页面底部添加：
        <view>
            <view>这里是页面内容代码区域</view>　　　　　　　// 其中uni-p-b-98是公共样式类名，表示padding-bottom: 98upx;  设置的98upx是和底部导航栏的高度保持一致，页面的内容就不会被底部导航遮挡住啦
            <view class="uni-p-b-98"></view>　　　　　　　// 最后引入自定义组件，并传当前栏目对应的pagePath到自定义组件，显示当前栏目的选中样式
            <tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>
        </view>
 -->
<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>
			<!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->
			<view v-if="false" class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit"
						:src="item.selectedIconPath"></image>
					<image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image>
				</view>
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null
		},
		data() {
			return {
				page: 'contact',
				showPage: false,
				containerHeight: 400,
				tabbar: [{
						"pagePath": "/pages/tabBar/myHome/myHome",
						"iconPath": "/static/image/home-select.png",
						"selectedIconPath": "/static/image/home-select.png",
						"text": "管理",
						"fontIcon": "icon-shouye"
					}, // 这里是要动态切换的栏目，先隐藏，动态追加
					// {
					//     "pagePath": "/pages/tabBar/manage/manage",
					//     "iconPath": "/static/tabBar/home.png",
					//     "selectedIconPath": "/static/tabBar/home_col.png",
					//     "text": "管理",
					//     "fontIcon": "icon-guanli"
					// },
					{
						"pagePath": "/pages/tabBar/mySet/mySet",
						"iconPath": "/static/image/home-select.png",
						"selectedIconPath": "/static/image/home-select.png",
						"text": "我的",
						"fontIcon": "icon-wode"
					}
				]
			};
		},
		mounted() {
			// true为判断条件，根据实际的需求替换即可
			if (true) {
				this.tabbar.splice(0, 0, {
					"pagePath": "/pages/tabBar/homePage/homePage",
					"iconPath": "/static/image/home-select.png",
					"selectedIconPath": "/static/image/home-select.png",
					"text": "主页",
					"fontIcon": "icon-guanli"
				})
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath; // 这里使用reLaunch关闭所有的页面，打开新的栏目页面
				uni.reLaunch({
					url: this.page
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	[nvue] uni-scroll-view,
	[nvue] uni-swiper-item,
	[nvue] uni-view {
		flex-direction: unset;
	}

	[nvue-dir-column] uni-swiper-item,
	[nvue-dir-column] uni-view {
		flex-direction: unset;
	}

	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 98upx;
		padding: 16upx 0;
		box-sizing: border-box;
		border-top: solid 1upx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
	}

	.uni-tabbar__item {
		display: block;
		line-height: 24upx;
		font-size: 20upx;
		text-align: center;
	}

	.uni-tabbar__icon {
		height: 42upx;
		line-height: 42upx;
		text-align: center;
	}

	.icon {
		display: inline-block;
	}

	.uni-tabbar__label {
		line-height: 24upx;
		font-size: 24upx;
		color: #999;
	}

	.uni-tabbar__label:active {
		color: #1ca6ec;
	}
</style>
