<template>
    <div class="active_body">
        <div class="login-logo">
            <div style="cursor: pointer;">Fast亼算云</div>
            <div style="display: flex;align-items: center;">
                <a-menu v-model:selectedKeys="current" mode="horizontal" style="border-bottom: none;"
                    :items="rightRoutes" @click="({ key }) => handleMenuClick(key)" />
                <template v-if="!isLogin">
                    <a-button type="primary" @click="router.push('/login')" style="margin-left: 20px;">登录 / 注册</a-button>
                </template>
            </div>
        </div>
        <div>
            <router-view />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const isLogin = ref(!!localStorage.getItem('token'));
const current = ref('');
const rightRoutes = ref([
    { key: '/home', label: '首页' },
    { key: '/document', label: '用户文档' },
    { key: '/admin/home', label: '控制台' }
])
// 点击菜单跳转
const handleMenuClick = (key) => {
    if (key === '/document') {
        window.open(key, '_blank');
    } else {
        // 否则按照正常方式在当前标签页跳转
        const fullPath = `/layout${key}`;
        router.push(fullPath);
    }
}
</script>
<style scoped>
.login-logo {
    background-color: rgba(255, 255, 255, 0.2);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    letter-spacing: 2px;
    width: 100%;
    padding: 0 20px;
    border-bottom: 1px solid #C9C9C9;
}
</style>