<template>
  <el-menu
    class="app-header-menu justify-end"
    :mode="mode"
    :default-active="$route.fullPath"
    router
    @select="$emit('select')"
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-sub-menu index="club">
      <template #title>社团</template>
      <el-menu-item
        v-if="userStore.isRouteAccessible('/club') === true"
        index="/club"
        class="text-center"
      >
        社团列表
      </el-menu-item>
      <el-sub-menu
        v-if="festivalMenuItems.some(({ to }) => userStore.isRouteAccessible(to) === true)"
        class="festival-menu"
        index="festival"
      >
        <template #title>社团文化节</template>
        <template v-for="{ imgURL, title, to } of festivalMenuItems">
          <festival-menu-item
            v-if="userStore.isRouteAccessible(to) === true"
            :imgURL="imgURL"
            :title="title"
            :to="to"
          />
        </template>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item v-if="userStore.isRouteAccessible('/manage') === true" index="/manage">
      管理
    </el-menu-item>
  </el-menu>
</template>
<style lang="scss" scoped>
.app-header-menu {
  --el-menu-horizontal-height: var(--header-height);
  --el-menu-bg-color: transparent;
  --el-menu-border-color: transparent;
  &.el-menu--horizontal {
    flex: 1;
    margin-right: 10px;
  }
  &.el-menu--vertical {
    --el-menu-item-height: 40px;
    --el-menu-sub-item-height: var(--el-menu-item-height);
  }
  :is(.el-menu-item, .el-sub-menu__title) {
    user-select: none;
  }
}
</style>
<script lang="ts">
export type MenuItem = {
  imgURL: string;
  title: string;
  to: string;
};
export type MenuItemNoImage = StrictOmit<MenuItem, 'imgURL'>;
</script>
<script setup lang="ts">
import FestivalMenuItem from '@/components/app/FestivalMenuItem.vue';
import { useUserStore } from '@/stores/user';
import type { StrictOmit } from '@/utils/types';
import { reactive } from 'vue';
const userStore = useUserStore();
const festivalMenuItems = reactive<MenuItem[]>([
  {
    imgURL: '/2048.png',
    title: '2048',
    to: '/2048',
  },
  {
    imgURL: '/gobang.svg',
    title: '五子棋',
    to: '/gobang',
  },
]);
defineProps<{
  mode: 'horizontal' | 'vertical';
}>();
defineEmits(['select']);
</script>
