<template>
    <div class="main-container">
        <!-- 左侧菜单栏组件 -->
        <div class="menu-view">
            <MainMenu 
                :menu-items="menuItems"
                :collapsed="isSidebarCollapsed"
                @toggle="isSidebarCollapsed = !isSidebarCollapsed"
                @menu-click="handleMenuChange"
            />
        </div>
        <!-- 右侧主内容区 -->
        <div class="right-view">
            <div class="top-view">
                <!-- 顶部用户信息栏组件 -->
                <UserInfoBar 
                    :user-info="currentUser"
                    :unread-count="unreadNotifications"
                    @logout="handleLogout"
                    @notification-click="handleNotificationClick"
                    @settings-click="handleSettingsClick"
                />
            </div>
            <div class="connect-view">
                <!-- 内容显示区 -->
                <ContentArea>
                    <template #header>
                    <ContentHeader 
                        :title="currentPageTitle"
                        :actions="currentPageActions"
                        @action-click="handlePageAction"
                    />
                    </template>
                    <div>
                    <RouterView />
                    </div>
                </ContentArea>
            </div>
        </div>
    </div>
</template>

<script setup>
// 脚本内容保持不变
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import MainMenu from './layout/MainMenu.vue';
import UserInfoBar from './layout/UserInfoBar.vue';
import ContentArea from './layout/ContentArea.vue';
import ContentHeader from './layout/ContentHeader.vue';

// 模拟API函数（实际项目中应从api文件导入）
const getUserInfo = () => Promise.resolve({
  name: '管理员',
  role: '系统管理员',
  avatar: 'https://picsum.photos/id/64/200/200'
});

const logout = () => Promise.resolve();

// 状态管理
const isSidebarCollapsed = ref(false);
const unreadNotifications = ref(3);
const currentPageTitle = ref('仪表盘');
const currentUser = ref({});

// 路由实例
const router = useRouter();

// 菜单配置
const menuItems = reactive([
  {
    label: '仪表盘',
    icon: 'fa-tachometer',
    path: '/main/dashboard',
    active: true
  },
  {
    label: '用户管理',
    icon: 'fa-users',
    path: '/main/users',
    active: false,
    children: [
      { label: '用户列表', icon: 'fa-list', path: '/main/users/list', active: false },
      { label: '新增用户', icon: 'fa-plus', path: '/main/users/add', active: false }
    ]
  },
  {
    label: '系统设置',
    icon: 'fa-cog',
    path: '/main/settings',
    active: false
  },
  {
    label: '数据报表',
    icon: 'fa-bar-chart',
    path: '/main/reports',
    active: false
  }
]);

// 当前页面操作按钮
const currentPageActions = ref([
  { label: '新增', icon: 'fa-plus', action: 'add' },
  { label: '导出', icon: 'fa-download', action: 'export' },
  { label: '刷新', icon: 'fa-refresh', action: 'refresh' }
]);

// 初始化
onMounted(async () => {
  try {
    const userData = await getUserInfo();
    currentUser.value = userData;
    setActiveMenuByRoute(router.currentRoute.value.path);
  } catch (error) {
    ElMessage.error('加载用户信息失败');
    console.error(error);
  }
});

// 根据路由设置活跃菜单
const setActiveMenuByRoute = (path) => {
  menuItems.forEach(item => {
    item.active = item.path === path;
    
    if (item.children && item.children.length) {
      item.children.forEach(subItem => {
        subItem.active = subItem.path === path;
      });
      item.expanded = item.children.some(sub => sub.active);
    }
  });
};

// 处理菜单切换
const handleMenuChange = (path) => {
  currentPageTitle.value = menuItems.find(item => item.path === path)?.label || '页面';
  router.push(path);
  setActiveMenuByRoute(path);
};

// 处理页面操作
const handlePageAction = (action) => {
  switch (action) {
    case 'add':
      ElMessage.info('新增操作');
      break;
    case 'export':
      ElMessage.info('导出操作');
      break;
    case 'refresh':
      ElMessage.success('已刷新');
      break;
    default:
      break;
  }
};

// 处理退出登录
const handleLogout = async () => {
  try {
    await logout();
    router.push('/login');
    ElMessage.success('退出登录成功');
  } catch (error) {
    ElMessage.error('退出登录失败');
  }
};

// 处理通知点击
const handleNotificationClick = () => {
  router.push('/main/notifications');
  unreadNotifications.value = 0;
};

// 处理设置点击
const handleSettingsClick = () => {
  router.push('/main/settings');
};
</script>

<style scoped>
/* 关键修复：设置html和body的高度基准 */
:root {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.main-container {
  width: 100%;
  height: 100vh; /* 使用视口高度确保占满屏幕 */
  display: flex; /* 使用flex布局避免定位问题 */
  overflow: hidden; /* 防止页面溢出 */
}

.menu-view {
  /* 移除absolute定位，使用flex布局 */
  width: 200px;
  height: 100%;
  border: 1px solid #ff0000;
  flex-shrink: 0; /* 防止菜单被压缩 */
}

.right-view {
  flex: 1; /* 自动填充剩余空间 */
  height: 100%;
  border: 1px solid #00ff00;
  display: flex;
  flex-direction: column; /* 垂直排列顶部和内容区 */
}

.top-view {
  height: 60px; /* 固定顶部高度 */
  border-bottom: 1px solid #ccc;
}

.connect-view {
  flex: 1; /* 填充剩余高度 */
  overflow: auto; /* 内容溢出时可滚动 */
}
</style>
    