<script setup>
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
} from "@ant-design/icons-vue";

import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

//router
const router = useRouter();
const state = reactive({
    title: "vue3平台",
    openKeys: [],
    selectedKeys: [],
    collapsed: false,
    menuList: []
});


const collapeAction = () => {
    state.collapsed = !state.collapsed
}

const clickMenu = (menu, item) => {
    console.log('item', item)
    state.openKeys = [menu.key]
    state.selectedKeys = [menu.key]
    router.push({
        name: item.name
    })
}
//{ item, key, selectedKeys }
const selectMenu = (e) => {
    console.log(e)
};

const renderIcon = (icon) => {
    // return h(icon)
    return ''
}

onMounted(() => {
    console.log('router.current.value', router)

    const { routes } = router.options
    state.menuList = routes.reduce((pre, item) => {
        const isHiddenInLayout = item.meta.isHiddenInLayout
        if (!isHiddenInLayout) {
            if(!pre.length){
                state.openKeys =[item.name]
                state.selectedKeys = [item.name]
            }
            const menuItem = {
                title: item.meta.title,
                path: item.path,
                key: item.name,
                name: item.name,
                icon: item.meta.icon,
                children: item.children.map(children => {
                    return {
                        title: children.meta.title,
                        path: children.path,
                        key: children.name,
                        name: children.name,
                    }
                })
            }
            pre.push(menuItem)
        }
        return pre
    }, [])
});
</script>

<template>
    <a-layout class="layout-container">
        <a-layout-sider v-model:collapsed="state.collapsed" :trigger="null" collapsible>
            <div class="logo" />
            <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" theme="dark" mode="inline"
                @select="selectMenu">
                <a-sub-menu v-for="menu in state.menuList" :key="menu.key">
                    <template #icon> {{ renderIcon(menu.icon) }}</template>
                    <template #title> <span>{{ menu.title }}</span></template>
                    <a-menu-item v-for="menuChild in menu.children" :key="menuChild.key"
                        @click="clickMenu(menu, menuChild)">
                        {{ menuChild.title }}
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #ffffff; padding-left: 20px;border-bottom:1px solid #dcdcdc">
                <div style="display: flex">
                    <div style="width: 50%">
                        <menu-unfold-outlined v-if="state.collapsed" class="trigger" @click="collapeAction" />
                        <menu-fold-outlined v-else class="trigger" @click="collapeAction" />
                        {{ state.title }}
                    </div>
                    <div style="width: 50%;text-align: right;">
                        <div style="height:64px;line-height:64px;">
                            <a href="https://blog.csdn.net/qq_38870145?type=blog" target="_blank">
                                <div class="csdn-img-header" />
                            </a>
                            作者：yma16
                        </div>

                    </div>
                </div>
            </a-layout-header>
            <a-layout-content class="content-box">
                <!--                    渲染子路由-->
                <router-view />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<style lang="less">
.layout-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content-box {
    background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.8)), url("../assets/img/previewFix.jpg");
  background-size: 100% 100%;
  /* background-repeat: no-repeat; */
  color: #fff;
    overflow: auto;
    max-height: calc(100vh - 64px);
    padding: 24px;
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
}

.site-layout .site-layout-background {
    background: #fff;
}

.main-container {
    width: 100%;
    height: 100%;
}
.csdn-img-header {
    background: url(../assets/csdn.jpg);
    background-size: 100%;
    width: 30px;
    height: 30px;
    display: inline-block;
    transform: translateY(10px);
    line-height: 64px;
    cursor: pointer;
}
</style>
