<template>
    <li :class="bem({active})">
        <a :href="link" v-if="rootMenu.router && !isVueRouter()"  @click="selectItem"><slot/></a>
        <router-link :to="link"  v-else-if="rootMenu.router && isVueRouter()"  @click="selectItem"><slot/></router-link>
        <span v-else @click="selectItem"><slot/></span>
    </li>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';

const MenuName = createComponentName('menu');
const MenuItemName = createComponentName('menu-item');
const SubMenuName = createComponentName('sub-menu');
const PopoverName = createComponentName('popover');

export default {
    name: createComponentName('menu-item'),
    mixins: [componentMixin],
    inject: ['menuBus', 'rootMenu'],
    props: {
        index: {
            type: [String, Number],
            required: true,
        },
        route: {
            type: String,
            default: ''
        },
    },
    computed: {
        link() {
            return this.route || this.index;
        },
        indexPath() {
            const path = [this.link];
            let parent = this.$parent;
            while (parent.$options.name !== MenuName) {
                if (parent.$options.name === SubMenuName) {
                    if (parent.link !== this.link) path.unshift(parent.link);
                }
                parent = parent.$parent;
            }
            return path;
        },
        parentMenuItem() {
            let parent = this.$parent;
            let end = false;
            while (!end) {
                if (parent.$options.name === MenuName) {
                    end = true;
                    return;
                }

                parent = parent.$parent;
                if (parent.$options.name === MenuItemName) {
                    end = true;
                }
            }
            return parent;
        },
        active() {
            // 如果父层item和自身link一致,则不高亮
            if (this.parentMenuItem) {
                return this.parentMenuItem.link !== this.link && this.rootMenu.activeIndexPath.includes(this.link);
            }
            return this.rootMenu.activeIndexPath.includes(this.link);
        },
        subMenu() {
            let parent = this.$parent;
            while (parent.$options.name !== SubMenuName) {
                if (parent.$options.name === MenuName) return;
                if (parent === this.$root) throw new Error('MenuItem 必须包含在 Menu组件中');
                parent = parent.$parent;
            }
            return parent;
        },
    },
    methods: {
        isVueRouter() {
            if (this.rootMenu.router && this.$router) {
                if (/^http/.test(this.link)) return false;
                return true;
            }
            return false;
        },
        selectItem() {
            let parent = this.$parent;
            this.menuBus.emit('menu-item:select', this.index, this.indexPath);

            if (parent.$options.name === PopoverName) {
                return;
            }

            if (this.rootMenu.trigger === 'click') {
                while (parent.$options.name !== SubMenuName) {
                    if (parent.$options.name === MenuName) return;
                    if (parent === this.$root) throw new Error('MenuItem 必须包含在 Menu组件中');
                    parent = parent.$parent;
                }

                parent.close();
            }
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-menu-item';

.@{b} {
    font-size: 15px;
    margin: 0 1.333em;
    display: inline-block;
    line-height: 100px;
    color: #333;

    > * {
        cursor: pointer;
        display: block;
    }

    a {
        color: currentColor;
        text-decoration: none;
    }

    a:hover,
    &:hover {
        color: #005cf9;
        text-decoration: none;
    }

    &--active {
        color: #005cf9;
        a {
            color: #005cf9;
        }
    }
}

</style>
