<template>
  <el-menu
    class="app-header-menu justify-end"
    :class="[`app-header-menu--${mode}`]"
    :mode="mode"
    :default-active="$route.fullPath"
    router
    @select="$emit('select')"
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-sub-menu class="festival-menu" index="festival">
      <template #title>社团文化节</template>
      <template v-for="{ src, title, to, vIf } of festivalMenuItems">
        <festival-menu-item v-if="!vIf || vIf()" :key="to" :src="src" :title="title" :to="to" />
      </template>
    </el-sub-menu>
  </el-menu>
</template>
<style lang="scss" scoped>
.app-header-menu {
  --el-menu-horizontal-height: var(--header-height);
}
.app-header-menu--horizontal {
  flex: 1;
  margin-right: 10px;
}
.app-header-menu :is(.el-menu-item, .el-sub-menu__title) {
  user-select: none;
}
</style>
<script setup lang="ts">
import FestivalMenuItem from '@/components/app/FestivalMenuItem.vue';
import { useUserStore } from '@/stores/user';
import { reactive } from 'vue';
const userStore = useUserStore();
const festivalMenuItems = reactive([
  {
    src: '/2048.png',
    title: '2048',
    to: '/2048',
  },
  {
    src: '/gobang.svg',
    title: '五子棋',
    to: '/gobang',
    vIf: () => userStore.logined,
  },
]);
defineProps<{
  mode: 'horizontal' | 'vertical';
}>();
defineEmits(['select']);
</script>
