<template>
  <router-link
    v-if="!hasChildren"
    :to="item.index"
    class="nav-menu-item"
    :class="{ 'is-active': isActive }"
  >
    {{ item.label }}
  </router-link>

  <div
    v-else
    class="nav-menu-item has-children"
    :class="{ 'is-active': isActive }"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <span class="nav-menu-item-label">{{ item.label }}</span>
    <div v-show="panelVisible" class="mega-panel">
      <div v-for="group in item.children" :key="group.id" class="mega-group">
        <div class="mega-group-title">{{ group.label }}</div>
        <div class="mega-group-items">
          <router-link
            v-for="child in group.children"
            :key="child.id"
            :to="child.index"
            class="mega-item"
            @click="panelVisible = false"
          >
            <span class="mega-item-text" :title="child.label">{{
              child.label
            }}</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import type { MenuItem } from '@/router/menu'

const props = defineProps<{
  item: MenuItem
}>()

const route = useRoute()
const panelVisible = ref(false)

const hasChildren = computed(
  () => !!props.item.children && props.item.children.length > 0,
)

const isRouteIndex = (index: string) => index.startsWith('/')

const isActive = computed(() => {
  return checkActive(props.item)
})

function checkActive(menuItem: MenuItem): boolean {
  if (isRouteIndex(menuItem.index) && route.path === menuItem.index) {
    return true
  }
  if (menuItem.children) {
    return menuItem.children.some((child) => checkActive(child))
  }
  return false
}

const onMouseEnter = () => {
  panelVisible.value = true
}

const onMouseLeave = () => {
  panelVisible.value = false
}
</script>

<style lang="scss" scoped>
.nav-menu-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;

  &:hover .nav-menu-item-label {
    color: #409eff;
    font-weight: 500;
  }
  &.is-active {
    color: #409eff;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #409eff;
    }
  }
  &.is-active .nav-menu-item-label {
    font-weight: 500;
  }
}

.has-children {
  > span {
    pointer-events: none;
  }
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px 0;
  z-index: 2000;
  min-width: 280px;
  width: 580px;
}

.mega-group {
  display: flex;
  align-items: flex-start;
  padding: 8px 20px;

  & + & {
    border-top: 1px solid #f0f0f0;
  }
}

.mega-group-title {
  font-weight: bold;
  color: #303133;
  font-size: 14px;
  white-space: nowrap;
  min-width: 80px;
  line-height: 32px;
}

.mega-group-items {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-item {
  display: block;
  min-width: 0;
  padding: 6px 12px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;

  &:hover {
    color: #409eff;
  }

  &.router-link-exact-active {
    color: #409eff;
    font-weight: 600;
  }
}

.mega-item-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
