<template>
  <el-container class="admin-layout">
    <el-aside width="200px" class="sidebar">
      <div class="logo">管理后台</div>
      <el-menu
        :default-active="$route.path"
        router
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
      >
        <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <span>多站点管理后台</span>
        <div class="header-right">
          <span class="username">{{ authStore.getUser()?.username }}</span>
          <el-button link type="danger" @click="handleLogout">退出</el-button>
        </div>
      </el-header>
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { House, User, Folder, ChatDotRound, Setting, Wallet, Monitor, Document, EditPen, Upload, Key } from '@element-plus/icons-vue'
import { useAuthStore } from '../stores/auth'
import { getMyPermissions } from '../api/admin'

const router = useRouter()
const authStore = useAuthStore()

onMounted(async () => {
  if (authStore.isLoggedIn()) {
    try {
      const res = await getMyPermissions()
      authStore.setPermissions(res.permissions || [])
    } catch (_) {}
  }
})

const menuItems = computed(() => {
  const hasPermission = (key) => !key || authStore.hasPermission(key)
  const all = [
    { index: '/', title: '控制台', icon: House, permission: null },
    { index: '/users', title: '用户管理', icon: User, permission: 'user:manage' },
    { index: '/workspaces', title: '工作空间', icon: Folder, permission: 'workspace:manage' },
    { index: '/conversations', title: '对话管理', icon: ChatDotRound, permission: 'conversation:manage' },
    { index: '/sms-config', title: '短信配置', icon: Setting, permission: 'sms_config' },
    { index: '/payment-config', title: '支付配置', icon: Wallet, permission: 'payment_config' },
    { index: '/sites', title: '站点管理', icon: Monitor, permission: 'site:manage' },
    { index: '/pages', title: '网页管理', icon: Document, permission: 'page:manage' },
    { index: '/homepage-edit', title: '首页编辑', icon: EditPen, permission: 'homepage:edit' },
    { index: '/module-upload', title: '功能模块上传', icon: Upload, permission: 'module:upload' },
    { index: '/role-permissions', title: '角色权限管理', icon: Key, permission: 'role:permission' }
  ]
  return all.filter((item) => hasPermission(item.permission))
})

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

<style scoped>
.admin-layout {
  height: 100vh;
}
.sidebar {
  background: #304156;
}
.logo {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #263445;
}
.header {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.username {
  color: #666;
  font-size: 14px;
}
.main {
  background: #f0f2f5;
  padding: 20px;
}
</style>
