<template>
	<cover-view id='customTabBar' class="tab-bar" v-if="canCustom">
		<!-- <cover-view class="tab-bar-border"></cover-view> -->
		<cover-view v-for="list" v-key="index" class="tab-bar-item" :data-path="item.pagePath" :data-index="index"
			@tap="switchTab">
			<cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
			<cover-view
				:style="{color: (selected === index ? selectedColor : color), font-size: '12px'}">{{item.text}}</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
			select: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selected: 0,
				color: "#B6B6B6",
				selectedColor: "#67A4FD",
				canCustom: true,
				list: [{
						"pagePath": "/pages/tabBar/index/index",
						"iconPath": "/images/tab_home_pre.png",
						"selectedIconPath": "/images/tab_home.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/tabBar/order/order",
						"iconPath": "/images/tab_order_pre.png",
						"selectedIconPath": "/images/tab_order.png",
						"text": "订单"
					},
					{
						"pagePath": "/pages/tabBar/message/message",
						"iconPath": "/images/tab_message_pre.png",
						"selectedIconPath": "/images/tab_message.png",
						"text": "消息"
					},
					{
						"pagePath": "/pages/tabBar/mine/mine",
						"iconPath": "/images/tab_me_pre.png",
						"selectedIconPath": "/images/tab_me.png",
						"text": "我的"
					}
				]
			}
		},
		methods: {
			switchTab: function(e) {
				let {
					index,
					path
				} = e.currentTarget.dataset;
				let {
					selected
				} = this.data;
				if (selected === index) return;
				wx.reLaunch({
					url: path
				})
				this.setData({
					selected: index
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 49px;
		background: white;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 10000;
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.tab-bar-item cover-image {
		width: 20px;
		height: 20px;
		margin-bottom: 8rpx;
	}

	.tab-bar-item cover-view {
		font-size: 10px;
	}
</style>