<script>
import MenuMixins from '../mixins/menu'
import { mapState } from 'vuex'

export default {
    mixins: [
        MenuMixins
    ],
    computed: {
        ...mapState({
            menus: state => state.basics.menus
        })
    },
    methods: {
        onSelect (index, indexPath) {
            let targetItems = this.menus
            let breadcrumbs = []
            let url = ''
            console.log(indexPath)
            for (let i of indexPath) {
                const target = targetItems.find(item => item.id == i)
                if (target) {
                    breadcrumbs.push({
                        title: target.title
                    })
                    targetItems = target.children ? target.children : []
                    url = target.url ? target.url : ''
                    console.log(target, url)
                }
            }
            this.$router.push(url, {
                params: {
                    breadcrumbs: breadcrumbs
                }
            })
        },
        renderMenu (data, level = 1) {
            return data.map(item => {
                if (item.type === 'route') {
                    console.log(item.url)
                    return (<el-menu-item index={item.id.toString()} route={item.url}>
                        <span slot="title">{item.name}</span>
                    </el-menu-item>)
                } else if (item.type === 'group') {
                    return (
                        <el-submenu index={item.id.toString()}>
                            <template slot="title">{item.name}</template>
                            {this.renderMenu(item.children, level + 1)}
                        </el-submenu>
                    )
                }
                return null
            })
        },
    },
    render () {
        return (
            <el-menu
                class="menu"
                background-color="#545c64"
                text-color="#fff"
                router={true}
            >
                {this.renderMenu(this.menus)}
            </el-menu>
        )
    }
}
</script>

<style scoped>
.menu {
    height: 100vh;
    width: 210px;
}
</style>