<template>
	<view class="bottom_tabbar">
		<view v-for="(item, index) in list" :key="index" @click="changeTabbar(index)">
			<image :src="tabbarValue === index ? item.activeImg : item.inactiveImg"></image>
			<text :class="{ active: tabbarValue === index }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, watch } from 'vue';
	import { useGlobalShare } from '@/common/composables/useGlobalShare';
	const { isLogin } = useGlobalShare();

	const props = defineProps({
		tabbarIndex: {
			type: Number,
			default: 0
		}
	});

	const tabbarValue = ref(0);
	const list = ref([
		{
			inactiveImg: 'https://oss.familydaf.cn/sxsnfile/20251218/8d4e230dc58a4a68bd296484a61be59b.png',
			activeImg: 'https://oss.familydaf.cn/sxsnfile/20251218/509da84af12442ea87ae081c11b6701b.png',
			text: '首页',
			path: '/pages/home'
		},
		{
			inactiveImg: 'https://oss.familydaf.cn/sxsnfile/20251218/200ff8f2264a41189c0270a7c702b323.png',
			activeImg: 'https://oss.familydaf.cn/sxsnfile/20251218/c6ae632de25c419a9573a736e675c2d1.png',
			text: '公益',
			path: '/pages/nonprofit'
		},
		{
			inactiveImg: 'https://oss.familydaf.cn/sxsnfile/20251218/240cd767069640d2ae7878682ff58dff.png',
			activeImg: 'https://oss.familydaf.cn/sxsnfile/20251218/4dc292ec86cd40208b7a98efcb0777c6.png',
			text: '我的',
			path: '/pages/my'
		}
	]);

	watch(() => props.tabbarIndex,(newVal) => {
		tabbarValue.value = newVal;
	});

	onMounted(() => {
		tabbarValue.value = props.tabbarIndex;
	});

	const changeTabbar = (e) => {
		if(e===1&&!isLogin()) return
		tabbarValue.value = e;
		uni.reLaunch({
			url: list.value[e].path
		});
	};
</script>

<style scoped lang="scss">
	.bottom_tabbar {
		width: 100%;
		height: 164rpx;
		background: #ffffff;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		padding-top: 19rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);

		& > view {
			width: calc(100% / 2);
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B2B2B2;
				line-height: 30rpx;
				text-align: center;

				&.active {
					font-weight: bold;
					color: #151B29;
				}
			}
		}
	}
</style>
