<template>

	<view class="app-tabbar">

		<view class="tabbar-pill">

			<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' : '#9acafc'"

					:size="20"

				/>

				<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;

	padding: 16rpx 32rpx 0;

	background: #ffffff;

}



.tabbar-pill {

	display: flex;

	align-items: center;

	justify-content: space-around;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 999rpx;

	padding: 16rpx 12rpx;

}



.tab-item {

	flex: 1;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 6rpx;

	padding: 8rpx 0;

}



.tab-text {

	font-size: 22rpx;

	color: #9acafc;

}



.tab-item.active .tab-text {

	color: #3c9cff;

	font-weight: 500;

}



.safe-area {

	height: constant(safe-area-inset-bottom);

	height: env(safe-area-inset-bottom);

}

</style>


