classroom-instruments/src/views/preview-window/index.tsx

import {
  PropType,
  defineComponent,
  onMounted,
  onUnmounted,
  ref,
  toRefs,
  watch
} from 'vue';
import styles from './index.module.less';
import { NModal } from 'naive-ui';
import AttendClass from '../attend-class';
import { iframeDislableKeyboard } from '/src/utils';
import { modalClickMask } from '/src/state';

export default defineComponent({
  name: 'preview-window',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    params: {
      type: Object as PropType<any>,
      default: () => ({})
    }
  },
  emit: ['update:show'],
  setup(props, { emit }) {
    const { show, type, params } = toRefs(props);
    watch(
      () => props.show,
      () => {
        show.value = props.show;
      }
    );

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

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

    const handleOpen = (e: MessageEvent) => {
      if (e.data.api === 'iframe_exit') {
        emit('update:show', false);
      }
    };

    onMounted(() => {
      window.addEventListener('message', handleOpen);
    });
    onUnmounted(() => {
      window.removeEventListener('message', handleOpen);
    });
    return () => (
      <>
        <NModal
          maskClosable={modalClickMask}
          v-model:show={show.value}
          onUpdate:show={() => {
            emit('update:show', show.value);
          }}
          class={styles.previewWindow}
          showIcon={false}
          displayDirective="show">
          <>
            {show.value ? (
              type.value == 'attend' ? (
                <AttendClass
                  type={params.value.type || ''}
                  instrumentId={params.value.instrumentId || ''}
                  courseId={params.value.courseId || ''}
                  detailId={params.value.detailId || ''}
                  classGroupId={params.value.classGroupId || ''}
                  lessonCourseId={params.value.lessonCourseId || ''}
                  classId={params.value.classId || ''}
                  preStudentNum={params.value.preStudentNum}
                  onClose={() => emit('update:show', false)}
                />
              ) : type.value == 'notation' ? (
                <iframe
                  src={params.value.src}
                  onLoad={(val: any) => {
                    iframeDislableKeyboard(val.target);
                  }}></iframe>
              ) : type.value == 'music' ? (
                <iframe
                  src={params.value.src}
                  onLoad={(val: any) => {
                    iframeDislableKeyboard(val.target);
                  }}
                  style={{ height: '100vh' }}></iframe>
              ) : (
                ''
              )
            ) : (
              ''
            )}
          </>
        </NModal>
      </>
    );
  }
});