<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 w-full fixed" @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]"
      >
        <img src="@/assets/logo.png" class="w-20 h-6" />
        <div class="text-sm text-gray-800 font-medium flex flex-row items-center">
          <div
            class="pr-14 hover:text-mainBlue cursor-pointer"
            @click="handleClick($event, NAV_EVENT.NAV0)"
          >首页</div>
          <div
            class="flex items-center pr-12 hover:text-mainBlue cursor-pointer"
            @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 hover:text-mainBlue"
            @mouseenter="handleHover($event, NAV_EVENT.NAV2)"
            @click="handleClick($event, NAV_EVENT.NAV2)"
          >
            解决方案
            <svg-icon iconClass="arrowDown" class="w-3 h-3 hover:text-mainBlue" />
          </div>
          <div
            class="cursor-pointer pr-12 hover:text-mainBlue"
            @mouseenter="handleHover($event, NAV_EVENT.NAV3)"
            @click="handleClick($event, NAV_EVENT.NAV3)"
          >帮助中心</div>
          <MainButton text="登录平台" @handleClick="handleClick($event, NAV_EVENT.NAV4)" />
        </div>
      </div>
      <div
        :class="hovering ? ' bg-white pt-12 h-72' : ' h-0 overflow-hidden'"
        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-5 pb-10">
          <hoverBar :data="list" />
        </div>
      </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 { debounce } from "lodash";
import { provennanceList } from '@/context/provenance';
import { solutionList } from '@/context/solution';
import { useRouter } from 'vue-router';

const props = withDefaults(defineProps<
  {
    bgTransparent?: boolean,
    fullWidth: boolean
  }
>(), {
  bgTransparent: true,
  fullWidth: 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.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>

