<template>
	<view class="app-tabbar">
		<view class="tabbar-inner">
			<view
				v-for="tab in tabs"
				:key="tab.name"
				class="tab-item"
				:class="{ active: current === tab.name }"
				@tap="onChange(tab.name)"
			>
				<FaIcon
					:name="tab.icon"
					:color="current === tab.name ? '#3c9cff' : '#909399'"
					:size="22"
				/>
				<text class="tab-text">{{ tab.text }}</text>
			</view>
		</view>
		<view class="safe-area" />
	</view>
</template>

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

const tabs = [
	{ name: 'dashboard', text: '仪表盘', icon: 'table-cells' },
	{ name: 'features', text: '功能', icon: 'grip' },
	{ name: 'profile', text: '我的', icon: 'user' }
]

const routes = {
	dashboard: '/pages/dashboard/dashboard',
	features: '/pages/features/features',
	profile: '/pages/profile/profile'
}

function onChange(name) {
	if (name === props.current) return
	uni.redirectTo({ url: routes[name] })
}
</script>

<style scoped>
.app-tabbar {
	flex-shrink: 0;
	background: #ffffff;
	border-top: 1rpx solid #ebeef5;
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.tabbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 12rpx 0 8rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
	padding: 8rpx 0;

	&.active .tab-text {
		color: #3c9cff;
		font-weight: 500;
	}
}

.tab-text {
	font-size: 22rpx;
	color: #909399;
}

.safe-area {
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>
