classroom-app/src/views/courseware-play/component/points.tsx

import { PropType, defineComponent, reactive, watch, onMounted } from 'vue';
import styles from './point.module.less';
import iconMulv from '../image/icon-mulv.svg';
import iconZhibo from '../image/icon-load.gif';
import iconImage from '../image/icon-image.svg';
import iconImageActive from '../image/icon-image-active.svg';
import iconVideo from '../image/icon-video.svg';
import iconVideoActive from '../image/icon-video-active.svg';
import iconSong from '../image/icon-song.svg';
import iconSongActive from '../image/icon-song-active.svg';
import chapterDown from '../image/chapter-down-arrow.svg';
import chapterDefault from '../image/chapter-default-arrow.svg';
import chapterDefault2 from '../image/chapter-default-arrow2.svg';

import { Icon, Collapse, CollapseItem } from 'vant';
import { useRoute } from 'vue-router';
export default defineComponent({
  name: 'points',
  props: {
    allList: {
      type: Array as any,
      default: () => []
    },
    kjId: {
      type: String,
      default: ''
    },
    zsdId: {
      type: String,
      default: ''
    },
    popShow: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    },
    itemName: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const route = useRoute();
    // 类型（VIDEO,IMG,SONG，PPT,MUSIC，LISTEN:听音,RHYTHM：节奏,THEORY：乐理知识,MUSIC_WIKI:名曲鉴赏 INSTRUMENT:乐器 MUSICIAN:音乐家）,可用值:VIDEO,MUSIC,IMG,SONG,PPT,LISTEN,RHYTHM,THEORY,MUSIC_WIKI,INSTRUMENT,MUSICIAN
    const types: { [_: string]: string } = {
      SONG: '音频',
      VIDEO: '视频',
      IMG: '图片',
      MUSIC: '乐谱',
      PPT: 'PPT',
      LISTEN: '听音',
      RHYTHM: '节奏',
      THEORY: '乐理',
      MUSIC_WIKI: '名曲',
      INSTRUMENT: '乐器',
      MUSICIAN: '音乐家',
    };

    // 获取对应图片
    const getImage = (item: any) => {
      if (item.type === 'VIDEO') {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      } else if (['IMAGE', 'IMG'].includes(item.type)) {
        return props.itemActive == item.id ? iconImageActive : iconImage;
      } else if (item.type === 'SONG') {
        return props.itemActive == item.id ? iconSongActive : iconSong;
      } else {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      }
    };
    
    const pointData = reactive({
      allList: props.allList,
      kjId: props.kjId, // 当前选中的课件id
      zsdId: props.zsdId, // 当前选中的知识点id
    });
    watch(
      () => props.allList,
      () => {
        pointData.kjId = props.kjId
        pointData.zsdId = props.zsdId
      }
    );
    watch(
      () => props.popShow,
      () => {
        console.log('刷新123')
        pointData.kjId = props.kjId
        pointData.zsdId = props.zsdId
      }
    );
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMulv} />
          {props.itemName}
        </div>
        <div class={styles.content}>
          {props.allList.length && 
            <Collapse
            class={styles.collapse}
            modelValue={pointData.kjId}
            onUpdate:modelValue={(val: any) => {
              pointData.kjId = val;
            }}
            border={false}
            accordion>
            {props.allList.map((item: any) => (
              <CollapseItem
                class={[
                  styles.collapseItem,
                  pointData.kjId === item.id ? styles.activeItem : ''
                ]}
                border={false}
                isLink={false}
                title={item.name}
                titleStyle={{ width: '80%' }}
                name={item.id}>
                {{
                  default: () => (
                    <>
                      <Collapse
                          class={styles.collapse}
                          modelValue={pointData.zsdId}
                          onUpdate:modelValue={(val: any) => {
                            pointData.zsdId = val;
                          }}
                          border={false}
                          accordion>
                          {item.knowledgeList.map((know: any) => (
                            <CollapseItem
                              center
                              class={[
                                styles.collapseItem,
                                styles.collapseKnow,
                                pointData.zsdId === know.id ? styles.activeItem2 : ''
                              ]}
                              border={false}
                              isLink={false}
                              title={know.name}
                              titleClass={'van-ellipsis'}
                              titleStyle={{ width: '80%' }}
                              name={know.id}>
                              {{
                                default: () => (
                                  <>
                                    {know.materialInfo.map((material: any, index: number) => {
                                      return (
                                        <div
                                          class={[
                                            styles.matItem,
                                            props.itemActive == material.id ? styles.itemActive : ''
                                          ]}
                                          onClick={() => {
                                            console.log(pointData.allList)
                                            emit('handleSelect', {
                                              itemActive: material.id,
                                              zsdId: know.id,
                                              kjId: item.id
                                            });
                                          }}>
                                          <div class={styles.cover}>
                                            <img src={material.url} />
                                          </div>
                                          <div class={styles.title}>
                                            <div class={styles.tag}>{types[material.type]}</div>
                                            <div>{material.name}</div>
                                          </div>
                                        </div>
                                      );
                                    })}                                    
                                  </>
                                ),
                                icon: () => (
                                  <img
                                    class={styles.arrow}
                                    src={
                                      pointData.zsdId === know.id
                                        ? chapterDown
                                        : chapterDefault2
                                    }
                                  />
                                )
                              }}
                            </CollapseItem>
                          ))}
                      </Collapse>                      
                    </>
                  ),
                  icon: () => (
                    <img
                      class={[styles.arrow, styles.firstArrow]}
                      src={
                        pointData.kjId === item.id
                          ? chapterDown
                          : chapterDefault
                      }
                    />
                  )
                }}
              </CollapseItem>
            ))}
            </Collapse>          
          }


          {/* {props.data.map((item, index: number) => {
            return (
              <div
                class={[
                  styles.item,
                  props.itemActive == item.id ? styles.itemActive : ''
                ]}
                onClick={() => {
                  emit('handleSelect', {
                    itemActive: item.id
                  });
                }}>
                <div class={styles.cover}>
                  <img src={item.url} />
                </div>
                <div class={styles.title}>
                  <div class={styles.tag}>{types[item.type]}</div>
                  <div>{item.name}</div>
                </div>
              </div>
            );
          })} */}
        </div>
      </div>
    );
  }
});