<template>
	<div class="mobile-footer" :style="{ 'backgroundColor': themeStore.theme.tabbar.bgColor }">
		<div class="mobile-footer-tabbar">
			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/home/Home')">
				<theme-image v-if="selectIndex === 0" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-1-select.png" mode="aspectFit" />
				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-1-normal.png" mode="aspectFit" />
				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 0 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
					Home
				</div>
			</div>
			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/promo/Promo')">
				<theme-image v-if="selectIndex === 1" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-2-select.png" mode="aspectFit" />
				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-2-normal.png" mode="aspectFit" />
				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 1 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
					Promo
				</div>
			</div>
			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/vip/Vip')">
				<theme-image v-if="selectIndex === 2" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-3-select.png" mode="aspectFit" />
				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-3-normal.png" mode="aspectFit" />
				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 2 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
					Vip
				</div>
			</div>
			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/earn/Earn')">
				<theme-image v-if="selectIndex === 3" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-4-select.png" mode="aspectFit" />
				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-4-normal.png" mode="aspectFit" />
				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 3 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
					Earn money
				</div>
			</div>
			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/account/Account')">
				<theme-image v-if="selectIndex === 4" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-5-select.png" mode="aspectFit" />
				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-5-normal.png" mode="aspectFit" />
				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 4 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
					Account
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { useThemeStore } from '@/store/useThemeStore'
	import { ref, onMounted } from 'vue'
	
	defineProps({
		selectIndex: {
			type: Number,
			default: 0
		}
	})
	
	const themeStore = useThemeStore()
	
	const handleTabbarClick = (name) => {
		// uni.navigateTo({
		// 	url: `${name}`
		// })
		uni.switchTab({
			url: `${name}`
		})
	}
</script>

<style lang="scss" scoped>
	.mobile-footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		right: 0rpx;
		left: 0rpx;
		height: 110rpx;
		z-index: 99;
		border-top: 1rpx solid #F31212;
		
		.mobile-footer-tabbar {
			height: 110rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5rpx 0rpx;
			
			.tabbar-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
				
				.tabbar-item-icon {
					width: 42rpx;
					height: 42rpx;
				}
				
				.tabbar-item-text {
					margin-top: 5rpx;
					font-size: 20rpx;
				}
			}
		}
	}
</style>