<template>
  <div>
    <div class="md:hidden fixed w-full flex flex-row py-4 px-2">
      <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"
      :class="[opacityBg ? '' : ' bg-white bg-opacity-90 border-b border-gray-200', isFixed ? 'fixed' : '']"
    >
      <div
        class="relative z-20 w-full"
        @mouseleave="handleHover($event)"
        :class="[theme == 'white' ? ' bg-blue-600 bg-opacity-90' : '']"
      >
        <div
          class="mx-auto px-20 pt-3 flex-row justify-between flex relative z-30 items-center"
          :class="[
            fullWidth ? ' w-full' : ' w-bodySet'
          ]"
        >
          <slot name="logo" />
          <div
            class="text-sm font-medium flex flex-row items-center justify-between -mb-1"
            :class="theme === 'white' ? ' text-white' : ' text-black '"
          >
            <div
              class="mr-14 cursor-pointer pb-3 px-2 border-b-2 border-transparent leading-7"
              :class="[theme === 'white' ? '' : 'hover:text-mainBlue  hover:border-mainBlue',
              activeRoute == NAV_EVENT.NAV0 ? ' text-mainBlue' : '']"
              @mouseenter="handleHover($event, NAV_EVENT.NAV0)"
              @click="handleClick($event, NAV_EVENT.NAV0)"
            >首页</div>
            <div
              class="flex items-center mr-10 px-2 cursor-pointer pb-3 border-b-2 border-transparent"
              :class="[theme === 'white' ? '' : 'hover:text-mainBlue hover:border-mainBlue',
              activeRoute == NAV_EVENT.NAV1 ? ' text-mainBlue' : '']"
              @mouseenter="handleHover($event, NAV_EVENT.NAV1)"
            >
              存证溯源
              <svg-icon
                iconClass="arrowDown"
                class="w-4 h-4 ml-2"
                :class="[currentNav == NAV_EVENT.NAV1 ? 'transform rotate-180 transition duration-150' : 'transform rotate-0 transition duration-150',
                currentNav == NAV_EVENT.NAV1 && theme !== 'white' ? 'text-mainBlue' : '']"
              />
            </div>
            <div
              class="flex items-center mr-10 px-2 cursor-pointer pb-3 border-b-2 border-transparent"
              :class="[theme === 'white' ? '' : 'hover:text-mainBlue hover:border-b-2 hover:border-mainBlue']"
              @mouseenter="handleHover($event, NAV_EVENT.NAV2)"
              @click="handleClick($event, NAV_EVENT.NAV2)"
            >
              解决方案
              <svg-icon
                iconClass="arrowDown"
                class="w-4 h-4 ml-2"
                :class="[theme === 'white' ? '' : 'hover:text-mainBlue  hover:border-b-2 hover:border-mainBlue',
                currentNav == NAV_EVENT.NAV1 && theme !== 'white' ? 'text-mainBlue' : '',
                currentNav == NAV_EVENT.NAV2 ? 'transform rotate-180 transition duration-150' : 'transform rotate-0 transition duration-150']"
              />
            </div>
            <div
              class="cursor-pointer mr-10 px-2 pb-3 border-b-2 border-transparent leading-7"
              :class="[theme === 'white' ? '' : 'hover:text-mainBlue hover:border-b-2 hover:border-mainBlue',
              activeRoute == NAV_EVENT.NAV3 ? ' text-mainBlue' : '']"
              @mouseenter="handleHover($event, NAV_EVENT.NAV3)"
              @click="handleClick($event, NAV_EVENT.NAV3)"
            >帮助中心</div>
            <MainButton
              text="登录平台"
              @handleClick="handleClick($event, NAV_EVENT.NAV4)"
              class="mb-4"
              :theme="theme === 'white' ? 'white' : 'main'"
            />
          </div>
        </div>
        <div
          :class="[hovering ? ' bg-white' : ' h-0 overflow-hidden', theme == 'white' ? ' mt-14' : 'pt-14', listHeight]"
          class="transition-all ease-in-out duration-300 fixed top-0 w-full z-20"
        >
          <div class="w-full border-t border-gray-200" v-show="hovering">
            <div class="w-bodySet mx-auto pt-4 pb-10">
              <hoverBar :data="list" @goToWeb="hovering = false" />
            </div>
          </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 '@/Layouts/MainPage/hoverBar.vue';
import { provennanceList } from '@/context/provenance';
import { solutionList } from '@/context/solution';
import { useRoute, useRouter } from 'vue-router';

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

/* handle Nav Click */
enum NAV_EVENT {
  NAV0 = "Home",
  NAV1 = "PROVE",
  NAV2 = "Solutions",
  NAV3 = "HelpCenter",
  NAV4 = "LOGIN"
}

let currentNav = ref(NAV_EVENT.NAV0 as (NAV_EVENT | undefined))

const route = useRoute()
const activeRoute = computed(() => {

  let name = route.name as unknown as string
  if (name == 'PersonalProvenance' || name == 'CompanyProvenance' || name == 'AutoDeposits' || name == 'Mail' || name == 'DigitalAssets') {
    name = NAV_EVENT.NAV1
  }
  console.log(name == NAV_EVENT.NAV1);
  return name
})

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

const listHeight = computed(() => {
  return !currentNav.value ? undefined : currentNav.value == NAV_EVENT.NAV1 ? 'h-72' : 'h-52'
})

const router = useRouter()
const handleClick = (e: Event, item: NAV_EVENT) => {
  currentNav.value = item
  if (currentNav.value == NAV_EVENT.NAV0 || currentNav.value == NAV_EVENT.NAV2 || currentNav.value == NAV_EVENT.NAV3) {
    router.push({ name: item })
  }
  if (item == NAV_EVENT.NAV4) {
    window.open('https://slc.8n.cn/login')
  }
}

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

const handleHover = (e: Event, type?: NAV_EVENT) => {
  console.log(hovering.value);

  if (e.type === 'mouseenter') {
    if (type == NAV_EVENT.NAV3 || type == NAV_EVENT.NAV0) {
      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>

