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

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;
      }
    );

    return () => (
      <>
        <NModal
          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 || ''}
                  subjectId={params.value.subjectId || ''}
                  detailId={params.value.detailId || ''}
                  classGroupId={params.value.classGroupId || ''}
                  onClose={() => emit('update:show', false)}
                />
              ) : type.value == 'notation' ? (
                <iframe src={params.value.src}></iframe>
              ) : (
                ''
              )
            ) : (
              ''
            )}
          </>
        </NModal>
      </>
    );
  }
});