<template>
  <li class="el-menu-item-group">
    <div class="el-menu-item-group__title" :style="stylePadding">
      <template v-if="!$slots.title">{{title}}</template>
      <slot v-else name="title"></slot>
    </div>
    <ul>
      <slot></slot>
    </ul>
  </li>
</template>
<script>
  export default {
    name: 'ElMenuItemGroup',

    componentName: 'ElMenuItemGroup',

    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        paddingLeft: 20
      };
    },
    computed: {
      stylePadding() {
        let padding = 10;
        let parent = this.$parent;
        while (parent && parent.$options.componentName !== 'ElMenu') {
          if (parent.$options.componentName === 'ElSubmenu') {
            padding += 20;
          }
          parent = parent.$parent;
        }
        padding === 10 && (padding = 20);
        return { [document.children[0].getAttribute("dir") === "rtl" ? 'paddingRight' : 'paddingLeft']: padding + 'px' };
      }
    }
  };
</script>

