﻿<template>
	<view class="surface-card tabbar">
		<view
			v-for="item in tabs"
			:key="item.id"
			class="tab-item"
			:class="{ active: current === item.id }"
			@click="navigate(item)"
		>
			<view class="tab-dot" :style="{ background: current === item.id ? item.color : 'var(--line-soft)' }"></view>
			<text class="tab-label">{{ item.label }}</text>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	current: {
		type: String,
		default: 'home'
	}
})

const tabs = [
	{ id: 'home', label: '首页', path: '/pages/home/index', color: '#1f6f5f' },
	{ id: 'bills', label: '账单', path: '/pages/bills/index', color: '#d36c43' },
	{ id: 'budget', label: '预算', path: '/pages/budget/index', color: '#5f8df5' },
	{ id: 'stats', label: '报表', path: '/pages/stats/index', color: '#7f56d9' },
	{ id: 'mine', label: '我的', path: '/pages/mine/index', color: '#44546a' }
]

function navigate(item) {
	if (item.id === props.current) {
		return
	}

	uni.redirectTo({
		url: item.path
	})
}
</script>

<style lang="scss" scoped>
.tabbar {
	position: fixed;
	left: 24rpx;
	right: 24rpx;
	bottom: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18rpx 12rpx calc(env(safe-area-inset-bottom));
	z-index: 20;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 14rpx 0;
	border-radius: 22rpx;
}

.tab-item.active {
	background: var(--brand-soft);
}

.tab-dot {
	width: 18rpx;
	height: 18rpx;
	border-radius: 50%;
}

.tab-label {
	font-size: 22rpx;
	color: var(--text-secondary);
}

.tab-item.active .tab-label {
	color: var(--text-primary);
	font-weight: 600;
}
</style>
