<template>
    <div :class="[
    'el-sidbar',
    {
        'el-sidbar-fixed': logoFixed,
        'el-sidbar-collapse': collapse
    }
    ]">
        <slot name="logo"></slot>
        <Menu
                v-bind="$attrs"
                v-on="$listeners"
                :collapse="collapse"
        >

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

        </Menu>
    </div>
</template>

<script>
    import Menu from '../../menu'
    import Svg from '../../svg'
    import Submenu from './sub-menu'
    import MenuItem from '../../menu-item'
    export default {
        name: 'ElSidbar',
        components: {
            Menu,
            Submenu,
            MenuItem,
            [Svg.name]: Svg
        },
        provide() {
            return {
                'elSidbar': this
            }
        },
        props: {
            data: {
                type: Array,
                default: () => []
            },
            label: {
                type: String,
                default: 'name'
            },
            path: {
                type: String,
                default: 'path'
            },
            icon: {
                type: String,
                default: 'icon'
            },
            iconSize: [String,Number],
            id: {
                type: String,
                default: 'id'
            },
            children: {
                type: String,
                default: 'children'
            },
            iconPrefix: {
                type: String,
                default: 'el-icon-'
            },
            logoFixed: {
                type: Boolean,
                default: true
            },
            svg: {
                type: Boolean,
                default: false
            },
            collapse: Boolean
        }
    }
</script>

<style scoped>

</style>
