<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    data: anyObj
    index?: number | null
    idx: number
    type: number // 0 章节 1 知识点
    knowledge?: boolean // 是否为知识点节点
  }>(),
  {
    data: () => ({}),
    index: null,
    type: 0,
  },
)

defineOptions({
  name: 'XTreeItem',
})
</script>

<template>
  <el-collapse-item :name="data.id">
    <template #title>
      <div :class="['title', `title_${idx}`]">
        {{ data.name }}
      </div>
      <div class="icon-box">
        <Icon
          v-if="data.children?.length || (type && data.knowledgeVoList?.length)"
          class="arrow-icon"
          name="textbook_arrow_up_grey"
          size="24"
          style="margin-right: 32px"
        />
      </div>
    </template>
    <template v-if="data.children?.length || (type && data.knowledgeVoList?.length)">
      <div class="child-list">
        <template v-for="(item, index) in data.children" :key="item?.id">
          <XTreeItem
            v-if="item?.children?.length"
            :index="index"
            :data="item"
            :type="type"
            :idx="idx + 1"
          />
          <XTreeItem
            v-else-if="type && item?.knowledgeVoList?.length"
            :index="idx"
            :data="item"
            :type="type"
            knowledge
            :idx="idx + 1"
          />
          <template v-else-if="type ? !knowledge && item?.knowledgeVoList?.length : !knowledge">
            <div class="child-list-item">
              <div :class="['title', `title_${idx + 1}`]">
                {{ knowledge ? '·' : '' }}
                {{ item?.name }}
              </div>
            </div>
          </template>
        </template>
        <template v-if="type && data.knowledgeVoList?.length">
          <template v-for="item in data.knowledgeVoList" :key="item?.id">
            <div class="child-list-item">
              <div :class="['title', `title_${idx + 1}`]">·{{ item?.name }}</div>
            </div>
          </template>
        </template>
      </div>
    </template>
  </el-collapse-item>
</template>
<style lang="scss" scoped>
:deep(.el-collapse-item) {
  margin-left: 0;
  padding-left: 0;
  .title {
    margin-left: 0 !important;
  }
  &:not(.is-active) {
    .arrow-icon {
      transform: rotate(0) !important;
    }
  }
  &.is-active {
    .arrow-icon {
      transform: rotate(180deg);
    }
  }
}
</style>
