classroom-instruments/src/views/attend-class/component/tools/pen.tsx

import { defineComponent, toRefs, ref, PropType, reactive, toRef } from 'vue';
import styles from './pen.module.less';
import { ToolType } from '../../index';
import { NButton, NModal, NSpace } from 'naive-ui';
import { iframeDislableKeyboard } from '/src/utils';
import useDrag from '@/hooks/useDrag';
import Dragbom from '@/hooks/useDrag/dragbom';
import { useUserStore } from '@/store/modules/users';

export default defineComponent({
  name: 'pen-page',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String as PropType<ToolType>,
      default: 'pen'
    },
    close: {
      type: Function,
      default: () => ({})
    },
    callStudents: {
      type: Array,
      default: () => []
    },
    imagePos: {
      type: String,
      default: 'left'
    },
    isDrag: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const { show, type } = toRefs(props);
    // const modelAttendStatus = ref(false);
    const penIframeRefId = `penIframeRef${+new Date()}`;
    const modal = reactive({
      status: false,
      title: type.value === 'pen' ? '退出批注' : '退出白板',
      content:
        type.value === 'pen' ? '确认是否退出批注？' : '确认是否退出白板？'
    });
    const firstRender = ref(true);
    const origin = /(localhost|192)/.test(location.host)
      ? 'https://test.lexiaoya.cn/'
      : // 'http://localhost:5002/'
        location.origin;
    let src = `${origin}/classroom-whiteboard?t=${+new Date()}`;

    if (props.type === 'call') {
      src = `${origin}/roll-call/index.html?t=${+new Date()}&platform=modal&imagePos=${
        props.imagePos
      }`;
    }
    // 拖动
    let penBoxDragData: any;
    let penBoxClass: string;
    if (props.isDrag) {
      const users = useUserStore();
      penBoxClass = 'penBoxClass_drag';
      penBoxDragData = useDrag(
        [`${penBoxClass}>.n-card-header`, `${penBoxClass} .bom_drag`],
        penBoxClass,
        toRef(modal, 'status'),
        users.info.id
      );
    }
    return () => (
      <div
        class={[
          styles.pen,
          type.value === 'whiteboard' ? styles.whiteboard : '',
          firstRender.value ? styles.dely : '',
          show.value ? styles.open : styles.hide
        ]}>
        <iframe
          class={styles.iframe}
          id={penIframeRefId}
          frameborder="0"
          width="100vw"
          height="100vh"
          src={src}
          onLoad={(val: any) => {
            firstRender.value = false;
            if (props.type === 'call') {
              const iframeRef: any = document.getElementById(penIframeRefId);
              if (iframeRef && iframeRef.contentWindow.renderData) {
                iframeRef.contentWindow.renderData(props.callStudents);
              }
            }
            iframeDislableKeyboard(val.target);
          }}></iframe>
        {props.type !== 'call' && (
          <div class={styles.rightItem} onClick={() => (modal.status = true)}>
            <svg
              width="28px"
              height="28px"
              viewBox="0 0 34 34"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g
                  transform="translate(-1842.000000, -1016.000000)"
                  stroke="#FFFFFF">
                  <g transform="translate(980.000000, 1006.000000)">
                    <g transform="translate(862.000000, 10.000000)">
                      <g transform="translate(4.000000, 5.000000)">
                        <g
                          transform="translate(8.058241, 5.009812)"
                          fill="#FFFFFF"
                          fill-rule="nonzero"
                          stroke-width="0.3">
                          <path d="M11.6084252,-0.15 C11.9880433,-0.15 12.3676614,-0.00518057514 12.6573002,0.284458275 L12.6573002,0.284458275 L18.3141545,5.94131252 C18.6037933,6.23095137 18.7486128,6.61056948 18.7486128,6.99018758 C18.7486128,7.36980569 18.6037933,7.74942379 18.3141545,8.03906264 L18.3141545,8.03906264 L12.6573002,13.6959169 C12.3676614,13.9855557 11.9880433,14.1303752 11.6084252,14.1303752 C11.2288071,14.1303752 10.849189,13.9855557 10.5595501,13.6959169 C10.2699113,13.406278 10.1250918,13.0266599 10.1250918,12.6470418 C10.1250918,12.2674237 10.2699113,11.8878056 10.5595368,11.5981801 L10.5595368,11.5981801 L13.6839174,8.47301484 L1.33333333,8.47352092 C0.923722144,8.47352092 0.552888811,8.30749318 0.284458275,8.03906264 C0.0160277386,7.77063211 -0.15,7.39979877 -0.15,6.99018758 C-0.15,6.61194961 -0.00841906355,6.26678575 0.224608408,6.00476938 C0.462154637,5.73767211 0.794779811,5.55707713 1.16932931,5.51583101 L1.16932931,5.51583101 L13.6841044,5.50627626 L10.5595501,2.38220839 C10.2699113,2.09256954 10.1250918,1.71295144 10.1250918,1.33333333 C10.1250918,0.953715229 10.2699113,0.574097124 10.5595501,0.284458275 C10.849189,-0.00518057514 11.2288071,-0.15 11.6084252,-0.15 Z"></path>
                        </g>
                        <path
                          d="M15,24 L3,24 C1.34314575,24 -1.1293615e-15,22.6568542 0,21 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L15,0 L15,0"
                          stroke-width="3.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"></path>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
        )}

        {/* 布置作业 */}
        <NModal
          style={props.isDrag ? penBoxDragData.styleDrag.value : {}}
          z-index={3000}
          transformOrigin="center"
          v-model:show={modal.status}
          preset="card"
          // class={styles.attendClassModal}
          title={modal.title}
          class={['modalTitle', styles.removeVisiable, penBoxClass]}>
          <div class={styles.studentRemove}>
            <p>{modal.content}</p>
            {/* <div class={styles.modelAttendContent}>
              {data.modalAttendMessage}
            </div> */}
            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton
                type="default"
                round
                onClick={() => {
                  modal.status = false;
                }}>
                取消
              </NButton>
              <NButton
                type="primary"
                round
                onClick={() => {
                  // data.modelTrainStatus = true;
                  modal.status = false;
                  props.close();
                }}>
                确认
              </NButton>
            </NSpace>
            {props.isDrag && <Dragbom></Dragbom>}
          </div>
        </NModal>
      </div>
    );
  }
});