<template>
    <li class="menu-item" :style="style" @click.stop="menuClick" @mouseenter="hover = true" @mouseleave="hover = false">
        {{menu.name}}
    </li>
</template>

<script>
export default {
    props: {
        menu: {
            type: Object,
            required: true
        },
        depth: {
            type: Number,
            default: 0
        },
        collapse: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number
        },
        colors: {
            type: Object
        },
        activeId: {}
    },
    data() {
        return {
            active: false,
            hover: false
        }
    },
    created() {
        if (this.activeId === this.menu.id) {
            this.active = true
        }
    },
    computed: {
        style() {
            let style = {
                color: this.colors.textColor
            }
            if (this.collapse) {
                style.padding = '0 20px'
                style.width = this.width + 'px'
            } else {
                style.padding = this.depth < 2 ? '0 45px' : '0 20px'
            }

            if (this.active) {
                style.backgroundColor = this.colors.activeBackgroundColor
                style.borderLeft = `2px solid ${this.colors.textColor}`
            } else if (this.hover) {
                style.backgroundColor = this.colors.hoverBackgroundColor
            } else {
                style.backgroundColor = this.colors.backgroundColor
            }
            return style
        }
    },
    methods: {
        activeChange(activeId) {
            if (activeId instanceof Array && activeId.indexOf(this.menu.id) !== -1) {
                this.active = true
            } else if (activeId === this.menu.id) {
                this.active = true
            } else {
                this.active = false
            }
        },
        openedChange(openedId) {
        },
        menuClick() {
            this.active = true
            if (this.menu.url) {
                if (/^\/http/.test(this.menu.url)) {
                    window.open(url);
                    return;
                }
            } else {
                this.$router.push(this.menu.href)
            }
        }
    },
    watch: {
        active(val) {
            if (val) {
                this.$emit('selected', [this.menu.id])
            }
        }
    }
}
</script>
<style lang="less" scoped>
@menuColor: #6a90b8;
@activeColor: #f2f6fc;
.menu-item {
    height: 56px;
    line-height: 56px;
    background-color: @menuColor;
    font-size: 14px;
    padding: 0 45px;
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
    * {
        vertical-align: middle;
    }
}
</style>
