<template>
	<view class="tabbar_pages p30">
		<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
			<view>
				<view>
					<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
				</view>
				<view :style="{ color: path == item.pagePath ? '#4874E5' : '' }">{{ 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/index/index',
		text: '首页',
		icon_select: '/static/tabbar/home.png',
		icon: '/static/tabbar/homes.png',
		type: 0
	},
	{
		pagePath: '/pages/market/market',
		text: '公告',
		icon_select: '/static/tabbar/market.png',
		icon: '/static/tabbar/markets.png',
		type: 0
	},
	{
		pagePath: '/pages/mine/mine',
		text: '我的',
		icon_select: '/static/tabbar/mine.png',
		icon: '/static/tabbar/mines.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: 120rpx;
	@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;
	padding: 20rpx 115rpx;
	&_view {
		width: 100%;
		view {
			font-size: 24rpx;
			color: #999999;
			@include flex($direction: column, $space: space-between);
			image {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 15rpx;
			}
		}
	}
	
	&_view:nth-child(1){
		view{
			align-items: flex-start;
		}
	}
	&_view:nth-child(3){
		view{
			align-items: flex-end;
		}
	}
}
</style>
