<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from './ui/navigation-menu'

const header_data: Record<string, { title: string, href: string }[]> = {
  探空气球: [{
    title: '重力波单次',
    href: '/balloon/single',
  }, {
    title: '重力波统计',
    href: '/balloon/year',
  }],
  流星雷达: [{
    title: '潮汐波强度',
    href: '/radar/v1',
  }, {
    title: '潮汐波时空变化',
    href: '/radar/v2',
  }],
  Saber: [
    {
      title: '波动拟合图',
      href: '/saber/plot_wave_fitting',
    },
    {
      title: '日数据傅里叶变换分析',
      href: '/saber/day_fft_ifft_plot',
    },
    {
      title: '日周期波动能量分析',
      href: '/saber/day_cycle_power_wave_plot',
    },
    {
      // month_power_wave_plot
      title: ' 月度波动能量分析',
      href: '/saber/month_power_wave_plot',
    },
  ],
}
</script>

<template>
  <NavigationMenu class="mx-auto">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()">
          主页
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem v-for="(thisHeader, headers) in header_data" :key="headers">
        <NavigationMenuTrigger>{{ headers }}</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="w-60 flex flex-col gap-3 p-6">
            <li v-for="header in thisHeader" :key="header.href" class="row-span-3">
              <NavigationMenuLink as-child>
                <a
                  class="block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors space-y-1 focus:bg-accent hover:bg-accent focus:text-accent-foreground hover:text-accent-foreground"
                  :href="header.href"
                >
                  <div class="text-sm font-medium leading-none">
                    {{ header.title }}
                  </div>
                </a>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>
