﻿<template>
  <!-- 页面头部 -->
  <PageHeader title="活氧舱" subtitle="科学训练 · 遇见更好的自己" />

  <!-- 滚动内容区域 -->
  <scroll-view 
    scroll-y 
    @scroll="handleScroll"
    class="scroll-container"
  >
    <!-- 主内容 -->
    <view class="home-page">
      <HomeSkeleton v-if="loading" />
      <template v-else>
        <BannerSwiper />
        <QuickEntry />
        <RecommendCourses ref="recommendCoursesRef" />
        <TodayRecommend ref="todayRecommendRef" />
        <view class="bottom-placeholder"></view>
      </template>
    </view>
  </scroll-view>
  
  <!-- TabBar 固定在底部 -->
  <view class="tabbar-fixed">
    <TabBar />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import BannerSwiper from '@/components/index/BannerSwiper.vue'
import QuickEntry from '@/components/index/QuickEntry.vue'
import RecommendCourses from '@/components/index/RecommendCourses.vue'
import TodayRecommend from '@/components/index/TodayRecommend.vue'
import TabBar from '@/components/TabBar.vue'
import HomeSkeleton from '@/components/Skeleton/HomeSkeleton.vue'
import PageHeader from '@/components/index/PageHeader.vue'

const loading = ref(true)
const recommendCoursesRef = ref(null)
const todayRecommendRef = ref(null)

// 滚动距离
const scrollDistance = ref(0)

// 滚动监听
const handleScroll = (e) => {
  scrollDistance.value = e.detail.scrollTop
  console.log(`滚动距离: ${scrollDistance.value}`)
}

onShow(() => {
  // 页面显示时触发未读消息检查
  uni.$emit('pageShow')
})

onMounted(() => {
  // 设置测试token和userId（实际项目中由登录接口返回）
  const testUserId = 1
  uni.setStorageSync('userId', testUserId)
  
  // 延迟触发未读消息检查，等待子组件挂载完成
  setTimeout(() => {
    uni.$emit('pageShow')
  }, 500)
  
  setTimeout(() => {
    loading.value = false
  }, 1500)
})
</script>

<style lang="scss" scoped>
/* 滚动容器 */
.scroll-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100%;
}

/* 主内容区域 */
.home-page {
  min-height: 100vh;
  padding-bottom: 160rpx;
}

/* 固定 TabBar */
.tabbar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
}

.bottom-placeholder {
  height: 120rpx;
}
</style>
