import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRef,
  watch,
  ComputedRef,
  ref
} from 'vue';

import styles from './index.module.less';
import { NScrollbar, useMessage } from 'naive-ui';
import deepClone from '/src/helpers/deep-clone';

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

    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;
          }
        });
      }
    });
    const activeknowledgeList = computed<any | undefined>(() => {
      return treeList.value.find((item: any) => {
        return item.selected;
      });
    });
    return () => (
      <div class={styles.chapterBox}>
        <div class={styles.treeBox}>
          <div class={[styles.listSectionLeft]}>
            <NScrollbar class={styles.scrollBar}>
              {treeList.value.map((item: any, index: number) => (
                <div
                  class={[item.selected ? styles.treeParentSelect : '']}
                  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 = true;
                    }}>
                    <p
                      class={[
                        styles.title,
                        item.selected ? styles.titleSelect : ''
                      ]}>
                      <span
                        class={[
                          styles.dir,
                          item.selected ? styles.dirSelect : ''
                        ]}></span>
                      <div class={styles.name}>{item.name}</div>
                    </p>
                  </div>
                </div>
              ))}
            </NScrollbar>
          </div>
          <div class={styles.listSectionRight}>
            <NScrollbar class={styles.scrollBar}>
              {activeknowledgeList.value &&
                activeknowledgeList.value.knowledgeList &&
                activeknowledgeList.value.knowledgeList.map(
                  (child: any, j: number) => (
                    <div
                      key={'child' + j}
                      class={[
                        styles.treeItem,
                        styles.childItem,
                        itemActive.value === child.id ? styles.childSelect : ''
                      ]}
                      onClick={() => {
                        // 判断是否选择的同一个课件
                        if (itemActive.value == child.id) {
                          return;
                        }
                        if (child.coursewareNum <= 0) {
                          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
                        // );
                      }}>
                      <div class={styles.titleName}>{child.name}</div>
                    </div>
                  )
                )}
            </NScrollbar>
          </div>
        </div>
      </div>
    );
  }
});
