<template>
	<view class="tabbar-box">
		<view :style="'background: '+bgcolor+';' + (addBottom?'height: 158rpx;':'height: 118rpx;')"></view>
		<view class="tabbar acea-row row-around" :style="addBottom?'':'height: 118rpx;'">
			<view class="item" @click="changeTab(item)" v-for="(item, index) in tabList" :key="item.pagePath">
				<image class="icon" v-if="item.pagePath == pagePath" :src="item.selectedIconPath" mode="widthFix"></image>
				<image class="icon" v-else :src="item.iconPath" mode="widthFix"></image>
				<view class="text" :style="item.pagePath == pagePath?'color: #2DB5AE;':''">{{item.text}}</view>
				<view class="line" v-if="item.pagePath == pagePath" ></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Tabbar',
		props: {
			pagePath: {
				type: String,
				default: 'pages/home/index'
			},
			bgcolor: {
				type: String,
				default: '#FFFFFF'
			}
		},
		data() {
			return {
				addBottom: this.addBottom,
				tabList: [
					{
					  "pagePath": "/pages/home/index",
					  "iconPath": "../static/icon-home.png",
					  "selectedIconPath": "../static/icon-home-hot.png",
					  "text": "首页"
					},
					{
					  "pagePath": "/pages/shop/GoodsClass/index",
					  "iconPath": "../static/icon-class.png",
					  "selectedIconPath": "../static/icon-class-hot.png",
					  "text": "分类"
					},
					{
					  "pagePath": "/pages/shop/ShoppingCart/index",
					  "iconPath": "../static/icon-cart.png",
					  "selectedIconPath": "../static/icon-cart-hot.png",
					  "text": "购物车"
					},
					{
					  "pagePath": "/pages/user/User/index",
					  "iconPath": "../static/icon-user.png",
					  "selectedIconPath": "../static/icon-user-hot.png",
					  "text": "我的"
					}
				],
			}
		},
		methods: {
			changeTab(item) {
				uni.switchTab({
					url: item.pagePath
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabbar-box {
		width: 100%;
	}
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 158rpx;
		background: #F1F1F1;
		box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding-top: 8rpx;
		.item {
			width: 66rpx;
			text-align: center;
			.icon {
				width: 50rpx;
				height: 50rpx;
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 22rpx;
				color: #3A3A3C;
				padding-bottom: 6rpx;
			}
			.line {
				background-color: #2DB5AE;
				height: 4rpx;
				width: 66rpx;
			}
		}
	}
</style>
