<script setup>
import {onMounted} from "vue";
import {toPath} from "../../utils/index.js";
import {useSystemStore} from "../../pinia/SystemStore/index.js";

const SystemStore = useSystemStore();

onMounted(() => {
});

const menuItemClick = (e) => {
    toPath(`/home${e}`);
}
//--main-bg-color
</script>

<template>
    <div class="w-full h-full box-border">
        <a-menu @menu-item-click="menuItemClick">
            <template v-for="item in SystemStore.RoutesTemp.filter(v=>!v.meta.hidden)" :key="item.name">
                <template v-if="item.children?.length > 0">
                    <a-sub-menu>
                        <template #icon>
                            <icon-apps></icon-apps>
                        </template>
                        <template #title>{{ item.title }}</template>
                        <a-menu-item v-for="k in item.children.filter(v=>!v.meta.hidden)"
                                     :key="`/${item.path}/${k.path}`">
                            <a-badge v-if="k.meta?.num>0" :count="k.meta.num" :offset="[20,5]">
                                {{ k.title }}
                            </a-badge>
                            <template v-else>
                                {{ k.title }}
                            </template>
                        </a-menu-item>
                    </a-sub-menu>
                </template>
                <template v-else>
                    <a-menu-item :key="`/${item.path}`">
                        <template #icon>
                            <icon-apps></icon-apps>
                        </template>
                        <a-badge v-if="item.meta?.num>0" :count="item.meta.num" :offset="[20,5]">
                            {{ item.title }}
                        </a-badge>
                        <template v-else>
                            {{ item.title }}
                        </template>
                    </a-menu-item>
                </template>
            </template>
        </a-menu>
    </div>
</template>

<style lang="scss" scoped>

</style>
