<template>
	<view class="tabbar-area">
		<view class="tabbar-bottom">
			<view class="tabbar-bottom-item" v-for="(item, index) in tabbars" :key="index" @click="switchTab(item)">
				<view class="tabbar-bottom-item-bg">
					<image :src="currentIndex == index + 1 ? item.selectedIconPath : item.iconPath"
						class="tabbar-bottom-item-icon"></image>
					<view class="tabbar-bottom-item-text"
						:style="{color:currentIndex == index + 1 ? '#f2c96b':'#c9e8f3',}">
						{{ item.text }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	const props = defineProps({
		currentIndex: {
			type: Number,
			default: 0
		},
	});
	const tabbars = ref([
		{
			key: 1,
			text: '首页',
			pagePath: '/pages/index/index',
			iconPath: '/static/tabs/home_default.png',
			selectedIconPath: '/static/tabs/home_selected.png'
		},
		{
			key: 2,
			text: '数据统计',
			pagePath: '/pages/stat/index',
			iconPath: '/static/tabs/stat_default.png',
			selectedIconPath: '/static/tabs/stat_selected.png'
		},
		{
			key: 3,
			text: '个人中心',
			pagePath: '/pages/mine/index',
			iconPath: '/static/tabs/mine_default.png',
			selectedIconPath: '/static/tabs/mine_selected.png'
		}
	]);
	const emit = defineEmits(['switchTab'])
	const switchTab = (item : any) => {
		emit('switchTab', item)
		// uni.switchTab({
		// 	url: item.pagePath
		// });
	};
</script>

<style lang="scss" scoped>
	.tabbar-area {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		left: 0;
		right: 0;
		padding-bottom: 40rpx;

		.tabbar-bottom {
			height: 120rpx;
			width: 90%;
			display: flex;
			border-radius: 60rpx;
			// background-image: linear-gradient(to top, #232557 0%, #536b8d 100%);
			background-image: linear-gradient(to bottom, rgb(3, 22, 46), rgb(29, 52, 94));
			// background-color: #1c304b;
			background-color: #0e1a2f;
			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.2);
			z-index: 998;

			.tabbar-bottom-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				flex: 1;

				.tabbar-bottom-item-bg {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.tabbar-bottom-item-icon {
						height: 48rpx;
						width: 48rpx;
						position: relative;
						display: block;
					}

					.tabbar-bottom-item-text {
						display: flex;
						font-size: 20rpx;
						align-items: center;
						justify-content: center;
						margin: 6rpx 0 0 0;
						color: rgb(113, 113, 113);
					}

					.tabbar-bottom-item-count {
						height: 28rpx;
						display: flex;
						background: #ff4d4d;
						border-radius: 1000rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #ffffff;
						align-items: center;
						justify-content: center;
						padding: 0 4rpx;
						min-width: 20rpx;
						position: absolute;
						top: -8rpx;
						left: 32rpx;
					}
				}
			}
		}
	}
</style>