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';
import ListenModal from './listen-modal';
import useDrag from '@/hooks/useDrag';
import Dragbom from '@/hooks/useDrag/dragbom';
import { useUserStore } from '@/store/modules/users';
import { modalClickMask } from '/src/state';

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: true
    },
    /** 是否下载 只支持 video audio */
    fullscreen: {
      type: Boolean,
      default: true
    },
    /** 从哪里使用 */
    from: {
      type: String,
      default: ''
    }
  },
  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;

        console.log(item.value, 'item.value  value');
      }
    );
    // 拖动
    let cardPreviewBoxDragData: any;
    let cardPreviewBoxClass: string;
    if (props.from === 'class') {
      const users = useUserStore();
      cardPreviewBoxClass = 'cardPreviewBoxClass_drag';
      cardPreviewBoxDragData = useDrag(
        [
          `${cardPreviewBoxClass}>.n-card-header`,
          `${cardPreviewBoxClass} .bom_drag`
        ],
        cardPreviewBoxClass,
        show,
        users.info.id
      );
    }

    return () => (
      <NModal
        maskClosable={modalClickMask}
        style={
          props.from === 'class' ? cardPreviewBoxDragData.styleDrag.value : {}
        }
        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',
          cardPreviewBoxClass,
          props.from === 'class' && styles.classCard,
          styles.cardPreview,
          item.value.type === 'PPT' && styles.maxCard,
          props.size === 'large' && styles.cardLarge
        ]}
        title={item.value.type === 'MUSIC' ? '曲目预览' : item.value.title}
        blockScroll={false}>
        {item.value.type === 'VIDEO' && (
          <VideoModal
            title={
              item.value.title +
              (props.item.studentName ? '-' + props.item.studentName : '')
            }
            poster={item.value.url}
            src={item.value.content}
            isDownload={props.isDownload}
            fullscreen={props.fullscreen}
          />
        )}
        {item.value.type === 'MUSIC' && (
          <MusicModal
            class={styles.musicPreview}
            item={item.value}
            from={props.from}
          />
        )}
        {item.value.type === 'SONG' && (
          <SongModal
            item={item.value}
            isDownload={props.isDownload}
            fullscreen={props.fullscreen}
          />
        )}
        {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 === 'LISTEN' && (
          <ListenModal 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',
          'LISTEN'
        ].includes(item.value.type) && <TheEmpty />}
        {props.from === 'class' && <Dragbom></Dragbom>}
      </NModal>
    );
  }
});