<script>
export default {
    props: {
        data: Array
    },
    render () {
        const level = 1
        const items = this.data.map(item => {
            return this.renderItem(item, level + 1)
        })
        items.push(<span class="add-btn" style={{padding: this.getPadding(level)}} onClick={() => {this.onAdd(null)}}>添加</span>)

        return (
            <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                onOpen={this.onOpen}
            >
                {items}
            </el-menu>
        )
    },
    methods: {
        getPadding (level) {
            return `0 ${level * 20}px`
        },
        renderItem (item, level) {
            if (Object.prototype.hasOwnProperty.call(item, 'children') && item.children.length > 0) {
                return (
                    <el-submenu index={item.id.toString()} onSelect={() => {this.onSelect(item)}}>
                        <template slot="title">{item.name}</template>
                        {item.children.map(cell => this.renderItem(cell, level + 1))}
                    </el-submenu>
                )
            } else {
                return (<el-menu-item index={item.id.toString()} onClick={() => {this.onSelect(item)}}>
                    <span slot="title">{item.name}</span>
                </el-menu-item>)
            }
            // if (item.type === 'route') {
            //     return (<el-menu-item index={item.id.toString()} onClick={() => {this.onSelect(item)}}>
            //         <span slot="title">{item.name}</span>
            //     </el-menu-item>)
            // } else if (item.type === 'group') {
            //     return (
            //         <el-submenu index={item.id.toString()} onSelect={() => {this.onSelect(item)}}>
            //             <template slot="title">{item.name}</template>
            //             {item.children.map(cell => this.renderItem(cell, level + 1))}
            //         </el-submenu>
            //     )
            // }
        },
        onAdd (item) {
            this.$emit('add', item)
        },
        onSelect (item) {
            this.$emit('select', item)
        },
        onOpen(i) {
            const item = this.data.find(item => item.id == i)
            if (item) {
                this.onSelect(item)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.add-btn {
    display: block;
    box-sizing: border-box;
    color: #409eff;
    cursor: pointer;
    font-size: 14px;
    height: 56px;
    line-height: 56px;
}
</style>