<template>
  <header
    class="fixed left-0 right-0 top-0 z-50 w-full bg-transparent"
    :class="{
      'backdrop-blur-2xl': isScrolled || isNavbarOpen,
      'h-full': isNavbarOpen,
    }"
  >
    <div
      class="header-bg max-w-[1920px] mx-auto flex h-17 sm:h-13 w-full items-center justify-between px-28 sm:px-6 md:px-[88px]"
    >
      <h1 class="text-3xl md:text-2xl sm:text-base font-bold text-[#52AC63]">BTDK</h1>
      <nav class="absolute inset-0">
        <ul
          class="flex justify-center text-xl gap-x-4 leading-17 sm:leading-13 text-white sm:hidden md:hidden"
        >
          <li
            v-for="nav in navItems"
            :key="nav.path"
            class="relative h-full w-32 text-center text-inherit after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
            @click="onNavPush(nav)"
          >
            <span class="text-inherit">
              {{ nav.name }}
            </span>
          </li>
        </ul>
      </nav>
      <Menu as="div" class="hidden h-full sm:block md:block" v-slot="{ open: menuOpen }">
        <MenuButton class="h-full">
          <div
            class="navbar-control"
            :class="{ open: isNavbarOpen }"
            @click="toggleNavbar(menuOpen)"
          >
            <span class="control-icon"></span>
            <span class="control-icon"></span>
            <span class="control-icon"></span>
          </div>
        </MenuButton>
        <transition
          enter-active-class="transition-all duration-300 overflow-hidden"
          enter-from-class="max-h-0 opacity-70"
          enter-to-class="h-full opacity-100"
          leave-active-class="transition-all duration-300 overflow-hidden"
          leave-from-class="h-full opacity-100"
          leave-to-class="max-h-0 opacity-70"
        >
          <div v-show="isNavbarOpen">
            <MenuItems
              as="ul"
              class="header-bg border-t-1 absolute inset-0 top-17 sm:top-13 z-50 overflow-hidden border-t-[1px] border-[hsla(0,0%,100%,.06)] text-white backdrop-blur-2xl"
              static
            >
              <template v-for="nav in navItems" :key="nav.path">
                <MenuItem
                  as="li"
                  v-slot="{ close }"
                  class="cursor-pointer text-nowrap text-center text-base md:text-lg"
                  @click="onNavClick(nav, menuOpen)"
                >
                  <Disclosure as="div" class="size-full" v-slot="{ open }">
                    <DisclosureButton as="p" class="relative py-7">
                      <span>{{ nav.name }} </span>
                      <Icon
                        name="mingcute:up-line"
                        :class="open ? '' : 'rotate-180 transform'"
                        class="absolute right-5 top-1/2 -translate-y-1/2 transition-transform duration-300"
                        :ssr="true"
                        v-if="!!nav.children?.length"
                      />
                    </DisclosureButton>
                    <transition
                      enter-active-class="transition-all duration-700 overflow-hidden"
                      enter-from-class="max-h-0 opacity-70"
                      enter-to-class="max-h-[300px] opacity-100"
                      leave-active-class="transition-all duration-300 overflow-hidden"
                      leave-from-class="max-h-[300px] opacity-100"
                      leave-to-class="max-h-0 opacity-70"
                    >
                      <DisclosurePanel as="div" v-if="!!nav.children?.length">
                        <ul class="flex flex-col bg-[hsla(0,0%,100%,.06)]">
                          <li
                            class="text-nowrap py-7 text-center"
                            v-for="child in nav.children"
                            :key="child.path"
                            @click="onNavClick(child, menuOpen)"
                          >
                            <span>
                              {{ child.name }}
                            </span>
                          </li>
                        </ul>
                      </DisclosurePanel>
                    </transition>
                  </Disclosure>
                </MenuItem>
              </template>
            </MenuItems>
          </div>
        </transition>
      </Menu>
    </div>
  </header>
  <slot />
  <footer>
    <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
      <div class="max-w-[1920px] h-[848px] md:h-[362px] sm:h-[166px] m-auto relative">
        <img src="/images/about/mapBg.png" class="absolute inset-0" />
        <div
          class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm-[300px] sm:hidden sm:h-[150px] md:px-[20px] sm:px-[10px] bg-white absolute bottom-5 md:-bottom-6 sm:bottom-0 left-1/2 -translate-x-1/2 flex items-center"
        >
          <div>
            <div class="flex flex-col">
              <div class="relative">
                <span
                  class="text-[#CBCBCB] text-[78px] md:text-[48px] sm:text-base font-bold opacity-35"
                  >CONTACT</span
                >
                <h4 class="text-[26px] md:text-[18px] sm:text-base absolute top-1/3 text-[#424242]">
                  联系我们
                </h4>
              </div>
              <p class="text-xl text-[#6B6B6B] md:text-base sm:text-sm">
                欢迎与我们取得联系,我们将竭诚为您服务
              </p>
            </div>
          </div>
          <div
            class="flex flex-1 flex-col ml-[100px] md:ml-[30px] sm:ml-[20px] text-[#424242] text-xl md:text-base sm:text-sm"
          >
            <div class="py-7 md:py-3 sm:py-2 flex items-center">
              <img src="/images/about/location.png" class="size-10 md:size-8 sm:size-6 mr-5" />
              来访地址：辉煌国际 北京市海淀区上地十街1号院
            </div>
            <div class="py-7 md:py-3 sm:py-2 border-t-[1px] border-[#979797] flex items-center">
              <img src="/images/about/phone.png" class="size-10 md:size-8 sm:size-6 mr-5" />
              服务邮箱：XXXXX@jsldjf.com
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
<script setup lang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'

