<template>
  <template v-for="(item, index) in menu" :key="index">
    <template v-if="item.children?.length">
      <div :class="`${prefixCls}`">
        <LjHeader :class="`${prefixCls}-header`" :title="item.meta.title" simple size="small" />
        <ul :class="`${prefixCls}-list`">
          <template v-for="(itm, idx) in item.children" :key="idx">
            <li :class="`${prefixCls}-item`" @click="handleClick(itm)">
              <span class="text-body-m">{{ $t(`menu.${itm.name}`) }}</span>
            </li>
          </template>
        </ul>
      </div>
    </template>
  </template>
</template>

<script setup lang="ts" name="LjRightMenuGroupList">
import { ref, computed, provide } from "vue";
import { useDesign } from "@/hooks/useDesign";
import LjHeader from "@/components/LjHeader/index.vue";

interface RightMenuSubProps {
  menu: any;
}

const props = withDefaults(defineProps<RightMenuSubProps>(), {
  menu: []
});

const { prefixCls } = useDesign("right-menu__submenu-group");
const emit = defineEmits(["selItem"]);

const handleClick = (item: any) => {
  emit("selItem", item);
};
</script>
