<template>
	<view class="page-container">
		<Header :showBack="true" backIconColor="#e6e6e6" />
		<StarCityContent />
		
		<!-- 蒙层 - 导航栏展开时显示 -->
		<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
		
		<BottomNav :activeTab="3" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
	</view>
</template>

<script setup>
import { ref } from "vue";
import Header from "../components/Header.vue";
import BottomNav from "../components/BottomNav.vue";
import StarCityContent from "../components/StarCityContent.vue";

const navExpanded = ref(false);

const handleTabChange = (newTab) => {
	const routes = [
		'/pages/ai-dazi/index',
		'/pages/starbook/index',
		'/pages/castlove/mall',
		'/pages/starcity/index',
		'/pages/square/square'
	];
	
	if (newTab >= 0 && newTab < routes.length) {
		uni.navigateTo({
			url: routes[newTab]
		});
	}
};
</script>

<style scoped>
.page-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

.nav-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 999;
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>
