<template>
  <li class="mm-menu-item-group">
    <div
      :style="paddingStyle"
      class="mm-menu-item-group-title">
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    <ul>
      <slot></slot>
    </ul>
  </li>
</template>

<script>
import Menu from "./menu-mixin"

export default {
  name: "mm-menu-item-group",

  mixins: [Menu],

  inject: {
    rootMenu: {
      from: "mm-menu",
      default: null,
    },
  },
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      paddingLeft: 20,
    }
  },
  computed: {
    levelPadding() {
      let padding = 20
      let parent = this.$parent
      if (this.rootMenu.collapse) {
        return 20
      }
      while (parent && parent.$options.name !== "mm-menu") {
        if (parent.$options.name === "mm-submenu") {
          padding += 20
        }
        parent = parent.$parent
      }
      return padding
    },
  },
}
</script>
