<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    data: anyObj
    index?: number | null
    prop?: {
      label: string
      select: string
    }
    expands?: string[]
    type: number // 0 章节 1 知识点
    // knowledge?: boolean; // 是否为知识点节点
  }>(),
  {
    data: () => ({}),
    expands: () => [],
    index: null,
    knowledge: false,
  },
)

const emits = defineEmits(['select'])

defineOptions({
  name: 'XTreeItem',
})

function onSelect(pData: anyObj, data?: anyObj) {
  emits('select', pData, data)
}
// function isKnowledgeVoList(children: anyObj[]): boolean {
//     return children?.some(
//         (i: anyObj) => i.knowledgeVoList?.length || isKnowledgeVoList(i.children),
//     );
// }
</script>

<template>
  <el-collapse-item :name="data.id">
    <template #title>
      <Icon
        v-if="data.children?.length"
        class="arrow-icon"
        name="textbook_arrow_up"
        size="48"
        :rotate="expands.includes(data.id) ? 180 : 0"
      />
      <div class="title">
        <!-- <template v-if="index !== null"> {{ index! + 1 }}. </template> -->
        <!-- {{ type ? '·' : '' }} -->
        {{ data[prop?.label || 'label'] }}
      </div>
      <Icon
        class="select-icon"
        :name="data[prop?.select || 'selected'] === 1 ? 'checkbox_checked' : 'checkbox_unchecked'"
        size="48"
        @click.stop="onSelect(data)"
      />
    </template>
    <template v-if="data.children?.length">
      <div class="child-list">
        <template v-for="(item, idx) in data.children" :key="item?.id">
          <XTreeItem
            v-if="item?.children?.length"
            :index="idx"
            :data="item"
            :prop="prop"
            :type="type"
            :expands="expands"
            @select="onSelect"
          />
          <template v-else>
            <div class="child-list-item" @click="onSelect(data, item)">
              <div class="title">
                {{ type ? '·' : '' }}
                {{ item?.[prop?.label || 'label'] }}
              </div>
              <Icon
                class="select-icon"
                :name="
                  item?.[prop?.select || 'selected'] === 1
                    ? 'checkbox_checked'
                    : 'checkbox_unchecked'
                "
                size="48"
              />
            </div>
          </template>
        </template>
      </div>
    </template>
  </el-collapse-item>
  <!-- <Empty v-else type="learn" content="该教材暂无知识点"></Empty> -->
</template>
<style lang="scss" scoped>
:deep(.el-collapse-item) {
  margin-left: 72px;
  &:not(.is-active) {
    .arrow-icon {
      transform: rotate(0) !important;
    }
  }
  &.is-active {
    .arrow-icon {
      transform: rotate(180deg);
    }
  }
}
.empty {
  display: none;
  &:first-child {
    display: block;
    margin-top: 8.33vh;
  }
}
</style>
