<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider collapsible>
      <div class="logo">后台管理</div>
      <a-menu theme="dark" mode="inline" :selectedKeys="[active]">
        <a-menu-item key="users" @click="go('/admin/users')">用户管理</a-menu-item>
        <a-menu-item key="categories" @click="go('/admin/categories')">分类管理</a-menu-item>
        <a-menu-item key="products" @click="go('/admin/products')">商品管理</a-menu-item>
        <a-menu-item key="orders" @click="go('/admin/orders')">订单管理</a-menu-item>
        <a-menu-item key="carousels" @click="go('/admin/carousels')">轮播图管理</a-menu-item>
        <a-menu-item key="notices" @click="go('/admin/notices')">公告管理</a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <a-button type="link" @click="logout">退出</a-button>
      </a-layout-header>
      <a-layout-content style="margin: 16px">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const active = computed(() => route.path.split('/')[2] || 'users')
const go = (path) => router.push(path)
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('role')
  router.push('/admin/login')
}
</script>

<style scoped>
.logo {
  color: #fff;
  padding: 16px;
  text-align: center;
  font-weight: 600;
}
.header {
  background: #fff;
  text-align: right;
  padding: 0 16px;
}
</style>
