<template>
  <nav>
    <ul>
      <template v-for="(nav, i) in menuData">
        <li
          @mouseover="OpenMenu(i, 'd')"
          @mouseleave="CloseMenu"
          v-if="nav.show === undefined || nav.show">
          <nav-item :itemData="nav" @click="OpenMenu(i, 'm')" />
          <template
            v-if="nav.sub !== undefined && (nav.showsub === undefined || nav.showsub)">
            <nav
              class="menu-sub menu-side-sub menu-sub-left"
              v-if="openedSub === i"
              @click="OpenMenu(i, 'm')">
              <ul>
                <template v-for="(sub, j) in nav.sub">
                  <li v-if="sub.show === undefined || sub.show">
                    <nav-item :itemData="sub" />
                  </li>
                </template>
              </ul>
            </nav>
          </template>
        </li>
      </template>
    </ul>
  </nav>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import NavItem from '@/components/NavItem.vue'

  interface NavObj {
    [key: string]: any
    sub?: Record<string, any>
  }

  const props = defineProps<{
    menuData: NavObj[]
  }>()

  const openedSub = ref<number | null>(null)

  const OpenMenu = (i: number, d: string) => {
    if (d === 'd' && document.body.offsetWidth >= 992) openedSub.value = i
    if (d === 'm' && document.body.offsetWidth < 992) openedSub.value = i
  }
  const CloseMenu = () => {
    openedSub.value = -1
  }
</script>
