<template>
    <div>
        <theme-picker></theme-picker>
        <el-button type="primary" @click="activeId=13">test</el-button>
        <el-button type="primary" plain @click="activeId=37">test</el-button>
        <el-button @click="collapse=!collapse">test</el-button>
        <!-- <nav-menu style="width:200px">
            <sub-menu icon="fas fa-bars" title="菜单1" id="1" :depth="0">
                <template slot-scope="{isOpen}">
                    <menu-item id="1-1">菜单1-1</menu-item>
                    <menu-item id="1-2">菜单1-2</menu-item>
                    <menu-item id="1-3">菜单1-3</menu-item>
                    <sub-menu icon="fas fa-bars" title="菜单1-4" id="1-4" :depth="1" :parentIsOpen="isOpen">
                        <template slot-scope="{isOpen}">
                            <menu-item id="1-4-1">菜单1-4-1</menu-item>
                            <menu-item id="1-4-2">菜单1-4-2</menu-item>
                            <menu-item id="1-4-3">菜单1-4-3</menu-item>
                            <sub-menu icon="fas fa-bars" title="菜单1-4-4" id="1-4-4" :depth="1" :parentIsOpen="isOpen">
                                <menu-item id="1-4-4-1">菜单1-4-4-1</menu-item>
                                <menu-item id="1-4-4-2">菜单1-4-4-2</menu-item>
                                <menu-item id="1-4-4-3">菜单1-4-4-3</menu-item>
                            </sub-menu>
                        </template>
                    </sub-menu>
                </template>
            </sub-menu>
            <sub-menu icon="fas fa-bars" title="菜单2" id="2" :depth="0">
                <menu-item id="2-1">菜单2-1</menu-item>
                <menu-item id="2-2">菜单2-2</menu-item>
                <menu-item id="2-3">菜单2-3</menu-item>
            </sub-menu>
        </nav-menu> -->

        <nav-menu :activeId="activeId" :menus="menus" :collapse="collapse" :width="220" theme="#6a90b8">
        </nav-menu>
    </div>
</template>
<script>
import ThemePicker from '../components/ThemePicker'
import NavMenu from '../components/NavMenu'
import SubMenu from '../components/SubMenu'
import MenuItem from '../components/MenuItem'
import MenuComponent from '../components/MenuComponent'
import tinyColor from 'tinycolor2'
export default {
    created() {
        this.$http.get({
            url: '/sysMenu/userMenuTree',
            data: {
                userId: 84664
            }
        }).then(res => {
            if (res.success) {
                this.menus = res.data;
            }
        })
    },
    data() {
        return {
            menus: [],
            collapse: true,
            activeId: ''
        }
    },
    computed: {
        style() {
            return {
                width: '150px',
                height: '56px',
                backgroundColor: this.colors[0]
            }
        }
    },
    components: {
        ThemePicker,
        NavMenu,
        SubMenu,
        MenuItem,
        MenuComponent
    }
}
</script>

<style lang="less" scoped>
</style>
