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 { Icon, Collapse, CollapseItem } from 'vant';
import { useRoute } from 'vue-router';
export default defineComponent({
  name: 'points',
  props: {
    allList: {
      type: Array as any,
      default: () => []
    },
    kjId: {
      // 课件id
      type: String,
      default: ''
    },
    zsdId: {
      // 知识点id
      type: String,
      default: ''
    },
    currentCourse: {
      // 当前的课件
      type: Object,
      default: {}
    },
    popShow: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    },
    itemName: {
      // 章节名称
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect', 'courseSelect'],
  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({
      allList: props.allList, // 章节下的所有课件
      kjId: props.kjId, // 当前选中的课件id
      zsdId: props.zsdId, // 当前选中的知识点id
      currentCourse: props.currentCourse as any // 当前课件
    });
    watch(
      () => props.allList,
      () => {
        pointData.kjId = props.kjId;
        pointData.zsdId = props.zsdId;
      }
    );
    watch(
      () => props.popShow,
      () => {
        console.log('刷新123', props.allList, props.currentCourse);
        pointData.currentCourse = props.currentCourse;
        pointData.kjId = props.kjId;
        pointData.zsdId = props.zsdId;
        pointData.allList = props.allList;
      }
    );
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMulv} />
          {props.itemName}
        </div>
        <div class={styles.kjColumn}>
          <div class={styles.kjLeft}>
            <img src={titleIcon} />
            <span>{pointData.currentCourse?.name}</span>
          </div>
          {pointData.allList?.length > 1 && (
            <img
              class={styles.kjRight}
              src={moreIcon}
              onClick={() => {
                console.log(pointData.allList);
                emit('courseSelect');
              }}
            />
          )}
        </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%' }}
                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: pointData.currentCourse?.id
                              });
                            }}>
                            {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(
                                  'PLAY'
                                ) && (
                                  <img
                                    src={iconPlayDefault}
                                    class={styles.iconPlay}
                                  />
                                )}

                                {material.audioPlayTypesArray.includes(
                                  'SING'
                                ) && (
                                  <img
                                    src={iconSingDefault}
                                    class={styles.iconPlay}
                                  />
                                )}
                              </div>
                            </div>
                            <div class={styles.title}>
                              {/* <div class={styles.tag}>{types[material.type]}</div> */}
                              <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>

          {/* {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 class={styles.tName}>{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>
    );
  }
});