<template>
    <div class="gx_layout">
        <div :class="isHome ? 'gx_layout_header_home' : 'gx_layout_header_noHome'" class="gx_layout_header">
            <div class="logo">GxDL算力云</div>
        </div>
        <div style="height: 60px;width: 100%;"></div>
        <div class="gx_layout_content">
            <div>
                <a-menu id="dddddd" v-model:selectedKeys="selectedKeys" style="width: 256px;height: 100%;" mode="inline"
                    :items="menuItems" @click="({ key }) => handleMenuClick(key)"></a-menu>
            </div>
            <div>
                <div class="contain"
                    style="background-color: #ffffff;padding: 20px;overflow: auto;height: 100%;border-radius: 6px;">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { UserOutlined } from '@ant-design/icons-vue';
import avatar from '@/assets/avator.png'
const router = useRouter()
const route = useRoute()
const isHome = ref(true)
const selectedKeys = ref(['/document/introdution']);
const menuItems = [
    { key: '/document/introdution', label: '简介' },
    { key: '/document/start', label: '快速开始' },
    { key: '/document/video', label: '视频教程' },
    { key: '/document/study', label: '学术资源加速' },
    {
        key: '', label: '如何选择GPU',
        children: [
            { key: '/document/select', label: 'GPU选型' },
            { key: '/document/ceshi', label: '性能实测' },
        ]
    },
    {
        key: '', label: '容器实例',
        children: [
            { key: '/document/summary', label: '概要' },
            { key: '/document/jupyterLab', label: 'JupyterLab' },
            { key: '/document/SSH', label: 'SSH' },
        ]
    },
    {
        key:'', label: '会员与计费',
        children: [
            { key: '/document/member', label: '会员等级' },
         
        ]
    }
];
// 点击菜单跳转
const handleMenuClick = (key) => {
    console.log(key)
    // 否则按照正常方式在当前标签页跳转
    router.push(key);
}
</script>
<style lang="scss" scoped>
.gx_layout {
    width: 100%;
    height: 100vh;

    .gx_layout_header_home {
        background-color: #cfe7fe;
        border-bottom: none;
    }

    .gx_layout_header_noHome {
        border-bottom: 1px solid rgb(216 216 216);
    }

    .gx_layout_header {
        z-index: 999;
        width: 100%;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        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 {
        // margin-top: 60px;
        height: calc(100% - 60px);
        background-color: rgba(240, 240, 240, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>div:first-child {
            height: 100%;
        }

        &>div:last-child {
            height: 100%;
            flex: 1;
            padding: 20px;
            // overflow: auto;
        }
    }
}

/* 自定义菜单主题 */
.custom-menu {
    /* 背景色 */
    background: #cfe7fe !important;
}

/* 选中项文字颜色 + 左侧竖条（horizontal 模式下是底部横线） */
.custom-menu :deep(.ant-menu-item-selected) {
    color: #2563eb !important;
}



/* hover 效果 */
.custom-menu :deep(.ant-menu-item:hover) {
    color: #2563eb !important;
}
</style>
<style>
@import './index.css';
</style>