import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
import styles from './index.module.less';
import { NScrollbar, useMessage } from 'naive-ui';

export default defineComponent({
  name: 'chapter-modal',
  props: {
    treeList: {
      type: Array,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const message = useMessage();
    const { treeList, itemActive } = toRefs(props);

    const formatParentId = (id: any, list: any, ids = [] as any) => {
      for (const item of list) {
        if (item.knowledgeList && item.knowledgeList.length > 0) {
          const cIds: any = formatParentId(id, item.knowledgeList, [
            ...ids,
            item.id
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    };

    watch(
      () => props.itemActive,
      () => {
        const ids = formatParentId(itemActive.value, treeList.value);
        if (ids.length > 0) {
          treeList.value.forEach((tree: any) => {
            if (tree.id == ids[0]) {
              tree.selected = true;
            } else {
              tree.selected = false;
            }
          });
        }
      }
    );

    onMounted(() => {
      const ids = formatParentId(itemActive.value, treeList.value);
      if (ids.length > 0) {
        treeList.value.forEach((tree: any) => {
          if (tree.id == ids[0]) {
            tree.selected = true;
          }
        });
      }
    });
    return () => (
      <NScrollbar class={styles.scrollBar}>
        <div class={[styles.listSection]}>
          {treeList.value.map((item: any, index: number) => (
            <div class={styles.treeParent} key={'parent' + index}>
              <div
                class={[styles.treeItem, styles.parentItem]}
                onClick={() => {
                  treeList.value.forEach((child: any) => {
                    if (item.id !== child.id) {
                      child.selected = false;
                    }
                  });
                  item.selected = item.selected ? false : true;
                }}>
                {item.knowledgeList && item.knowledgeList.length > 0 && (
                  <span
                    class={[
                      styles.arrow,
                      item.selected ? styles.arrowSelect : ''
                    ]}></span>
                )}
                <p
                  class={[
                    styles.title,
                    item.selected ? styles.titleSelect : ''
                  ]}>
                  <span
                    class={[
                      styles.dir,
                      item.selected ? styles.dirSelect : ''
                    ]}></span>
                  {item.name}
                </p>
              </div>

              {item.selected &&
                item.knowledgeList &&
                item.knowledgeList.map((child: any, j: number) => (
                  <div
                    key={'child' + j}
                    class={[
                      styles.treeItem,
                      styles.childItem,
                      styles.animation,
                      itemActive.value === child.id ? styles.childSelect : ''
                    ]}
                    onClick={() => {
                      // 判断是否选择的同一个课件
                      if (itemActive.value == child.id) {
                        return;
                      }
                      if (!child.containMaterial) {
                        message.error('该章节暂无课件');
                        return;
                      }
                      emit('handleSelect', {
                        itemActive: child.id,
                        itemName: child.name
                      });
                      // emit('handleSelect', {});
                      // prepareStore.setSelectKey(child.id);
                      // prepareStore.setLessonCoursewareId(
                      //   child.lessonCoursewareId
                      // );
                      // prepareStore.setLessonCoursewareDetailId(
                      //   child.lessonCoursewareDetailId
                      // );
                    }}>
                    <span class={styles.childArrow}></span>
                    <p class={styles.title}>{child.name}</p>
                  </div>
                ))}
            </div>
          ))}
        </div>
      </NScrollbar>
    );
  }
});
