<template>
	<view class="container">
		<view class="item" v-for="item,index in menuList">
			<image :src="currentPage == index ? item.selectedIconPath :item.iconPath" @click="jump(item.pagePath)"></image>
			<!-- {{index}} -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: Number
		},
		data() {
			return {
				menuList: [{
						// 首页
						"pagePath": "/pages/tabbar/home/home",
						"iconPath": "../../static/img/tabbar/home.png",
						"selectedIconPath": "../../static/img/tabbar/homeactive.png"
					},
					{
						// 油站
						"pagePath": "/pages/tabbar/station/stationList",
						"iconPath": "../../static/img/tabbar/oil.png",
						"selectedIconPath": "../../static/img/tabbar/oilactive.png"

					},
					{
						// 加油
						"pagePath": "/pages/tabbar/qrCenter/qrCenter",
						"iconPath": "../../static/img/tabbar/icon.png",
						"selectedIconPath": "../../static/img/tabbar/icon.png"
					},

					{
						// 订单
						"pagePath": "/pages/tabbar/order/orderList/orderList",
						"iconPath": "../../static/img/tabbar/order.png",
						"selectedIconPath": "../../static/img/tabbar/orderactive.png"
					},
					{
						// 司机
						"pagePath": "/pages/tabbar/user/user",
						"iconPath": "../../static/img/tabbar/me.png",
						"selectedIconPath": "../../static/img/tabbar/meactive.png"
					}
				]
			}
		},
		methods: {
			jump(path) {
				console.log('path',path)
				uni.switchTab({
					url:path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background: #fff;

		.item {
			position: relative;
			flex: 1;
			text-align: center;
			line-height: 120rpx;

			image {
				width: 50rpx;
				height: 50rpx;

			}

			&:nth-of-type(2) {
				image {
					position: relative;
					left: -13rpx
				}

				;
			}

			&:nth-of-type(4) {
				image {
					position: relative;
					right: -13rpx
				}

				;
			}

			&:nth-of-type(3) {
				flex: none;
				width: 110rpx;
				height: 110rpx;
				position: relative;
				transform: translateY(-30%);
				border-radius: 100%;
				overflow: hidden;
				background: #fff;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>
