classroom-instruments/src/components/card-preview/index.tsx

import { NModal, NSpin } from 'naive-ui';
import { defineComponent, ref, toRef, watch } from 'vue';
import styles from './index.module.less';
import VideoModal from './video-modal';
import MusicModal from './music-modal';
import SongModal from './song-modal';
import TheEmpty from '../TheEmpty';
import RhythmModal from './rhythm-modal';
import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
import TheoryDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
import MusicDetail from '/src/views/prepare-lessons/model/source-music/detail';

export default defineComponent({
  name: 'card-preview',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({})
    },
    size: {
      type: String,
      default: 'default'
    },
    /** 是否下载 只支持 video audio */
    isDownload: {
      type: Boolean,
      default: false
    }
  },
  emit: ['update:show'],
  setup(props, { emit }) {
    const show = toRef(props.show);
    const item = toRef(props.item);
    const pptLoading = ref(true);

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

    watch(
      () => props.item,
      () => {
        item.value = props.item;
      }
    );
    return () => (
      <>
        <NModal
          v-model:show={show.value}
          onUpdate:show={() => {
            emit('update:show', show.value);
            if (!show.value) {
              pptLoading.value = true;
            }
          }}
          preset="card"
          showIcon={false}
          class={[
            'modalTitle background',
            styles.cardPreview,
            item.value.type === 'PPT' && styles.maxCard,
            props.size === 'large' && styles.cardLarge
          ]}
          title={item.value.title}
          blockScroll={false}>
          {item.value.type === 'VIDEO' && (
            <VideoModal
              title={item.value.title}
              poster={item.value.url}
              src={item.value.content}
              isDownload={props.isDownload}
            />
          )}
          {item.value.type === 'MUSIC' && (
            <MusicModal class={styles.musicPreview} item={item.value} />
          )}
          {item.value.type === 'SONG' && (
            <SongModal item={item.value} isDownload={props.isDownload} />
          )}
          {item.value.type === 'PPT' && (
            <NSpin show={pptLoading.value}>
              <iframe
                class={styles.pptBox}
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                  item.value.content
                )}`}
                onLoad={() => {
                  console.log('loading end');
                  pptLoading.value = false;
                }}
                width="100%"
                height="100%"
                frameborder="1"></iframe>
            </NSpin>
          )}
          {item.value.type === 'RHYTHM' && (
            <RhythmModal class={styles.musicPreview} item={item.value} />
          )}

          {(item.value.type === 'INSTRUMENT' ||
            item.value.type === 'MUSICIAN') && (
            <div class={styles.instrumentGroup}>
              <InstruemntDetail
                type="modal"
                contentType={item.value.type}
                id={item.value.content}
              />
            </div>
          )}
          {item.value.type === 'MUSIC_WIKI' && (
            <div class={styles.instrumentGroup}>
              <MusicDetail
                type="modal"
                contentType={item.value.type}
                id={item.value.content}
              />
            </div>
          )}

          {item.value.type === 'THEORY' && (
            <div>
              <TheoryDetail type="modal" id={item.value.content} />
            </div>
          )}

          {/* LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC_WIKI:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家） */}
          {/*  VIDEO("视频"),
    MUSIC("曲目"),
    IMG("图片"),
    SONG("音频"),
    PPT("ppt"),
    LISTEN("听音练习"),
    RHYTHM("节奏练习"),
    THEORY("乐理知识"),
    MUSIC_WIKI("名曲鉴赏"),
    INSTRUMENT("乐器"),
    MUSICIAN("音乐家"), */}
          {![
            'VIDEO',
            'MUSIC',
            'SONG',
            'PPT',
            'RHYTHM',
            'INSTRUMENT',
            'THEORY',
            'MUSICIAN',
            'MUSIC_WIKI'
          ].includes(item.value.type) && <TheEmpty />}
        </NModal>
      </>
    );
  }
});