<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="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,
			};
		},
		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;
			}
		},
		methods: {
			// 点击按钮
			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% - 48rpx);
		// max-width: 680rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		.tab-list{
			height: 120rpx;
		}
		.tab-list-default{
			background-color: rgba(255, 255, 255, 0.85);
			border-radius: 28rpx;
			box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10rpx);
		}
		.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: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
				position: relative;
			}

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

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