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

import { NModal } from 'naive-ui';
import { defineComponent, 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';

export default defineComponent({
  name: 'card-preview',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  emit: ['update:show'],
  setup(props, { emit }) {
    const show = toRef(props.show);
    const item = toRef(props.item);

    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);
          }}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.cardPreview]}
          title={item.value.title}
          blockScroll={false}>
          {item.value.type === 'VIDEO' && (
            <VideoModal poster={item.value.url} src={item.value.content} />
          )}
          {item.value.type === 'MUSIC' && <MusicModal item={item.value} />}
          {item.value.type === 'SONG' && <SongModal item={item.value} />}

          {!['VIDEO', 'MUSIC', 'SONG'].includes(item.value.type) && (
            <TheEmpty />
          )}
        </NModal>
      </>
    );
  }
});