<template>
	<view class="main-tabs-container">
		<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false">
			<view class="tab-list">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index"
					class="tab-item"
					:class="{ 'active': currentIndex === index }"
					@click="switchTab(index)">
					<text class="tab-name">{{ tab.name }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'MainTabs',
	props: {
		// 当前激活的 tab 索引
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentIndex: this.current,
			tabs: [
				{ name: '首页', path: '/pages/index/index' },
				{ name: '聊天', path: '/pages/chat/simple' },  // 改为简化版聊天页面
				{ name: '唱歌', path: '/pages/index/index?tab=2' },
				{ name: '跳舞', path: '/pages/index/index?tab=3' },
				{ name: '换服装', path: '/pages/index/replacement' },
				{ name: '刷礼物', path: '/pages/index/index?tab=5' },
				{ name: '商城', path: '/pages/index/index?tab=6' },
				{ name: '短剧', path: '/pages/index/index?tab=7' }
			]
		}
	},
	watch: {
		current(newVal) {
			this.currentIndex = newVal;
		}
	},
	methods: {
		switchTab(index) {
			console.log('Tab 组件：切换到索引', index, '对应 Tab:', this.tabs[index].name);
			
			const tab = this.tabs[index];
			
			// 如果是当前页面，不跳转
			if (this.currentIndex === index) {
				return;
			}
			
			// 特殊处理：首页、聊天、换服装使用 redirectTo
			if (index === 0) {
				// 首页
				uni.redirectTo({
					url: '/pages/index/index'
				});
			} else if (index === 1) {
				// 聊天 - 跳转到简化版
				uni.redirectTo({
					url: '/pages/chat/simple'
				});
			} else if (index === 4) {
				// 换服装
				uni.redirectTo({
					url: '/pages/index/replacement'
				});
			} else {
				// 其他 tab 返回首页并切换到对应 tab
				uni.redirectTo({
					url: `/pages/index/index?tab=${index}`
				});
			}
		}
	}
}
</script>

<style scoped>
.main-tabs-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	padding: 10rpx 0;
	padding-top: calc(10rpx + var(--status-bar-height));
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-scroll {
	white-space: nowrap;
}

.tab-list {
	display: inline-flex;
	padding: 0 20rpx;
}

.tab-item {
	display: inline-block;
	padding: 15rpx 30rpx;
	margin: 0 10rpx;
	font-size: 28rpx;
	color: #666;
	border-radius: 30rpx;
	transition: all 0.3s;
}

.tab-item.active {
	color: #fff;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	font-weight: bold;
}

.tab-name {
	white-space: nowrap;
}
</style>
