<template>
  <li>
    <span
      @click.stop="handleClick"
      :class="{
        'has-children': menu.childList && menu.childList.length > 0,
        'menu-active': isActive(menu.menuId),
        'open': menu.isOpen,
      }"
    >
      {{ menu.menuNm }}
    </span>

    <ul v-if="menu.isOpen && menu.childList?.length > 0" class="sub-menu">
      <MenuItem
        v-for="(child, idx) in menu.childList"
        :key="idx"
        :menu="child"
        :is-active="isActive"
        :on-click="onClick"
        @toggle="onToggle"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    menu: Object,
    isActive: Function,
    onClick: Function,
  },
  methods: {
    handleClick() {
      if (this.menu.childList && this.menu.childList.length > 0) {
        // const updatedMenu = {
        //   ...this.menu,
        //   isOpen: !this.menu.isOpen,
        // };
        // console.log("updatedMenu",updatedMenu)
        this.$emit("toggle", this.menu);
      } else {
        this.onClick(this.menu);
      }
    },
    onToggle(menu) {
      this.$emit("toggle", menu);
    },
  },
};
</script>
