<template>
  <view class="home-container">
    <view class="header-row">
      <Header
          :scroll-top="scrollTop"
          :left-width="140"
          @animation="handleHeaderAnimation"
      >
        <template #left>
          <view class="logo-col">
            <image
                class="logo"
                src="@/static/images/logo.png"
                alt=""
            />
          </view>
        </template>
        <template #default>
          <view
              class="search-col"
              :style="searchShadow"
              @click="toSearch"
          >
            <uv-icon
                name="search"
                size="26"
            />
            <view class="search-input">
              <input
                  type="text"
                  disabled
                  placeholder="搜索商品"
                  @click="toSearch"
              />
            </view>
          </view>
        </template>
      </Header>
    </view>

    <Banner />

    <!-- 宫格菜单 -->
    <GridMenu />

    <!-- 商品 -->
    <template v-if="homeData">
      <!-- 新品首发 -->
      <NewProduct :products="homeData.firstList" />

      <!-- 超值拼团 -->
      <Group
          v-if="false"
          :products="homeData.firstList"
      />

      <!-- 限时秒杀 -->
      <Seckill
          v-if="false"
          :products="homeData.firstList"
      />

      <!-- 砍价专区 -->
      <Bargain
          v-if="false"
          :products="homeData.firstList"
      />

      <!-- 热门直播 -->
      <Live v-if="false" />
      <Recommend ref="recommendRef" />
    </template>
    <!-- h5 tabbar 底部 -->
    <view class="h5-tabbar-height"></view>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import Header from "@/components/Header/index.vue"
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { getBanner, getHomeData } from '@/api/market'
import { useMainStore } from '@/store/store'
import { useRouter } from "@/hooks/useRouter";
import Banner from './components/Banner/index.vue'
import Bargain from './components/Bargain/index.vue'
import GridMenu from './components/GridMenu/index.vue'
import Group from './components/Group/index.vue'
import Live from './components/Live/index.vue'
import NewProduct from './components/NewProduct/index.vue'
import Seckill from './components/Seckill/index.vue'
import Recommend from './components/Recommend/index.vue'
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";

const main = useMainStore()
const {push} = useRouter()
const homeData = ref({})
const recommendRef = ref(null)


async function doGetHomeData() {
  homeData.value = await getHomeData()
}

function toSearch() {
  push({
    url: '/pages/search/search'
  })
}

const searchShadow = ref({
  boxShadow: '0 0 0 #000'
})

function handleHeaderAnimation(numericalValue) {
  searchShadow.value = {
    boxShadow: `0 0 ${ numericalValue * 15 }px #EFEFEF inset`
  }
}

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

onLoad(() => {
  main.init()
  doGetHomeData()
})

onReachBottom(() => {
  unref(recommendRef).onReachBottom && unref(recommendRef).onReachBottom();
})
</script>

<style lang="scss">
.home-container {
  width: 100%;
  position: relative;

  .header-row {
    .logo-col {
      @include useFlex(flex-start, center);
      width: 126rpx;
      aspect-ratio: 126 / 50;

      .logo {
        width: 100%;
        height: 100%;
      }
    }

    .search-col {
      @include useFlex(flex-start, center);
      @include usePadding(30, 15);
      width: 100%;
      height: 60rpx;
      border-radius: 50rpx;
      background: $white-color;

      .search-input {
        margin-left: 30rpx;
      }
    }
  }
}


.goods-row {
  padding: 0 8rpx;
}
</style>
