<script setup lang="ts">
import { ref, computed } from 'vue'
defineOptions({
  name: 'tree-item',
})
const props = defineProps({
  data: Object,
})
const isOpen = ref(false)
const isFolder = computed(() => {
  return props.data?.next && props.data?.next.length
})
function toggle() {
  isOpen.value = !isOpen.value
}
</script>
<template>
  <li class="item">
    <div @click="toggle">
      <span v-if="isFolder">{{ props.data?.text }}</span>
      <a
        v-else
        target="demo"
        :href="`demo.html?app=${props.data?.name}`"
        :class="{ active: props.data?.active }"
        >{{ props.data?.text }}</a
      >
      <span v-if="isFolder" class="folder">[{{ isOpen ? '-' : '+' }}]</span>
    </div>
    <ul v-if="isFolder" :style="{ display: isOpen ? 'block' : 'none' }">
      <tree-item
        class="item"
        v-for="model in props.data?.next"
        :data="model"
      ></tree-item>
    </ul>
  </li>
</template>
<style scoped>
ul {
  padding-left: 1em;
  line-height: 1.5em;
}
li {
  color: #444;
  list-style: none;
  margin-top: 5px;
  user-select: none;
}
li > div {
  display: flex;
  align-items: center;
}
li > div a {
  color: #444;
  text-decoration: none;
}
li > div a:hover {
  color: #f60;
  text-decoration: underline;
}
.item {
  cursor: pointer;
}
.folder {
  display: flex;
  padding-left: 4px;
  width: 16px;
  align-items: center;
  justify-content: space-around;
}
.folder i {
  font-style: normal;
}
.active {
  color: #f60;
}
</style>
