<template>
	<view class="tabbar">
		<view class="aaa" v-for="(item,index) in list" :key="item.id">
			<view class="bbb" @click="homew(index)">
				<view class="image">
					<img class="images" :src="active==index ? item.iconPath:item.icon " alt="">
				</view>

				<view class="txt" :class="{txts:active ==index}">
					{{item.txt}}
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';
	import {
		home
	} from '../../stor/home/home.js'
	const props = defineProps(['active'])
	const list = ref([{
			id: 1,
			txt: '首页',
			path: '/pages/index/index',
			icon: '/static/image/demo1.png',
			iconPath: '/static/image/demo11.png'
		},

		{
			id: 2,
			txt: '次卡办理',
			path: '/pages/handle/handle',
			icon: '/static/image/demo2.png',
			iconPath: '/static/image/demo22.png'
		},
		{
			id: 3,
			txt: '扫码洗车',
			path: '/pages/sweep/sweep',
			icon: '/static/image/demo3.png',
			iconPath: '/static/image/demo33.png'
		},
		{
			id: 4,
			txt: '我的',
			path: '/pages/my/my',
			icon: '/static/image/demo4.png',
			iconPath: '/static/image/demo44.png'
		}
	])
	const aindex = ref(0)
	const aaindex = ref(0)
	const homes = home()
	const homew = (index) => {
		if (index == 2) {
			homes.scanQrcode()
		} else {
			uni.switchTab({
				url: list.value[index].path
			})
		}
		// list.value[index].icon = list.value[index].iconPath
	}
</script>

<style lang="scss">
	.tabbar {
		width: 100%;
		height: 8.5%;
		position: fixed;
		bottom: 0rpx;
		background-color: white;
		// bottom: constant(safe-area-inset-bottom);
		// bottom: env(safe-area-inset-bottom);
		display: flex;
		border-top: 1rpx solid rgba(200, 200, 200, 0.2);
		z-index: 99999;
		border-radius: 28px 28px 0px 0px;
		box-shadow: 0rpx 0rpx 5rpx 2rpx #fcfcfc;

		.aaa {
			position: relative;
			width: 33%;
			height: 100rpx;
			margin: 0 5rpx; // 设置间距

			.bbb {
				width: 100rpx;
				height: 100rpx;
				// background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				.image {
					width: 50rpx;
					height: 50rpx;
					margin-left: 50%;
					transform: translateX(-50%);

					.images {
						width: 100%;
						height: 100%;
					}
				}


				.txt {
					box-sizing: border-box;
					padding-top: 5rpx;
					width: 100%;
					height: 20rpx;
					text-align: center;
					line-height: 20rpx;
					font-size: 25rpx;
				}

				.txts {

					color: aqua;
				}
			}

		}

		// .aaa:nth-child(2) {
		// 	.bbb {

		// 		// background-color: red;
		// 		.image {
		// 			width: 110rpx;
		// 			height: 100rpx;
		// 			margin-top: -25rpx;
		// 			background-color: white;
		// 			border-top: 1rpx solid #dcdcdc;
		// 			border-radius: 50%;
		// 			position: relative;

		// 			.images {
		// 				width: 80%;
		// 				height: 80%;
		// 				position: absolute;
		// 				left: 50%;
		// 				top: 50%;
		// 				transform: translate(-50%, -50%);
		// 			}
		// 		}

		// 		.txt{
		// 			margin-top: 0rpx;
		// 			position: absolute;
		// 			z-index: 20;
		// 		}

		// 	}
		// }
	}
</style>