<template>
    <div>
        <el-submenu
                v-if="data.children && data.children.length"
                :index="data.path"
        >
            <template slot="title" v-if="data.meta && data.meta.title">
                <i :class="data.meta.icon" v-if="data.meta && data.meta.icon"></i>
                <span slot="title">{{ data.meta.title }}</span>
            </template>
            <menu-submenu
                    :data="item"
                    v-for="item in data.children"
                    :key="item.id"
            ></menu-submenu>
        </el-submenu>
        <el-menu-item v-else :index="data.path" :route="data">
            <i :class="data.meta.icon" v-if="data.meta && data.meta.icon"></i>
            <span slot="title" v-if="data.meta && data.meta.title">{{
        data.meta.title
      }}</span>
        </el-menu-item>
    </div>
</template>

<script>
    export default {
        name: "menu-submenu",
        props: {
            data: {
                type: Object,
                default: () => {}
            }
        },
        components: {}
    };
</script>

<style></style>
