<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  module: Object
})

const isFolder = computed(() => {
  return props.module.children && props.module.children.length > 0
})

function toggle() {
  isOpen.value = !isOpen.value
}

function changeType() {
  if (!isFolder.value) {
    isOpen.value = true
  }
}

const emit = defineEmits(['add-child'])

function addChild() {
  emit('add-child', props.module)
}

const isOpen = ref(false)
</script>

<template>
  <li>
    <div class="tree-item" @click="toggle" @dblclick="changeType">
      {{ module.name }}<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
      <CustomTreeItem
        v-for="child in module.children"
        :key="child.id"
        :module="child"
        @add-child="$emit('add-child', $event)"
      ></CustomTreeItem>
      <li class="add" @click="addChild">+</li>
    </div>
  </li>
</template>

<style scoped></style>
