<template>
    <!-- 菜单列表-->
    <el-menu :default-active="activeMenu" :router="true" mode="horizontal" 
    :background-color="settingsStore.currentLayoutColor.navrbarBackgroundColor" 
    :text-color="settingsStore.currentLayoutColor.menuFontTextColor" 
    :active-text-color="settingsStore.currentLayoutColor.activeMenuFontTextColor">
        <el-menu-item v-for="item in routers" :key="item.path" :index="item.path">
            <el-badge :show-zero="false"  :max="99"  :offset="[5, 15]">
                {{ item.meta.title }}
            </el-badge>
        </el-menu-item>
    </el-menu>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router';
import { useRoutesStore } from "@/framework/store/modules/routes";
import { useSettingsStore } from "@/framework/store/modules/settings";
const settingsStore = useSettingsStore();
const routesStore = useRoutesStore();

const routers = computed(() => {
    return routesStore.routes.filter((item: any) => {
        return item.meta && item.meta.title && item.children && item.children.length > 0
    })
})

const activeMenuBackgroundColor=ref(settingsStore.currentLayoutColor.activeMenuBackgroundColor)

let activeMenu = ref('')
let router = useRouter()
watch(() => router,
    (newValue) => {        
        activeMenu.value = newValue.currentRoute.value.matched[0].path
    },
    { immediate: true,deep: true }
);

</script>

<style lang="scss" scoped>
.el-menu {
    height: 64px;
    border-bottom: none;

    &>.el-menu-item {
        border-bottom: none;

        &.is-active {
            border-bottom: none;
            background-color: v-bind(activeMenuBackgroundColor) !important;
        }
    }
}
</style>