<template>
  <a-menu mode="vertical" :style="{ width }" class="multi-level-menu">
    <template v-for="(item, index) in children">
      <a-menu-item :key="index" v-bind="item.attrs" @click="handleMenuClick(item)">
        {{ item.title }}
        <div v-if="item.children" :key="index">
          <a-menu class="multi-level-menu-sub-menu">
            <a-menu-item v-for="child in item.children" :key="child.key" @click="handleSubMenuClick(item, child)">
              {{ child.title }}
            </a-menu-item>
          </a-menu>
        </div>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
export default {
  props: {
    children: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: 'auto'
    }
  },
  methods: {
    handleMenuClick(item) {
      if (!item.children) {
        this.$emit('menuClick', item)
      }
    },
    handleSubMenuClick(item, child) {
      this.$emit('submenuClick', { item, child })
    }
  }
}
</script>

<style lang="less">
.multi-level-menu {
  .ant-menu-item {
    overflow: visible;

    .multi-level-menu-sub-menu {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(100%);
      display: none;
      background: #03353f;
    }

    &-active {
      .multi-level-menu-sub-menu {
        display: block;
      }
    }
  }
}
</style>
