<template>
  <div class="gx_layout">
    <div class="gx_layout_header">
      <div class="logo">GxDL算力云</div>
      <div class="menu">
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="leftRoutes"
          @click="({ key }) => handleMenuClick(key)"
        />
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="rightRoutes"
          @click="({ key }) => handleMenuClick(key)"
        />
      </div>
      <div class="user-info"></div>
    </div>
    <div class="gx_layout_content">
      <router-view />
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

// 根据当前路由初始化菜单选中项（去掉 /layout 前缀）
const getActiveKeyFromRoute = () => {
  const path = route.path
  if (path.startsWith('/layout')) {
    const key = path.replace('/layout', '') || '/home'
    return [key.startsWith('/') ? key : '/' + key]
  }
  return ['/home']
}

const current = ref(getActiveKeyFromRoute())

// 监听路由变化（浏览器前进后退时同步菜单）
watch(() => route.path, () => {
  current.value = getActiveKeyFromRoute()
})

// 菜单数据（key 使用子路径，如 '/admin'）
const leftRoutes = ref([
  { key: '/home', label: '首页' },
  { key: '/center', label: '算力中心' },
  { key: '/yunmain', label: '云主机' }
])
const rightRoutes = ref([
  { key: '/document', label: '用户文档' },
  { key: '/admin/home', label: '控制台' }
])

// 点击菜单跳转
const handleMenuClick = (key) => {
  // key 如 "/admin" → 拼成 "/layout/admin"
  const fullPath = `/layout${key}`
  router.push(fullPath)
}
</script>
<style lang="scss" scoped>
.gx_layout{
    width: 100%;
    height:100vh;
    .gx_layout_header{
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid rgb(216 216 216);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        flex: 1;
        .logo{
            width: 200px;
        }
        .user-info{
            width: 100px;
        }
        .menu{
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
            &>ul:first-child{
                width: 100%;
                border-bottom: none;
            }
             &>ul{
                border-bottom: none;
            }
        }
    }
    .gx_layout_content{
        height: calc(100% - 60px);
        background-color: rgba(240, 240, 240, 1);
    }
}

</style>