<template>
  <view
      class="home-container"
      :style="{ 'margin-top': `${statusBarHeight}px` }">
    <CanvasPage />
    <!-- h5 tabbar 底部 -->
    <!-- <view class="h5-tabbar-height"></view> -->
    <adWindow></adWindow>
    <ReturnTop :scroll-top="scrollTop" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/modules/useMainStore'
import { useRouter } from "@/hooks/useRouter";
import CanvasPage from '@/components/canvasShow/canvasShowPage.vue'
import ReturnTop from "@/components/ReturnTop/index.vue"
import adWindow from "@/components/adWindow/adWindow.vue"
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
import { useScroll } from "@/hooks/useScroll";
import { homeLogoIcon } from "@/utils/images";
import { useShare } from "@/hooks/useShare";

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


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

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


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


  // 导航栏距顶距离
  uni.getSystemInfo({
    //获取系统信息
    success: res => {
      statusBarHeight.value = res.statusBarHeight;
    },
    fail(err) {
      // console.log(err);
    }
  });
})

const {shareAppMessage, shareTimeline} = useShare();
onShareAppMessage(shareAppMessage)
onShareTimeline(shareTimeline)
const {scrollTop} = useScroll()

</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;
      margin-left: 50rpx;

      .search-input {
        margin-left: 30rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}


.goods-row {
  padding: 0 8rpx;
}


</style>
