<template>
	<view class="custom-tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
		<view class="tab-item" v-for="item in tabs" :key="item.path" @click="switchTab(item.path)">
			<image class="tab-icon" :src="current === item.path ? item.selectedIcon : item.icon" mode="aspectFit" />
			<text class="tab-label" :class="{ active: current === item.path }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	defineProps({
		current: {
			type: String,
			default: ''
		}
	})

	const tabs = [{
			path: '/pages/index/index',
			text: '首页',
			icon: '/static/tab/ic_home.png',
			selectedIcon: '/static/tab/ic_home_s.png'
		},
		{
			path: '/pages/mine/mine',
			text: '我的',
			icon: '/static/tab/ic_me.png',
			selectedIcon: '/static/tab/ic_me_s.png'
		}
	]

	// 安全区域底部距离
	const safeBottom = ref(0)
	try {
		const sysInfo = uni.getSystemInfoSync()
		safeBottom.value = sysInfo.safeAreaInsets?.bottom || 0
	} catch (e) {}

	function switchTab(path) {
		uni.switchTab({
			url: path
		})
	}
</script>

<style scoped>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		background-color: #ffffff;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0 8rpx;
	}

	.tab-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	.tab-label {
		font-size: 24rpx;
		color: #AEAEAE;
	}

	.tab-label.active {
		color: #363636;
	}
</style>