<template>
    <div>
        <div class="top">
            <a-menu mode="horizontal" @click="navto" class="nav">
                <a-menu-item key="/index">
                    <template #icon>
                        <mail-outlined />
                    </template>
                    高考咨询
                </a-menu-item>
                <a-menu-item key="/major">
                    <template #icon>
                        <FileSearchOutlined />
                    </template>
                    查专业
                </a-menu-item>
                <a-menu-item key="/university">
                    <template #icon>
                        <AuditOutlined />>
                    </template>
                    找大学
                </a-menu-item>
                <a-menu-item key="/fillout">
                    <template #icon>
                        <EditOutlined />
                    </template>
                    志愿填报
                </a-menu-item>
            </a-menu>
            <div class="rigth">
                <a-button type="link">登录</a-button>
                <a-button type="link">注册</a-button>
                <a-button type="primary">
                    <template #icon>
                        <UserOutlined />
                    </template>
                </a-button>
                <a-button type="text">
                    <template #icon>
                        <UnorderedListOutlined />
                    </template>
                    志愿清单
                </a-button>
            </div>
        </div>
        <div class="body">
            <router-view></router-view>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.top {
    position: sticky;
    z-index: 999;
    top: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .rigth {
        flex-shrink: 0;
        padding-right: 20px;
    }
    .nav {
        width: 100%;
        border-bottom: none;
    }
}
.body {
    padding: 20px 40px;
}
</style>
<script setup lang="ts">
import { MailOutlined, FileSearchOutlined, AuditOutlined, EditOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

function navto({ key }: { key: string }) {
    console.log(key)
    router.push({ path: key })
}
</script>
