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

      <!-- <el-menu class="HeaderNav-box" mode="horizontal" @select="handleSelect" :ellipsis="false"
        active-text-color="black" active-color="black" text-color="black" :popper-offset="-16">
        <el-menu-item v-for="(item, index) in props.navList" :key="item.name" :index="item.name"
          class="HeaderNav-navItems">
          <nuxt-link v-if="item.children.length === 0" :to="getHref(item.href)" class="font">{{ item.name }}</nuxt-link>
        </el-menu-item>
        <el-sub-menu v-for="(item, index) in props.navList" :key="item.name" :index="item.name">
          <template #title>
            <div class="HeaderNav-navItems">{{ item.name }}</div>
          </template>
          <el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name"
            class="HeaderNav-navItems">
            {{ _item.name }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu> -->



      <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" @mouseenter="enterNavEnter">
              {{ _item.name }}
              <!-- <div v-if="_item.children">
                <div v-if="_item.children.length >= 1" @mouseenter="enterNavEnter">&nbsp;&nbsp;></div>

                <div class="HeaderNav-navItems-child-box dNone" style="margin-left: 210px;margin-top: 20px;"@mouseleave.capture="enterNavLeave">
                  <nuxt-link :to="getHerf(_item['href'])" class="font " @mouseenter="enterNavEnter">
                    {{ _item.name }}
                    <div v-if="_item.children">
                      <div v-if="_item.children.length >= 1">&nbsp;&nbsp;></div>
                    </div>
                  </nuxt-link>
                </div>
              </div> -->
            </nuxt-link>
          </div>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script setup>

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

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>