<template>
    <li role="menuitem"
        :style="menuItemStyle"
        :class="menuItemClass"
        @mouseenter="onMouseEnter"
        @mouseleave="onMouseLeave"
        @click="handleClick">
        <span v-if="icon || $slots.icon"
              :class="`${prefix}-menu__icon`">
            <slot name="icon"><i :class="icon"></i></slot>
        </span>
        <slot></slot>
    </li>
</template>
<script>
import menuMixins from './mixins';
import { prefix, prefixMixins, getZIndex } from 'jdd-design/utils';
export default {
    name: `${prefix}-menu-item`,
    componentName: `${prefix}-menu-item`,
    mixins: [menuMixins, prefixMixins],
    props: {
        index: {
            default: null,
            validator: val => typeof val === 'string' || val === null
        },
        disabled: Boolean,
        route: Object,
        icon: String
    },
    computed: {
        menuItemClass() {
            const { active, disabled, isFirstLevel } = this;
            let clsNames = [`${prefix}-menu-item`];
            active && clsNames.push('is-active');
            disabled && clsNames.push('is-disabled');
            return clsNames;
        },
        itemStyle() {
            const {
                active,
                activeTextColor,
                textColor,
                layout,
                isFirstLevel,
                jddMenu
            } = this;
            const style = {
                color: active ? activeTextColor : textColor,
                borderBottomColor: 'transparent'
            };
            if (layout === 'horizontal' && isFirstLevel) {
                style.display = 'inline-block';
                style.verticalAlign = 'top';
                style.borderBottomColor = active
                    ? jddMenu.activeTextColor
                        ? activeTextColor
                        : ''
                    : 'transparent';
            }
            return style;
        },
        menuItemStyle() {
            return {
                ...this.paddingStyle,
                ...this.itemStyle,
                backgroundColor: this.backgroundColor
            };
        },
        active() {
            return this.index === this.jddMenu.activeIndex;
        },
        isFirstLevel() {
            return this.parentMenu === this.jddMenu;
        }
    },
    methods: {
        onMouseEnter() {
            if (this.layout === 'horizontal' && !this.jddMenu.backgroundColor)
                return;
            this.$el.style.backgroundColor = this.hoverBackground;
        },
        onMouseLeave() {
            if (this.layout === 'horizontal' && !this.jddMenu.backgroundColor)
                return;
            this.$el.style.backgroundColor = this.backgroundColor;
        },
        handleClick() {
            if (!this.disabled) {
                this.jddMenu.$emit('item-click', this);
                this.$emit('click', this);
            }
        }
    },
    mounted() {
        this.parentMenu.addItem(this);
        this.jddMenu.addItem(this);
    },
    beforeDestroy() {
        this.parentMenu.removeItem(this);
        this.jddMenu.removeItem(this);
    }
};
</script>
