<template>
    <li :class="classes">
        <div :class="`${prefixCls}-submenu-title`"
            :style="titleStyle"
            @click.stop="handleClick">
            <span :class="`${prefixCls}-submenu-title-content`">
                <slot name="title"></slot>
            </span>
            <span :class="`${prefixCls}-submenu-title-icon`">
                <Icon v-if="opened" type="arrow-up"/>
                <Icon v-else type="arrow-down"/>
            </span>
        </div>
        <CollapseTransition>
            <ul :class="`${prefixCls}-container`" v-show="opened">
                <slot></slot>
            </ul>
        </CollapseTransition>
    </li>
</template>
<script>
    import CollapseTransition from '../common/collapse-transition'
    import Icon from '../icon/'
    import Mixin from './mixins/'

    const prefixCls = 'yy-menu'
    export default {
        name: 'YYSubmenu',
        mixins: [Mixin],
        components: {
            CollapseTransition,
            Icon
        },
        props: {
            name: [String, Number],
            required: true
        },
        data() {
            return {
                prefixCls: prefixCls,
                opened: false
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}-submenu`,
                    {
                        [`${prefixCls}-submenu-active`]: this.menu.currentActiveName === this.name
                    }
                ]
            },
            titleStyle () {
                return this.hasParentSubmenu ? {
                    paddingLeft: 40 + (this.parentSubmenuNum - 1) * 16 + 'px'
                } : {}
            }
        },
        methods: {
            handleClick() {
                const opened = !this.opened
                if(this.menu.accordion) {
                    this.$parent.$children.forEach(item => {
                        if (item.$options.name === 'YYSubmenu') item.opened = false;
                    })
                }
                this.opened = opened
                this.menu.handleOpenChange(this.name)
            }
        }
    }
</script>
