<template>
	<view class="tab-block">
		<view class='tab-list flex flex-center' :class="showMiddleButton === true?'tab-list-middle':'tab-list-default'">
			<view v-for="(item, index) in tabList"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@tap="handlePush(item, index)"
				:key="index">
				<view class="item-img-box">
					<image
						class="item-img"
						:src="selectedIndex == index ? item.selectedIconPath : item.iconPath" mode="heightFix"/>
				</view>
				<view class="item-text font-20 color-black" :class="{ specialColor: selectedIndex == index}">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0, // 当前选中的tab索引
				tabList: [ 
					{
						iconPath:"/static/tabBar/icon2.png",
						selectedIconPath: "/static/tabBar/icon1.png",
						text: '首页',
						pagePath: '/pages/home/home',
						middleClass: ''
					},
					{
						iconPath: "/static/tabBar/icon4.png",
						selectedIconPath: "/static/tabBar/icon3.png",
						text: '数据中心',
						pagePath: '/pages/information/information',
						middleClass: ''
					},
					{
						iconPath: "/static/tabBar/icon6.png",
						selectedIconPath: "/static/tabBar/icon5.png",
						text: '我的',
						pagePath: '/pages/me/me',
						middleClass: ''
					}
				],
				showMiddleButton: false
			};
		},
		mounted() {
			// 获取当前页面路径，设置选中索引
			this.setSelectedIndex();
		},
		updated() {
			// 组件更新时重新检查选中状态
			this.setSelectedIndex();
		},
		methods: {
			// 设置当前选中的tab索引（供外部调用）
			setSelectedIndex(index) {
				if (typeof index === 'number' && index >= 0 && index < this.tabList.length) {
					this.selectedIndex = index;
				} else {
					// 如果没有传入索引，则根据当前页面路径自动判断
					const pages = getCurrentPages();
					if (pages.length === 0) return;
					
					const currentPage = pages[pages.length - 1];
					const currentPath = '/' + currentPage.route;
					
					// 根据当前页面路径设置选中索引
					const foundIndex = this.tabList.findIndex(item => item.pagePath === currentPath);
					if (foundIndex !== -1) {
						this.selectedIndex = foundIndex;
					}
				}
			},
			// 点击按钮
			handlePush(item, index) {
				if (this.selectedIndex !== index) {
					uni.switchTab({
						url: item.pagePath,
						success: () => {
							this.selectedIndex = index;
						},
						fail: (err) => {
							console.error('切换tab失败:', err);
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.specialColor{
		color:#009b4d;
	}
	.flex {
		display: flex;
		flex-flow: row wrap;
	}

	.flex-center {
		align-items: center;
		justify-content: center;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-middle {
		align-items: center;
	}
	.font-20 {
		font-size: 20rpx;
	}
	.tab-block {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-size: contain;
		padding: 0 36rpx;
		display: flex;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
		.tab-list{
			height:100rpx;
			display: flex;
			width: 676rpx;
		}
		.tab-list-default{
			background-color: #FFFFFF;
			border-radius: 36rpx;
			box-shadow: 0rpx 0rpx 30rpx #ababab;
		}
		.tab-list-middle {
			position: relative;
			background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
			background-size: cover;
		}
		.list-item {
			flex: 1;
			.item-img-box {
				width: 44rpx;
				height: 42rpx;
				margin-bottom: 9rpx;
				position: relative;
			}

			.item-img {
				width: 44rpx;
				height: 42rpx;
			}
		}

		.mid-button {
			position: relative;

			.item-img-box {
				width: 106rpx;
				height: 106rpx;
				margin-bottom: 9rpx;
				position: absolute;
				z-index: 1002;
				top: -104rpx;
			}

			.item-img {
				width: 106rpx;
				height: 106rpx;
			}

			.item-text {
				font-size: 20rpx;
				position: absolute;
				z-index: 1002;
				bottom: -40rpx;
			}
		}
	}
</style>

