<template>
	<view class="tab-block">
		<view class='tab-list flex flex-center'
			:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
			<!-- 流动选中指示器 - 暂时禁用 -->
			<!-- <view class="tab-indicator" :style="{ left: indicatorLeft + 'px', width: indicatorWidth + 'px' }"></view> -->
			<view v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@tap="handlePush(item, index)" :key="index" :ref="'tabItem' + index">
				<view class="item-img-box">
					<image class="item-img" :src="currentTabIndex == index ? item.selectedIconPath : item.iconPath" />
				</view>
				<view class="item-text font-20 color-black" :class="{ specialColor: currentTabIndex == index }">
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 当前选中的tab项，如果不传则自动根据当前页面路径计算
		tabIndex: {
			type: Number,
			default: null
		}
	},
	data() {
		return {
			tabList: [
				{
					iconPath: "/static/tabBar/icon2.png",
					selectedIconPath: "/static/tabBar/icon1.png",
					text: '首页',
					pagePath: '/pages/home/home',
					middleClass: ''
				},
				// {
				// 	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,
			indicatorLeft: 0,
			indicatorWidth: 0,
			isUpdating: false // 防止无限递归的标志
		};
	},
	computed: {
		// 自动计算当前选中的tab索引
		currentTabIndex() {
			// 如果外部传入了 tabIndex，优先使用外部传入的值
			if (this.tabIndex !== null && this.tabIndex !== undefined) {
				return this.tabIndex;
			}
			// 否则根据当前页面路径自动计算
			const pages = getCurrentPages();
			if (pages.length === 0) return 0;

			const currentPage = pages[pages.length - 1];
			const currentPath = '/' + currentPage.route;

			// 查找匹配的tab项
			const matchedIndex = this.tabList.findIndex(item => {
				return currentPath === item.pagePath || currentPath.startsWith(item.pagePath);
			});

			return matchedIndex >= 0 ? matchedIndex : 0;
		}
	},
	mounted() {
		// 完全禁用指示器功能，避免无限递归导致堆栈溢出
		// 指示器功能暂时不启用
	},
	watch: {
		// 移除所有 watch，避免无限递归
	},
	methods: {
		// 更新流动指示器位置 - 暂时禁用
		updateIndicator() {
			// 暂时禁用此功能，避免无限递归
			return

			// 以下代码暂时禁用
			/*
			if (this.isUpdating) {
				return
			}
			this.isUpdating = true
			setTimeout(() => {
				try {
					const currentIndex = this.currentTabIndex
					const query = uni.createSelectorQuery().in(this)
					query.select('.tab-list').boundingClientRect((tabListRect) => {
						if (!tabListRect) {
							this.isUpdating = false
							return
						}
						query.selectAll('.list-item').boundingClientRect((rects) => {
							if (rects && rects.length > 0 && currentIndex >= 0 && currentIndex < rects.length) {
								const currentRect = rects[currentIndex]
								if (currentRect && tabListRect) {
									const newWidth = currentRect.width * 0.6
									const newLeft = currentRect.left - tabListRect.left + (currentRect.width - newWidth) / 2
									this.indicatorWidth = newWidth
									this.indicatorLeft = newLeft
								}
							}
							setTimeout(() => {
								this.isUpdating = false
							}, 100)
						}).exec()
					}).exec()
				} catch (e) {
					console.error('更新指示器失败:', e)
					this.isUpdating = false
				}
			}, 200)
			*/
		},
		// 点击按钮
		handlePush(item, index) {
			if (this.currentTabIndex !== index) {
				uni.reLaunch({
					url: item.pagePath
				})
			}
		}
	}
}
</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: 22rpx;
}

.tab-block {
	position: fixed;
	bottom: 32rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	width: calc(100% - 16rpx);
	// max-width: 680rpx;
	padding: 0 24rpx;
	box-sizing: border-box;

	.tab-list {
		height: 120rpx;
	}

	.tab-list-default {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-radius: 28rpx;
		box-shadow: 0rpx 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
		border: 1px solid rgba(255, 255, 255, 0.4);
		position: relative;
		transition: all 0.3s ease;
	}

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

	/* 流动选中指示器 */
	.tab-indicator {
		position: absolute;
		bottom: 8rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
		border-radius: 2rpx;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4);
		z-index: 1;
	}

	.list-item {
		flex: 1;
		position: relative;
		z-index: 2;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		.item-img-box {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 6rpx;
			position: relative;
			transition: transform 0.3s ease;
		}

		.item-img {
			width: 40rpx;
			height: 40rpx;
			transition: transform 0.3s ease;
		}

		/* 3D悬浮动效 */
		&:active {
			transform: translateY(-2rpx) scale(0.95);

			.item-img-box {
				transform: scale(1.1);
			}
		}
	}

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