<template>
  <div class="HeaderNav" :style="[props.HeaderNav]">
    <div class="HeaderNav-container">

      <nuxt-link :to="getHerf(item.href)"
        :class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
        v-for="item in props.navList" v-cloak :key="item.name">
        <span v-if="item.children.length === 0" class="font">{{ item.name }}</span>
        <span v-else @mouseenter.self="enterNavEnter" class="font">{{ item.name }}</span>
        <div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
          v-if="item.children.length >= 1">
          <div v-for="_item in item.children" class="HeaderNav-navItems-child-items ">
            <nuxt-link :to="getHerf(_item['href'])" class="font f1" @mouseenter="enterNavEnter">
              {{ _item.name }}
            </nuxt-link>
          </div>

        </div>

      </nuxt-link>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  HeaderNav: Object,
  navList: Array
})
const route = useRouter()
const currentRoute = route.currentRoute.value.matched[0]['name']

//事件
let navTimer = null
const enterNavEnter = e => {
  let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
  ele &&
    ele.classList.remove('dNone')
  clearInterval(navTimer)
  navTimer = setTimeout(() => {
    ele &&
      ele.classList.add('dNone')
  }, 1000)
}
const enterNavLeave = e => {
  let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
  ele &&
    ele.classList.add('dNone')
}
</script>

<style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>