<template>
  <n-layout style="height: 100vh" has-sider>
    <n-layout-sider
      bordered
      show-trigger
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      :native-scrollbar="false"
    >
      <div style="height: 60px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e8e8e8;">
        <h3 style="margin: 0; color: #18a058;">运营管理</h3>
      </div>
      <n-menu
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        :value="activeKey"
        @update:value="handleMenuSelect"
      />
    </n-layout-sider>
    <n-layout>
      <n-layout-header bordered style="height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;">
        <div class="header-left">
          <h2 style="margin: 0;">梦幻西游运营管理系统</h2>
        </div>
        <div class="header-right" v-if="adminStore.userInfo">
          <n-dropdown :options="userMenuOptions" @select="handleUserMenuSelect">
            <div class="user-dropdown-trigger">
              <span>{{ adminStore.userInfo.username }}</span>
              <RiArrowDownSLine style="margin-left: 4px;" />
            </div>
          </n-dropdown>
        </div>
      </n-layout-header>
      <n-layout-content style="padding: 24px;">
        <router-view />
      </n-layout-content>
      <n-layout-footer bordered style="padding: 16px; text-align: center;">
        <p style="margin: 0;">© 2026 梦幻西游一站式运营管理平台 - 运营管理系统</p>
      </n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NMenu, NDropdown } from 'naive-ui'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { useAdminStore } from '@/stores/admin'
import { RiDashboardLine, RiArrowDownSLine, RiUserLine, RiLogoutBoxRLine, RiSettings3Line, RiUserSettingsLine, RiToolsLine } from '@remixicon/vue'

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

const activeKey = ref(String(route.name))

const menuOptions = [
  {
    label: () => h(RouterLink, { to: '/admin/dashboard' }, { default: () => '工作台' }),
    key: 'AdminDashboard',
    icon: () => h(RiDashboardLine, { size: '20px' })
  },
  {
    label: '系统管理',
    key: 'SystemManagement',
    icon: () => h(RiSettings3Line, { size: '20px' }),
    children: [
      {
        label: () => h(RouterLink, { to: '/admin/user-management' }, { default: () => '用户管理' }),
        key: 'UserManagement',
        icon: () => h(RiUserSettingsLine, { size: '20px' })
      },
      {
        label: () => h(RouterLink, { to: '/admin/system-config' }, { default: () => '系统配置' }),
        key: 'SystemConfig',
        icon: () => h(RiToolsLine, { size: '20px' })
      }
    ]
  }
]

const userMenuOptions = [
  {
    label: '用户信息',
    key: 'userInfo',
    icon: () => h(RiUserLine, { size: '18px' })
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: () => h(RiLogoutBoxRLine, { size: '18px' })
  }
]

const handleMenuSelect = (key: string) => {
  activeKey.value = key
}

const handleUserMenuSelect = (key: string) => {
  if (key === 'logout') {
    handleLogout()
  } else if (key === 'userInfo') {
    console.log('用户信息')
  }
}

const handleLogout = () => {
  adminStore.logout()
  router.push('/admin/login')
}
</script>

<style scoped>
.header-left h2 {
  color: #18a058;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown-trigger:hover {
  background-color: #f0f0f0;
}
</style>
