<template>
    <Submenu v-bind="$attrs" v-on="$listeners">
        <template slot="title">
            <el-svg v-if="elSidbar.svg && icon" :name="icon" :size="elSidbar.iconSize"/>
            <i v-else-if="icon" :class="`${elSidbar.iconPrefix}${icon}`"></i>
            <span>{{ title }}</span>
        </template>
        <template v-for="(item, index) in data">
            <SubMenu
                    v-if="item[elSidbar.children] && item[elSidbar.children].length"
                    :data="item[elSidbar.children]"
                    :title="item[elSidbar.label]"
                    :index="item[elSidbar.path] + ''"
                    :icon="item[elSidbar.icon]"
                    :key="item[elSidbar.path] + ''"
            >

            </SubMenu>
            <MenuItem v-else :index="item[elSidbar.path] + ''" :key="item[elSidbar.path] + ''">
                <el-svg v-if="elSidbar.svg && item[elSidbar.icon]" :name="item[elSidbar.icon]" :size="elSidbar.iconSize"/>
                <i v-else-if="item[elSidbar.icon]" :class="`${elSidbar.iconPrefix}${item[elSidbar.icon]}`"></i>
                <span slot="title">{{ item[elSidbar.label] }}</span>
            </MenuItem>
        </template>

    </Submenu>
</template>

<script>
    import Submenu from '../../submenu'
    import MenuItem from '../../menu-item'
    import Svg from '../../svg'
    export default {
        name: 'SubMenu',
        components: {
            Submenu,
            MenuItem,
            [Svg.name]: Svg
        },
        inject: ['elSidbar'],
        props: {
            data: {
                type: Array,
                default: () => []
            },
            title: String,
            icon: String,
        }
    }
</script>

<style scoped>

</style>
