<template>
	<view class="tabbar_pages p30">
		<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
			<view v-if="item.type == 1">
				<view style="height: 70rpx">
					<image mode="widthFix" style="width: 132rpx; height: 64rpx" :src="item.icon"></image>
				</view>
				<view :style="{ color: path == item.pagePath ? '#4879e6' : '' }">{{ item.text }}</view>
			</view>
			<view v-else>
				<view style="height: 70rpx">
					<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
				</view>
				<view :style="{ color: path == item.pagePath ? '#4879e6' : '' }">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const data = defineProps({
	path: {
		type: String,
		default: ''
	}
});

let list = ref([
	{
		pagePath: '/pages/home/home',
		text: '首页',
		icon_select: '/static/tabbar/select_home.png',
		icon: '/static/tabbar/home.png',
		type: 0
	},
	{
		pagePath: '/pages/index/index',
		text: '地图',
		icon_select: '/static/tabbar/select_sq.png',
		icon: '/static/tabbar/sq.png',
		type: 0
	},
	{
		pagePath: '/pages/sweep/sweep',
		text: '扫码充电',
		icon_select: '/static/tabbar/find.png',
		icon: '/static/tabbar/find.png',
		type: 1
	},
	{
		pagePath: '/pages/order/order',
		text: '订单',
		icon_select: '/static/tabbar/select_order.png',
		icon: '/static/tabbar/order.png',
		type: 0
	},
	{
		pagePath: '/pages/mine/mine',
		text: '我的',
		icon_select: '/static/tabbar/select_my.png',
		icon: '/static/tabbar/my.png',
		type: 0
	}
]);

const toLink = (e) => {
	uni.vibrateShort();
	if (data.path == e) return true;
	uni.switchTab({
		url: e
	});
};
</script>

<style lang="scss">
.tabbar_pages {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	height: 140rpx;
	@include flex($space: space-between);
	background-color: #fff;
	box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	z-index: 99;
	&_view {
		view {
			font-size: 24rpx;
			color: #999999;
			@include flex($direction: column, $space: space-between);
			image {
				width: 65rpx;
				height: 65rpx;
			}
		}
	}
}
</style>