const isScrolled = ref(false)
const router = useRouter()
const checkScroll = () => {
  isScrolled.value = window.scrollY > 20
}

onMounted(() => {
  if (typeof window !== 'undefined') {
    checkScroll()
    window.addEventListener('scroll', checkScroll)
  }
})

onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('scroll', checkScroll)
  }
})

const isNavbarOpen = ref(false)
const toggleNavbar = (open: boolean) => {
  isNavbarOpen.value = !isNavbarOpen.value
}

function onNavPush(nav: any) {
  if (!!nav.break) {
    window.open(nav.url, '_blank')
    return
  }
  router.push(nav.path)
}

function onNavClick(nav: any, menuOpen: boolean) {
  if (!!nav.children?.length) {
    return
  }
  onNavPush(nav)
  isNavbarOpen.value = false
}

const navItems = [
  {
    name: '首页',
    path: '/',
  },
  {
    name: '产品中心',
    path: '/products',
    children: [
      {
        name: 'EM系列储能边缘智能网关',
        path: '/products/em-series-energy-storage-edge-intelligent-gateway',
      },
      {
        name: 'EM系列储能边缘智能网关',
        path: '/products/em-series-energy-storage-edge-intelligent-gateway',
      },
    ],
  },
  {
    name: '技术资料',
    path: '',
    break: true,
    url: 'http://62.234.18.176:5181/',
  },
  {
    name: '在线商城',
    path: '/online-store',
  },
  {
    name: '关于我们',
    path: '/aboutUs',
  },
]
</script>
<style scoped>
.header-bg {
  /* @apply bg-[rgba(92,92,92,0.4)] bg-gradient-to-r from-black/40 to-black/40; */
}

/* 子菜单展开收缩动画 */
.transition-all {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* CSS */
.navbar-control {
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.control-icon {
  transition: all 0.3s ease;
}

/* 每个 control-icon 的伪元素 */
.control-icon:before {
  background-color: #fff;
  border-bottom-left-radius: 1px;
  border-top-right-radius: 1px;
  content: '';
  display: block;
  height: 1px;
  transition:
    transform 0.3s ease 0.2s,
    background-color 0.3s ease 0s;
  width: 22px;
  opacity: 0.9;
}
.navbar-control.open .control-icon:before {
  /* background-color: #000; */
}
.navbar-control.open .control-icon:nth-child(1) {
  transform: translateY(7px);
}
.navbar-control.open .control-icon:nth-child(2) {
  opacity: 0;
  transition-duration: 0.3s;
}

.navbar-control .control-icon:nth-child(2) {
  transition-duration: 0.6s;
}

.navbar-control.open .control-icon:nth-child(3) {
  transform: translateY(-7px);
}

/* open 状态下的动画 */
.navbar-control.open .control-icon:nth-child(1):before {
  transform: rotate(45deg);
}
.navbar-control.open .control-icon:nth-child(3):before {
  transform: rotate(-45deg);
}
</style>
