<script setup lang="ts">
import { PropType } from 'vue';
import DissectionTreeSub from './DissectionTreeSub.vue';

defineProps({
  id: {
    type: String,
    required: true,
  },
  tree: {
    type: Array as PropType<Record<string, any>[]>,
    required: true,
  },
  sub: {
    type: Boolean,
    default: false,
  },
  select: {
    type: Function,
    default: () => {},
  },
  selected: {
    type: Object,
    default: { id: '', idx: 0, start: 0, length: 0 },
  },
});
</script>

<template>
  <ul :class="{ tree: true, 'tree-issub': sub }">
    <li v-for="(n, i) in tree" :key="`${id}-${i}`" class="tree-li">
      <DissectionTreeSub
        :id="`${id}-${i}`"
        :node="n"
        :select="select"
        :selected="selected"
      />
    </li>
  </ul>
</template>

<style lang="css" scoped>
.tree {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
}
.tree-issub {
  padding-left: 0.5rem;
  border-left-width: 1px;
  margin-left: 0.5rem;
}
.tree-li {
  display: list-item;
  text-align: -webkit-match-parent;
  line-height: 1;
}
</style>
