<script setup lang="ts">
import { RouterLink } from "vue-router"
import { STORAGE_KEY } from "~/utils/constants"
import storage from "~/utils/storage"
import { useUserStore } from "../store/user"

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const options: MenuOption[] = [
  {
    label: () => h(RouterLink, { to: "/" }, { default: () => "前台" }),
    key: "return to OJ",
  },
  {
    label: () => h(RouterLink, { to: "/admin" }, { default: () => "管理" }),
    key: "admin home",
  },
  {
    label: () =>
      h(RouterLink, { to: "/admin/config" }, { default: () => "设置" }),
    key: "admin config",
  },
  {
    label: () =>
      h(RouterLink, { to: "/admin/problem/list" }, { default: () => "题目" }),
    key: "admin problem list",
  },
  {
    label: () =>
      h(RouterLink, { to: "/admin/comment/list" }, { default: () => "评论" }),
    key: "admin comment list",
  },
  {
    label: () =>
      h(RouterLink, { to: "/admin/user/list" }, { default: () => "用户" }),
    key: "admin user list",
  },
  {
    label: () =>
      h(RouterLink, { to: "/admin/contest/list" }, { default: () => "比赛" }),
    key: "admin contest list",
  },
  {
    label: () =>
      h(
        RouterLink,
        { to: "/admin/announcement/list" },
        { default: () => "公告" },
      ),
    key: "admin announcement list",
  },
]

const active = computed(() => (route.name as string) || "home")

onMounted(async () => {
  if (!storage.get(STORAGE_KEY.AUTHED)) {
    router.replace("/")
  } else {
    await userStore.getMyProfile()
    if (!userStore.isAdminRole) {
      router.replace("/")
    }
  }
})
</script>

<template>
  <n-layout has-sider position="absolute">
    <n-layout-sider width="100" bordered :native-scrollbar="false">
      <n-menu :options="options" :value="active" />
    </n-layout-sider>
    <n-layout-content content-style="padding: 16px; min-width: 600px">
      <router-view></router-view>
    </n-layout-content>
  </n-layout>
</template>

<style scoped></style>
