<template>
    <li :class="`${prefix}-menu-item-group`">
        <div :class="`${prefix}-menu-item-group__title`"
             :style="{paddingLeft: levelPadding + 'px'}">
            <template v-if="!$slots.title">{{title}}</template>
            <slot v-else
                  name="title"></slot>
        </div>
        <ul>
            <slot></slot>
        </ul>
    </li>
</template>
<script>
import menuMixins from './mixins';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-menu-item-group`,
    componentName: `${prefix}-menu-item-group`,
    mixins: [prefixMixins, menuMixins],
    inject: ['jddMenu'],
    props: {
        title: {
            type: String
        }
    },
    data() {
        return {
            paddingLeft: 24
        };
    },
    computed: {
        levelPadding() {
            let padding = this.paddingLeft;
            let parent = this.$parent;
            if (this.jddMenu.collapse) return padding;
            while (
                parent &&
                parent.$options.componentName !== `${prefix}-menu`
            ) {
                if (parent.$options.componentName === `${prefix}-submenu`) {
                    padding += padding;
                }
                parent = parent.$parent;
            }
            return padding;
        }
    }
};
</script>

