<script setup lang="ts">
import { ref, onMounted } from "vue";

import { api, globalStore, siteSetting } from "@/api";
import router from "@/router";
import { UserInfoResponseVORoleEnum } from "@/swagger";

const menuIndex = ref<string>(document.location.pathname);

onMounted(() => {
  // 获取站点标题
  api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
    (response) => {
      let vo = response.data;
      if (vo.code === 200) {
        let title = vo.content ?? "网站标题";
        siteSetting.title = title;
        document.title = title;
      }
    }
  );
});

function onSelectMenu(index: string) {
  switch (index) {
    case "/logout": {
      globalStore.currentUserInfo = undefined;
      globalStore.save();
      router.push("/");
      menuIndex.value = "/";
      break;
    }
    default: {
      router.push(index);
    }
  }
}
</script>

<template>
  <el-menu
    :default-active="menuIndex"
    mode="horizontal"
    :ellipsis="false"
    @select="onSelectMenu"
    class="blog-header-menu"
  >
    <el-menu-item index="/">
      {{ siteSetting.title }}
    </el-menu-item>
    <el-menu-item index="/tags"> 标签 </el-menu-item>
    <el-menu-item
      v-for="customMenu in siteSetting.navigation"
      :index="customMenu.text"
    >
      {{ customMenu.text }}
    </el-menu-item>

    <div style="flex-grow: 1" />

    <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
      登录
    </el-menu-item>
    <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
      注册
    </el-menu-item>
    <el-menu-item
      index="/manage"
      v-if="
        globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN
      "
    >
      管理面板
    </el-menu-item>
    <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
      注销
    </el-menu-item>
  </el-menu>
</template>

<style scoped></style>
