import { NCollapse, NCollapseItem } 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
    }
  },
  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.listSection]} id="drawerCardRef">
        {props.knowledgePointList.map((item: any, index: number) => (
          <div class={styles.treeParent} key={'parent' + index}>
            <div
              class={[styles.treeItem, styles.parentItem]}
              onClick={() => {
                if (parentIndex.value === index) {
                  parentIndex.value = -1;
                } else {
                  parentIndex.value = index;
                }
              }}>
              <span
                class={[
                  styles.arrow,
                  parentIndex.value === index ? styles.arrowSelect : ''
                ]}></span>
              <p
                class={[
                  styles.title,
                  parentIndex.value === index ? styles.titleSelect : ''
                ]}>
                {item.title}
              </p>
            </div>

            {parentIndex.value === index &&
              item.list &&
              item.list.map((child: any, j: number) => (
                <div class={[styles.cardContainer, 'drawerCardItemRef']}>
                  <CardType
                    item={child}
                    isActive={
                      childIndex.value === j &&
                      parentIndex.value === props.courseActiveIndex
                    }
                    isCollect={false}
                    isShowCollect={false}
                    onClick={() => {
                      emit('confirm', child);
                    }}
                  />
                </div>
              ))}
          </div>
        ))}
      </div>
    );
  }
});