<template>
  <div class="admin-dashboard">
    <!-- 使用全局Header组件保持一致的顶部导航 -->
    <Header />
    
    <div class="admin-container">
      <!-- 左侧菜单 -->
      <div class="admin-sidebar">
        <h2 class="sidebar-title">管理中心</h2>
        
        <el-menu
          :default-active="activeMenu"
          class="admin-menu"
          router
          @select="handleSelect"
        >
          <el-menu-item index="/admin">
            <el-icon><DataLine /></el-icon>
            <span>系统概览</span>
          </el-menu-item>
          
          <el-menu-item index="/admin/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          
          <el-menu-item index="/admin/posts">
            <el-icon><Document /></el-icon>
            <span>帖子管理</span>
          </el-menu-item>
          
          <el-menu-item index="/admin/comments">
            <el-icon><ChatDotRound /></el-icon>
            <span>评论管理</span>
          </el-menu-item>
          
          <el-menu-item index="/admin/categories">
            <el-icon><Collection /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="admin-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user.js';
import { 
  DataLine, 
  User, 
  Document, 
  ChatDotRound, 
  Collection 
} from '@element-plus/icons-vue';
import Header from '@/components/Header.vue';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 当前激活的菜单项
const activeMenu = ref('');

// 根据当前路由设置激活菜单
const setActiveMenu = () => {
  activeMenu.value = route.path;
};

// 处理菜单选择
const handleSelect = (key) => {
  activeMenu.value = key;
};

// 检查用户权限
const checkPermission = () => {
  console.log('正在检查管理员权限:', userStore.isLoggedIn, userStore.userInfo.role);
  
  // 检查用户是否登录以及是否有管理员权限
  if (!userStore.isLoggedIn) {
    ElMessage.error('请先登录');
    router.push('/');
    return;
  }
  
  if (!(userStore.userInfo.role === 2 || userStore.userInfo.role === 3)) {
    ElMessage.error('您没有管理员权限');
    router.push('/');
    return;
  }
  
  console.log('权限检查通过，用户角色:', userStore.userInfo.role);
};

// 监听路由变化
watch(() => route.path, () => {
  setActiveMenu();
});

// 组件挂载时
onMounted(() => {
  setActiveMenu();
  checkPermission();
});
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.admin-container {
  display: flex;
  margin-top: 50px; /* 为Header预留空间 */
  min-height: calc(100vh - 50px);
}

.admin-sidebar {
  width: 240px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50px; /* Header高度 */
  bottom: 0;
  left: 0;
  z-index: 100;
  transition: all 0.3s;
}

.sidebar-title {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
}

.admin-menu {
  border-right: none;
}

.admin-content {
  flex: 1;
  padding: 20px;
  margin-left: 240px;
  overflow-y: auto;
}

/* 图标样式 */
.el-menu-item .el-icon {
  margin-right: 10px;
  width: 24px;
  text-align: center;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .admin-sidebar {
    width: 64px;
  }
  
  .sidebar-title {
    display: none;
  }
  
  .admin-content {
    margin-left: 64px;
  }
}
</style> 