<script setup>
import Checkbox from "@/components/customUI/Checkbox.vue";
import { twMerge } from "tailwind-merge";
import { computed, defineProps, onMounted, ref, watch } from "vue";

const props = defineProps({
  item: Object,
  selectedId: String,
  menuCheck:Function,
});
</script>

<template>
  <li>
    <!-- 項目無子層級 -->
    <a v-if="item.children.length === 0">
      <Checkbox
        :title="item.name"
        :checked="selectedId === item.id"
        @click="() => menuCheck(item.id)"
      />
    </a>
     <!-- 項目有子層級 -->
    <details v-else open>
      <summary>{{ item.name }}</summary>
      <ul>
        <li v-for="(child, index) in item.children" :key="index">
          <Menu :item="child" :selectedId="selectedId" :menuCheck="menuCheck"></Menu>
        </li>
      </ul>
    </details>
  </li>
</template>

<style lang="css" scoped></style>
