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 moreIcon from '../image/zy_toggle_icon.png';
// import titleIcon from '../image/zy_title_icon.png';
import songIcon from '../image/song_icon.png';
import audioIcon from '../image/zy_audio_icon.png';
import vedioIcon from '../image/zy_vedio_icon.png';
import pptIcon from '../image/zy_ppt_icon.png';
import imgIcon from '../image/zy_img_icon.png';
import otherIcon from '../image/zy_more_icon.png';
import iconPlayDefault from '../image/icon-play-default.png';
import iconSingDefault from '../image/icon-sing-default.png';

import { Collapse, CollapseItem } from 'vant';
export default defineComponent({
  name: 'points',
  props: {
    kjId: {
      // 课件id
      type: String,
      default: ''
    },
    zsdId: {
      // 知识点id
      type: String,
      default: ''
    },
    currentCourse: {
      // 当前的课件
      type: Object,
      default: {}
    },
    popShow: {
      type: Boolean,
      default: false
    },
    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 imgTypes: { [_: string]: string } = {
      SONG: audioIcon,
      VIDEO: vedioIcon,
      IMG: imgIcon,
      MUSIC: songIcon,
      PPT: pptIcon,
      LISTEN: otherIcon,
      RHYTHM: otherIcon,
      THEORY: otherIcon,
      MUSIC_WIKI: otherIcon,
      INSTRUMENT: otherIcon,
      MUSICIAN: otherIcon
    };
    // 获取对应图片
    // 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({
      kjId: props.kjId, // 当前选中的课件id
      zsdId: props.zsdId, // 当前选中的知识点id
      currentCourse: props.currentCourse as any // 当前课件
    });
    watch(
      () => props.popShow,
      () => {
        pointData.currentCourse = props.currentCourse;
        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}>
          <Collapse
            class={styles.collapse}
            modelValue={pointData.zsdId}
            onUpdate:modelValue={(val: any) => {
              pointData.zsdId = val;
            }}
            border={false}
            accordion>
            {pointData.currentCourse?.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%' }}
                key={know.id}
                name={know.id}>
                {{
                  default: () =>
                    know.materialInfo.map((material: any, index: number) => {
                      return (
                        <div
                          key={material.id}
                          class={[
                            styles.matItem,
                            props.itemActive == material.id
                              ? styles.itemActive
                              : ''
                          ]}
                          onClick={() => {
                            emit('handleSelect', {
                              itemActive: material.id,
                              zsdId: know.id,
                              kjId: pointData.currentCourse
                                ?.coursewareDetailKnowledgeId
                            });
                          }}>
                          {material.paymentType === 'VIP' && (
                            <span
                              class={[
                                styles.iconPayment,
                                styles[material.paymentType]
                              ]}>
                              VIP
                            </span>
                          )}

                          <div class={styles.cover}>
                            <img src={material.url} />

                            <div class={styles.audioPlayTypeSection}>
                              {material.audioPlayTypesArray.includes(
                                'SING'
                              ) && (
                                <img
                                  src={iconSingDefault}
                                  class={styles.iconPlay}
                                />
                              )}
                              {material.audioPlayTypesArray.includes(
                                'PLAY'
                              ) && (
                                <img
                                  src={iconPlayDefault}
                                  class={styles.iconPlay}
                                />
                              )}
                            </div>
                          </div>
                          <div class={styles.title}>
                            <img
                              class={styles.typeImg}
                              src={imgTypes[material.type]}
                            />
                            <div class={styles.tName}>{material.name}</div>
                          </div>
                        </div>
                      );
                    }),
                  icon: () => (
                    <img
                      class={styles.arrow}
                      src={
                        pointData.zsdId === know.id
                          ? chapterDown
                          : chapterDefault
                      }
                    />
                  )
                }}
              </CollapseItem>
            ))}
          </Collapse>
        </div>
      </div>
    );
  }
});