<script setup lang="ts">
import XTree from './XTree/index.vue'
import subjectApi from '@/api/subject/subject'
import obj from '@/utils/obj'
import { useRoute } from 'vue-router'

const props = withDefaults(
  defineProps<{
    data?: anyObj
    subtitle?: string
    title?: string
  }>(),
  {
    data: () => ({}),
    subtitle: '',
    title: '',
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])

const route = useRoute()

const loading = ref(false)
const chapterList = ref<anyObj[]>([])

const XTreeRef = ref()
const allSelect = computed(() => XTreeRef.value?.allSelect)
function onAllSelect() {
  XTreeRef.value?.toggleAllSelection()
}

// 是否有知识点
// function isKnowledgeVoList(list: anyObj[]) {
//     list.forEach(i => {
//         if (i.knowledgeVoList?.length) {
//             i.isKnowledge = true;
//         }
//         if (i.children?.length) {
//             isKnowledgeVoList(i.children);
//             if (i.children.some((i: anyObj) => i.isKnowledge)) {
//                 i.isKnowledge = true;
//             }
//         }
//     });
// }

// 获取章节
async function getChapter() {
  if (props.data?.chapter?.length) {
    return (chapterList.value = props.data?.chapter)
  }
  loading.value = true
  try {
    const { data: res } = await subjectApi.getSubjectChapterTree({ textBookId: props.data.id })
    chapterList.value = res.data
    // isKnowledgeVoList(chapterList.value);
    if (route.params.type === '1') {
      chapterList.value = chapterList.value
        .filter(i => i?.id && i?.knowledgeVoList?.length)
        .map(i => {
          return {
            id: i.id,
            children:
              i.knowledgeVoList
                ?.filter((i: any) => i?.id)
                .map((i: any) => ({ id: i?.id, name: i?.name })) || [],
            name: i.name,
          }
        })
    }
  } finally {
    loading.value = false
  }
}

defineExpose({
  init: getChapter,
  getSelectId: () => XTreeRef.value?.getSelectId(), // 获取选中章节ID
  getSelectObj: () => XTreeRef.value?.getSelectObj(),
  chapterList,
  getProgress: () =>
    Math.trunc(
      (obj.getNodesSize(XTreeRef.value?.getSelectObj()) * 100.0) /
        obj.getNodesSize(chapterList.value),
    ),
})
</script>

<template>
  <div class="content">
    <div class="tips">
      <LineFont :text="title" size="48" space="20" />
      <div class="small-tip">{{ subtitle }}</div>
    </div>
    <div class="main">
      <div class="list">
        <div class="list-head">
          目录
          <Icon
            v-if="chapterList?.length"
            :name="allSelect ? 'checkbox_checked' : 'checkbox_unchecked'"
            size="48"
            @click="onAllSelect"
          />
        </div>
        <Empty v-if="loading" type="loading" />
        <el-scrollbar v-else>
          <XTree
            ref="XTreeRef"
            :options="chapterList"
            :prop="{
              label: 'name',
            }"
            :type="Number(route.params.type)"
          />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  .main {
    height: 64.17vh;
    padding: 0 $space-7;
    .list {
      height: 100%;
      border-radius: 2.5vh;
      background: #fff;
      .list-head {
        width: 100%;
        height: 6.67vh;
        border-radius: 2.5vh 2.5vh 0 0;
        background: #90fcf7;
        color: $font-tag-color;
        font-size: $font-size-7;
        line-height: 1.5em; /* 150% */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 $space-4;
        .x-icon {
          cursor: pointer;
        }
      }
      .el-scrollbar {
        height: 56.67vh;
      }
    }
  }
}
</style>
