<template>
    <ul class="nav-menu" :style="style">
        <sub-menu v-for="item in menus" :key="item.id" :menu="item" :width="width" :collapse="collapse" :colors="colors" :activeId="activeId" @selected="onMenuSelected" @opened="onMenuOpened"></sub-menu>
    </ul>
</template>
<script>
import SubMenu from './SubMenu'
import tinyColor from 'tinycolor2'

export default {
    props: ['menus', 'width', 'collapse', 'theme', 'activeId'],
    computed: {
        style() {
            return {
                width: this.collapse ? '60px' : (this.width + 'px')
            }
        },
        colors() {
            let luminance = tinyColor(this.theme).getLuminance()

            let backgroundColor = tinyColor(this.theme).toHexString()
            let activeBackgroundColor = tinyColor.mix(this.theme, '#000000', 20).toHexString()
            let hoverBackgroundColor = tinyColor.mix(this.theme, '#000000', 10).toHexString()
            let textColor = tinyColor.mix(this.theme, luminance > 0.6 ? '#000000' : '#ffffff', 90).toHexString()
            return { backgroundColor, activeBackgroundColor, hoverBackgroundColor, textColor }
        }
    },
    methods: {
        onMenuSelected(activeId) {
            this.$children.forEach(child => {
                child.activeChange(activeId)
            })
        },
        onMenuOpened(openedId) {
            this.$children.forEach(child => {
                child.openedChange(openedId)
            })
        }
    },
    watch: {
        activeId(val) {
            if (val) {
                this.$children.forEach(child => {
                    child.activeChange(val)
                })
            }
        }
    },
    components: {
        SubMenu
    }
}
</script>
<style lang="less" scoped>
.nav-menu {
    cursor: pointer;
    transition: width 0.3s;
    overflow: hidden;
    font-size: 14px;
}
</style>
