<template>
  <div>
    <div
      class="md:hidden fixed w-full flex flex-row py-4 px-2"
      :style="bgTransparent ? styleClass.transHeaderBg : styleClass.blurHeaderBg"
    >
      <svg-icon iconClass="menu" class="text-black absolute w-6 h-6" />
      <img src="@/assets/logo.png" class="w-20 mx-auto" />
    </div>
    <!-- <div class="md:hidden h-screen w-1/2 bg-blue-50 absolute">11</div> -->

    <div class="hidden md:block fixed w-full" :class="[opacityBg ? '' : ' bg-white bg-opacity-90']">
      <div class="relative z-20 w-full" @mouseleave="handleHover($event)">
        <div
          class="mx-auto px-20 py-3 flex-row justify-between flex relative z-30"
          :class="[fullWidth ? ' w-full' : 'w-bodySet', bgTransparent ? styleClass.transHeaderBg : styleClass.blurHeaderBg, theme == 'white' ? ' bg-blue-600 bg-opacity-90' : '']"
        >
          <slot name="logo" />
          <div
            class="text-sm font-medium flex flex-row items-center"
            :class="theme === 'white' ? ' text-white' : 'text-gray-800 '"
          >
            <div
              class="pr-14 cursor-pointer"
              :class="theme === 'white' ? '' : 'hover:text-mainBlue'"
              @click="handleClick($event, NAV_EVENT.NAV0)"
            >首页</div>
            <div
              class="flex items-center pr-12 cursor-pointer"
              :class="theme === 'white' ? '' : 'hover:text-mainBlue'"
              @mouseenter="handleHover($event, NAV_EVENT.NAV1)"
              @click="handleClick($event, NAV_EVENT.NAV1)"
            >
              存证溯源
              <svg-icon iconClass="arrowDown" class="w-3 h-3" />
            </div>
            <div
              class="flex items-center pr-12 cursor-pointer"
              :class="theme === 'white' ? '' : 'hover:text-mainBlue'"
              @mouseenter="handleHover($event, NAV_EVENT.NAV2)"
              @click="handleClick($event, NAV_EVENT.NAV2)"
            >
              解决方案
              <svg-icon
                iconClass="arrowDown"
                class="w-3 h-3"
                :class="theme === 'white' ? '' : 'hover:text-mainBlue'"
              />
            </div>
            <div
              class="cursor-pointer pr-12 "
              :class="theme === 'white' ? '' : 'hover:text-mainBlue'"
              @mouseenter="handleHover($event, NAV_EVENT.NAV3)"
              @click="handleClick($event, NAV_EVENT.NAV3)"
            >帮助中心</div>
            <MainButton
              text="登录平台"
              @handleClick="handleClick($event, NAV_EVENT.NAV4)"
              :class="theme === 'white' ? 'bg-white text-blue-600' : ''"
            />
          </div>
        </div>
        <div
          :class="[hovering ? ' bg-white h-64' : ' h-0 overflow-hidden', theme == 'white' ? ' mt-12' : 'pt-12']"
          class="transition-all ease-in-out duration-1000 fixed top-0 w-full z-20"
        >
          <div class="h-px bg-gray-200"></div>
          <div class="w-bodySet mx-auto pt-4 pb-10">
            <hoverBar :data="list" />
          </div>
        </div>
      </div>
      <div v-show="hovering" class="h-screen w-screen bg-black opacity-20 relative z-10"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import styleClass from '@/assets/style/style.module.css'
import { ref, withDefaults, defineProps, reactive, computed } from 'vue';
import MainButton from "@/components/mainButton.vue"
import hoverBar from '@/components/hoverBar.vue';
import { provennanceList } from '@/context/provenance';
import { solutionList } from '@/context/solution';
import { useRouter } from 'vue-router';

const props = withDefaults(defineProps<
  {
    bgTransparent?: boolean,
    fullWidth?: boolean,
    theme?: 'default' | 'white',
    opacityBg?: boolean
  }
>(), {
  bgTransparent: true,
  fullWidth: true,
  theme: 'default',
  opacityBg: false
})

/* handle Nav Click */
let currentNav = ref()

enum NAV_EVENT {
  NAV0 = "HOME",
  NAV1 = "PROVE",
  NAV2 = "SOLUTION",
  NAV3 = "HELPCENTER",
  NAV4 = "Login"
}

const list = computed(() => {
  return !currentNav.value ? undefined : currentNav.value == NAV_EVENT.NAV1 ? provennanceList : solutionList
})

const router = useRouter()
const handleClick = (e: Event, item: NAV_EVENT) => {

  if (item == NAV_EVENT.NAV0) {
    router.push({ name: 'Home' })
  }
  if (item == NAV_EVENT.NAV2) {
    router.push({ name: 'Solutions' })
  }
  if (item == NAV_EVENT.NAV3) {
    router.push({ name: 'HelpCenter' })
  }
}

/* handle Hover */
let hovering = ref(false)

const handleHover = (e: Event, type?: NAV_EVENT) => {
  if (e.type === 'mouseenter') {
    if (type == NAV_EVENT.NAV3) {
      hovering.value = false
      currentNav.value = undefined
    } else {
      hovering.value = true
      currentNav.value = type
    }
  }
  else if (e.type === 'mouseleave') {
    hovering.value = false
    currentNav.value = undefined
  }
}

</script>

