<template>
  <view class="page-container">
    <view class="nav-back" @tap="goBack">
      <text class="nav-back-icon">←</text>
    </view>

    <CastloveContent :type="initialType" />

    <!-- 蒙层 - 导航栏展开时显示 -->
    <view
      v-if="navExpanded"
      class="nav-mask"
      @click="navExpanded = false"
    ></view>

    <BottomNav
      :activeTab="2"
      :isExpanded="navExpanded"
      @update:activeTab="handleTabChange"
      @update:isExpanded="navExpanded = $event"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import BottomNav from "../components/BottomNav.vue";
import CastloveContent from "./craft-select.vue";

const navExpanded = ref(false);
// 从入口 URL 接收 type,作为组件的初始分类
// (由主Tab square.vue / CastloveContent.vue 跳转时通过 query 传入)
const initialType = ref("star_card");

const handleTabChange = (newTab) => {
  const routes = [
    "/pages/ai-dazi/index",
    "/pages/starbook/index",
    "/pages/castlove/mall",
    "/pages/starcity/index",
    "/pages/profile/profile",
  ];

  if (newTab >= 0 && newTab < routes.length) {
    uni.navigateTo({
      url: routes[newTab],
    });
  }
};

const goBack = () => {
  // 获取页面栈
  const pages = getCurrentPages();
  if (pages.length > 1) {
    // 有上一页，执行返回
    uni.navigateBack();
  } else {
    // 没有上一页，跳转到square页面
    uni.reLaunch({
      url: "/pages/square/square",
    });
  }
};

// uni-app 页面生命周期:接收跳转参数
onLoad((options) => {
  if (options && options.type) {
    initialType.value = options.type;
  }
});
</script>

<style scoped>
.page-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.nav-back {
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  top: 96rpx;
  left: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  /* background: rgba(255,255,255,0.5);
	border-radius: 50%; */
}

.nav-back-icon {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

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