<template>
  <div>
    <MainHeader theme="white" :opacity-bg="true" :is-fixed="show">
      <template #logo>
        <svg-icon iconClass="logo3" width="84" height="24"/>
      </template>
    </MainHeader>

    <div class="banner bg-blue-600">
      <div class="w-bodySet mx-auto pt-16 flex pl-60 pr-44 justify-between items-center">
        <div class="text-2xl font-semibold text-white leading-10">
          构建“区块链+”全领域防伪溯源平台
          <br>
          打造区块链前沿落地应用。
        </div>
        <svg-icon iconClass="solutionBanner" width="478" height="233"/>
      </div>
    </div>
    <div ref="nav" :class="!show ? ' fixed top-0' : ''" class="w-full">
      <HoverNav />
    </div>
    <slot>
      <router-view />
    </slot>
    <MainFooter />
  </div>
</template>

<script setup lang="ts">
import MainHeader from '../MainPage/Header.vue';
import MainFooter from '../MainPage/Footer.vue';
import HoverNav from './HoverNav.vue';
import { computed, ref } from 'vue';

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})


/* 控制hover nav样式 */
let offSetTop = ref(0)
const nav = ref()
let show = ref(true)
const NAV_OFFSET_TOP = 300
const handleScroll = (e: Event): void => {
  const target: HTMLDocument = e.target as HTMLDocument;
  offSetTop.value = target.scrollingElement?.scrollTop as number;
  if (offSetTop.value > nav.value.offsetTop - nav.value.clientHeight) {
    show.value = false
  }
  if (offSetTop.value < NAV_OFFSET_TOP) {
    show.value = true
  }
  console.log(offSetTop.value, nav.value.offsetTop);
}

window.addEventListener("scroll", handleScroll);

</script>
