<template>
  <view class="home-page" :style="backgroundStyle">
    <!-- 顶部渐变背景 -->
    <view :style="topGradientStyle"></view>

    <!-- 状态栏占位 -->
    <view class="status-bar"></view>

    <!-- 小程序端右上角胶囊菜单栏占位 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="capsule-menu-section"></view>
    <!-- #endif -->

    <!-- 搜索栏 -->
    <view class="search-section">
      <search-bar ref="searchBarRef" :placeholder="'请输入搜索关键字'" :showSearchButton="true" @search="handleSearch"
        @input="handleSearchInput" @clear="handleClearSearch" />
    </view>

    <!-- 轮播横幅 -->
    <view class="banner-section">
      <shop-swiper v-if="homeData.adv" :isFullUrl="true" :height="250" :list="homeData.adv" />
    </view>

    <!-- 服务网格 -->
    <view class="service-grid-section">
      <service-grid v-if="homeData.menu" :list="homeData.menu" />
    </view>

    <!-- 公告栏 -->
    <view class="notice-section">
      <notice-bar v-if="homeData.notice" :noticeData="homeData.notice" :prefix="true" :suffix="true"
        @noticeClick="handleNoticeClick" />
    </view>

    <!-- 导航标签 -->
    <view class="tab-section">
      <tab-navigation v-if="homeData.switchList" :activeTab="activeTab" :switchList="homeData.switchList"
        @tabChange="handleTabChange" />
    </view>

    <!-- 热门推荐 -->
    <view class="hot-recommend-section">
      <tab-content :activeTab="activeKey" ref="tabContentRef" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
  import { onMounted, onUnmounted, ref } from 'vue'
  import { useHomePage } from '@/composables/useHomePage'
  // import SearchBar from '@/components/search-bar/search-bar.vue'
  import ServiceGrid from './components/service-grid.vue'
  import TabNavigation from './components/tab-navigation.vue'
  import TabContent from './components/tab-content.vue'


  // 使用首页逻辑
  const {
    backgroundStyle,
    topGradientStyle,
    isRefreshing,
    isLoading,
    hasMore,
    currentPage,
    bannerList,
    noticeBarList,
    categoryList,
    hotRecommendList,
    initPage,
    onRefresh,
    onLoadMore,
    resetState,
    homeData
  } = useHomePage()

  // 搜索栏组件引用
  const searchBarRef = ref()
  const tabContentRef = ref(null)

  // 当前激活的 tab
  const activeTab = ref(0)
  const activeKey = ref('goods')

  const handleNoticeClick = (index : number) => {
    console.log('handleNoticeClick', index)

    // uni.navigateTo({
    //   url: '/pagesOther/pages/blank/rich-text',
    // })
  }

  // 处理 tab 变化
  const handleTabChange = ({ index, tab } : { index : number; tab : any }) => {
    activeTab.value = index
    activeKey.value = tab.keys
    // 这里可以根据不同的 tab 来加载不同的数据或切换组件
  }

  // 处理搜索
  const handleSearch = (keyword : string) => {
    // tabContentRef.value.queryParams.keywords = keyword
    // tabContentRef.value.getList()
    // 这里可以添加搜索逻辑，比如跳转到搜索页
  }

  // 处理搜索输入
  const handleSearchInput = (keyword : string) => {
    tabContentRef.value.queryParams.keywords = keyword
    tabContentRef.value.getList()
    //  console.log('搜索输入:', keyword)
  }

  // 处理清空搜索
  const handleClearSearch = () => {
    tabContentRef.value.queryParams.keywords = ''
    tabContentRef.value.getList()
    console.log('清空搜索')
  }

  // 页面生命周期
  onMounted(() => {
    initPage()
  })

  onUnmounted(() => {
    resetState()
  })

  onPullDownRefresh(() => {
    console.log("下拉刷新")
  })
  onReachBottom(() => {
    tabContentRef.value.getMoreData()
  })
</script>

<style lang="scss" scoped>
  @import '@/styles/common.scss';

  .home-page {
    position: relative;
    min-height: 100vh;
    padding: 0 32rpx;
    // 底部状态栏一般建议预留60rpx-100rpx，具体根据实际底部栏高度调整
    padding-bottom: 60rpx;
  }

  .status-bar {
    height: 88rpx;
    background: transparent;
    position: relative;
    z-index: 2;
  }

  .capsule-menu-section {
    height: 100rpx;
  }

  .search-section {
    position: relative;
    z-index: 2;
    margin-bottom: 20rpx;
  }

  .banner-section {
    position: relative;
    z-index: 2;
    margin-bottom: 22rpx;
  }

  .service-grid-section {
    margin-bottom: 32rpx;
  }

  .notice-section {
    margin-bottom: 40rpx;
  }

  .tab-section {
    margin-bottom: 40rpx;
  }

  .hot-recommend-section {
    margin-bottom: 44rpx;
  }
</style>
