import { NCollapse, NCollapseItem, NScrollbar } from 'naive-ui';
import { computed, defineComponent, ref, watch } from 'vue';
import CardType from '/src/components/card-type';
import styles from './index.module.less';

export default defineComponent({
  name: 'source-list',
  props: {
    knowledgePointList: {
      type: Array,
      default: () => []
    },
    activeItem: {
      type: Object,
      default: () => ({})
    },
    /** 当前播放的是第几个知识点组 */
    courseActiveIndex: {
      type: Number,
      default: 0
    },
    teacherChapterName: {
      type: String,
      default: ''
    }
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const parentIndex = ref(props.courseActiveIndex);

    watch(
      () => props.courseActiveIndex,
      () => {
        parentIndex.value = props.courseActiveIndex;
      }
    );

    const childIndex = computed(() => {
      let index = 0;
      props.knowledgePointList.forEach((item: any) => {
        item.list.forEach((child: any, j: number) => {
          if (child.id === props.activeItem.id) {
            index = j;
          }
        });
      });
      return index;
    });
    return () => (
      <div class={styles.sourcelistBox}>
        <div class={styles.treeBox}>
          <div class={[styles.listSectionLeft]}>
            <NScrollbar class={styles.leftscrollBar}>
              {props.teacherChapterName && (
                <div class={styles.className}>
                  <i class={styles.classNameIcon}></i>
                  <p class={styles.classNameContent}>
                    {props.teacherChapterName}
                  </p>
                </div>
              )}
              {props.knowledgePointList.map((item: any, index: number) => (
                <div
                  class={[
                    styles.treeParent,
                    parentIndex.value === index && styles.parentSelect
                  ]}
                  key={'parent' + index}
                  onClick={() => {
                    parentIndex.value = index;
                  }}>
                  {item.title}
                </div>
              ))}
            </NScrollbar>
          </div>
          <div class={[styles.listSectionRight]}>
            <NScrollbar class={styles.rightscrollBar}>
              {(props.knowledgePointList[parentIndex.value] as any)?.list &&
                (props.knowledgePointList[parentIndex.value] as any).list.map(
                  (child: any, j: number) => (
                    <div class={[styles.cardContainer, 'drawerCardItemRef']}>
                      <CardType
                        item={child}
                        audioPlayTypeSize="small"
                        isActive={
                          childIndex.value === j &&
                          parentIndex.value === props.courseActiveIndex
                        }
                        isCollect={false}
                        isShowCollect={false}
                        onClick={() => {
                          emit('confirm', child);
                        }}
                      />
                    </div>
                  )
                )}
            </NScrollbar>
          </div>
        </div>
      </div>
    );
  }
});
