<template>
  <n-layout class="settings-layout" has-sider>
    <n-layout-sider
      class="settings-sidebar"
      :width="150"
      :native-scrollbar="false"
      :bordered="false"
    >
      <n-menu
        :value="activeSetting"
        :options="settingOptions"
        class="settings-menu"
        @update:value="handleSettingChange"
      />
    </n-layout-sider>

    <n-layout-content class="settings-content" :native-scrollbar="false">
      <RouterView />
    </n-layout-content>
  </n-layout>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { RouterView, useRoute, useRouter } from "vue-router"
import type { MenuOption } from "naive-ui"

const route = useRoute()
const router = useRouter()

const settingOptions: MenuOption[] = [
  {
    label: "音乐源",
    key: "settings-source",
  },
  {
    label: "外观",
    key: "settings-appearance",
  },
]

const activeSetting = computed(() => String(route.name ?? "settings-source"))

function handleSettingChange(key: string) {
  void router.push({ name: key })
}
</script>

<style scoped>
.settings-layout {
  width: 100%;
  max-width: 1180px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.settings-sidebar {
  flex: 0 0 190px;
  min-height: 0;
  padding: 0 12px 0 0;
  background: transparent;
}

.settings-menu {
  width: 100%;
  --n-item-text-color: var(--app-text-secondary);
  --n-item-text-color-hover: var(--app-text);
  --n-item-text-color-active: var(--app-primary);
  --n-item-color-active: rgba(180, 83, 42, 0.12);
  --n-item-color-active-hover: rgba(180, 83, 42, 0.16);
}

.settings-menu :deep(.n-menu-item-content) {
  border-radius: 8px;
  box-shadow: none;
}

.settings-menu :deep(.n-menu-item-content:hover),
.settings-menu :deep(.n-menu-item-content--selected),
.settings-menu :deep(.n-menu-item-content::before),
.settings-menu :deep(.n-menu-item-content:hover::before),
.settings-menu :deep(.n-menu-item-content--selected::before) {
  box-shadow: none;
}

.settings-menu :deep(.n-menu-item-content--selected) {
  font-weight: 600;
}

.settings-content {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .settings-layout {
    display: block;
    overflow: visible;
  }

  .settings-sidebar {
    width: 100%;
    height: auto;
    padding: 0 0 18px;
  }

  .settings-menu {
    display: flex;
    overflow-x: auto;
  }
}
</style>
