<template>
    <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.url">
        <template slot="title">
            <svg-icon :icon-class="menu.menuIcon"></svg-icon>
            <span slot="title" class="ml-8 f14">{{ menu.name }}</span>
        </template>
        <MenuTree v-for="item in menu.children" :key="item.url"
                :menu="item"
        ></MenuTree>
    </el-submenu>

    <el-menu-item v-else  @click="handleRoute(menu)" :index="menu.url"
        class="zd-el-menu-item__custom-class">
        <svg-icon :icon-class="menu.menuIcon"></svg-icon>
        <span slot="title" class="ml-8 f14">{{ menu.name }}</span>
    </el-menu-item>
</template>
<script>
    export default {
        name: "MenuTree",
        props: {
            menu: {
                type: Object,
                required: true,
            },
            index: {
                type: Number,
                default: 0
            }
        },
        methods: {
            handleRoute(menu) {
                // console.log('menu',menu)
                this.$store.commit('setRoutes',menu.url)
                // 通过菜单URL跳转至指定路由
                this.$router.push(menu.url);
                
            },
        },
    };
</script>
<style lang="scss" scoped>
    .zd-el-menu-item{
        padding: 0 !important;
    }
    // .zd-el-menu-item__custom-class{
    //     width: 100%;
    //     position: relative;
    //     &::before{
    //         content: "";
    //         width: 2px;
    //         height: 24px;
    //         position: absolute;
    //         left: 0;
    //         top: 16px;
    //         background-color: $color-white;
    //     }
    // }
    // .zd-el-menu-item__custom-class.is-active{
    //     background-color: $color-menu-active-bg !important;
    //     color: $color-menu-active-text !important;

    //     &::before{
    //         background-color: $color-menu-active-text;
    //     }
    // }
    .zd-menu-vertical-bar{
        width: 2px;
        height: $height24;
        background-color: #ffffff;
        padding-right: 20px;
    }
</style>