classroom-instruments/src/components/layout/index.tsx

import {
  Transition,
  defineComponent,
  onMounted,
  ref,
  reactive,
  onUnmounted,
  watch
} from 'vue';
import LayoutSilder from './layoutSilder';
import LayoutTop from './layoutTop';
import styles from './index.module.less';
import { NButton, NImage, NModal, NPopover, NSpace, useDialog } from 'naive-ui';
import Moveable from 'moveable';
import toolStartClass from './images/toolStartClass.png';
import toolbox from './images/toolbox.png';
import setTimeIcon from './images/setTimeIcon.png';
import beatIcon from './images/beatIcon.png';
import toneIcon from './images/toneIcon.png';
import iconWhiteBorad from './images/icon-whiteborad.png';
import iconPen from './images/icon-pen.png';
import iconNote from './images/icon-note.png';
import beatImage from './images/beatImage.png';
import toneImage from './images/toneImage.png';
import setTimeImage from './images/setTimeImage.png';
import dragingBoxIcon from './images/dragingBoxIcon.png';
import TimerMeter from '../timerMeter';
import { useRoute, useRouter } from 'vue-router';
import { vaildUrl } from '/src/utils/urlUtils';
import ChioseModal from '/src/views/home/modals/chioseModal';
import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
import PlaceholderTone from './modals/placeholderTone';
import { state } from '/src/state';
import PreviewWindow from '/src/views/preview-window';
import { fscreen } from '@/utils/index';
import AttendClass from '/src/views/prepare-lessons/model/attend-class';
import Pen from '/src/views/attend-class/component/tools/pen';
import study from '/src/views/home/components/study';
export default defineComponent({
  name: 'layoutView',
  setup() {
    const router = useRouter();
    const previewModal = ref(false);
    const previewItem = ref({});
    const directionType = ref('left');
    const showClass = ref(false);

    const showModalBeat = ref(false);
    const showModalTone = ref(false);
    const showModalTime = ref(false);
    const showBoxConent = ref(false);
    const dialog = useDialog();
    const boxBoundaryInfo = reactive({
      isBoundary: false,
      isBoundaryType: '' as any,
      mainWidth: '' as any,
      mainHeight: '' as any,
      subWidth: '' as any,
      subHeight: '' as any
    });

    const classBoundaryInfo = reactive({
      isBoundary: true,
      isBoundaryType: 'right' as any,
      mainWidth: '' as any,
      mainHeight: '' as any,
      subWidth: '' as any,
      subHeight: '' as any
    });
    const route = useRoute();
    const isDragIng = ref(false);
    const NPopoverRef = ref();
    const initMoveable = async () => {
      if (document.querySelector('.wrap')) {
        const moveable = new Moveable(document.querySelector('.wrap') as any, {
          target: document.querySelector('#moveNPopover') as any,
          // If the container is null, the position is fixed. (default: parentElement(document.body))
          container: document.querySelector('.wrap') as any,
          // snappable: true,
          // bounds: {"left":100,"top":100,"right":100,"bottom":100},
          draggable: true,
          resizable: false,
          scalable: false,
          rotatable: false,
          warpable: false,
          pinchable: false, // ["resizable", "scalable", "rotatable"]
          origin: false,
          keepRatio: false,
          // Resize, Scale Events at edges.
          edge: false,
          throttleDrag: 0,
          throttleResize: 0,
          throttleScale: 0,
          throttleRotate: 0
        });
        moveable
          // .on('dragStart', ({ target, clientX, clientY }) => {
          //   console.log('dragStart');
          // })
          .on(
            'drag',
            ({
              target,
              // transform,
              left,
              top,
              right,
              bottom
              // beforeDelta,
              // beforeDist,
              // delta,
              // dist,
              // clientX,
              // clientY
            }) => {
              isDragIng.value = true;
              if (NPopoverRef.value) {
                NPopoverRef.value.setShow(false);
              }

              const subdEl = document.getElementById(
                `moveNPopover`
              ) as HTMLDivElement;
              // console.log(subdEl, "subdEl", "drag");
              const subdElStyle = getComputedStyle(subdEl, null);
              const RectInfo = {
                left: Number(subdElStyle.left.replace('px', '')),
                top: Number(subdElStyle.top.replace('px', '')),
                width: Number(subdElStyle.width.replace('px', '')),
                height: Number(subdElStyle.height.replace('px', ''))
              };
              // target.style.transition = ''
              const mainWidth =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).width
                ) - RectInfo.width;

              const mainHeight =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).height
                ) - RectInfo.height;
              subdEl.style.transition = '';
              boxBoundaryInfo.isBoundary = false;
              boxBoundaryInfo.isBoundaryType = '';
              boxBoundaryInfo.mainHeight = mainHeight;
              boxBoundaryInfo.mainWidth = mainWidth;
              boxBoundaryInfo.subWidth = RectInfo.width;
              boxBoundaryInfo.subHeight = RectInfo.height;
              if (left < 0) {
                left = 2;
                boxBoundaryInfo.isBoundary = true;
                boxBoundaryInfo.isBoundaryType = 'left';
              }
              if (top < 0) {
                top = 2;
                boxBoundaryInfo.isBoundary = true;
                boxBoundaryInfo.isBoundaryType = 'top';
              }
              if (right < 0) {
                right = 2;
              }
              if (bottom < 0) {
                bottom = 2;
              }
              if (left > mainWidth - 2) {
                left = mainWidth - 2;
                // top = 2;
                boxBoundaryInfo.isBoundary = true;
                boxBoundaryInfo.isBoundaryType = 'right';
              }
              if (top > mainHeight - 2) {
                top = mainHeight - 2;
                boxBoundaryInfo.isBoundary = true;
                boxBoundaryInfo.isBoundaryType = 'bottom';
              }

              target!.style.left = `${left}px`;
              target!.style.top = `${top}px`;
            }
          )
          .on(
            'dragEnd',
            async ({
              target,
              // isDrag,
              clientX
              // clientY
            }) => {
              if (document.body.clientWidth / 2 - clientX > 0) {
                // 往左出
                directionType.value = 'right';
              } else {
                // 往又出
                directionType.value = 'left';
              }
              isDragIng.value = false;
              // 在这里进行动画
              if (boxBoundaryInfo.isBoundary) {
                // 这里说明贴边了
                target.style.transition = '.3s';
                actionEnd(target, boxBoundaryInfo.isBoundaryType);
              }
            }
          );
      }
    };
    const initMoveableClass = async () => {
      if (document.querySelector('.wrap')) {
        const moveable = new Moveable(document.querySelector('.wrap') as any, {
          target: document.querySelector('#moveNPopover2') as any,
          // If the container is null, the position is fixed. (default: parentElement(document.body))
          container: document.querySelector('.wrap') as any,
          // snappable: true,
          // bounds: {"left":100,"top":100,"right":100,"bottom":100},
          draggable: true,
          resizable: false,
          scalable: false,
          rotatable: false,
          warpable: false,
          pinchable: false, // ["resizable", "scalable", "rotatable"]
          origin: false,
          keepRatio: false,
          // Resize, Scale Events at edges.
          edge: false,
          throttleDrag: 0,
          throttleResize: 0,
          throttleScale: 0,
          throttleRotate: 0
        });
        moveable
          .on(
            'drag',
            ({
              target,
              // transform,
              left,
              top,
              right,
              bottom
            }) => {
              isDragIng.value = true;
              const subdEl = document.getElementById(
                `moveNPopover2`
              ) as HTMLDivElement;
              // console.log(subdEl, "subdEl", "drag");
              const subdElStyle = getComputedStyle(subdEl, null);
              const RectInfo = {
                left: Number(subdElStyle.left.replace('px', '')),
                top: Number(subdElStyle.top.replace('px', '')),
                width: Number(subdElStyle.width.replace('px', '')),
                height: Number(subdElStyle.height.replace('px', ''))
              };

              const mainWidth =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).width
                ) - RectInfo.width;

              const mainHeight =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).height
                ) - RectInfo.height;

              subdEl.style.transition = '';
              classBoundaryInfo.isBoundary = false;
              classBoundaryInfo.isBoundaryType = '';
              classBoundaryInfo.mainHeight = mainHeight;
              classBoundaryInfo.mainWidth = mainWidth;
              classBoundaryInfo.subWidth = RectInfo.width;
              classBoundaryInfo.subHeight = RectInfo.height;
              if (left < 0) {
                left = 2;
                classBoundaryInfo.isBoundary = true;
                classBoundaryInfo.isBoundaryType = 'left';
              }
              if (top < 0) {
                top = 2;
                classBoundaryInfo.isBoundary = true;
                classBoundaryInfo.isBoundaryType = 'top';
              }
              if (right < 0) {
                right = 2;
              }
              if (bottom < 0) {
                bottom = 2;
              }
              if (left > mainWidth - 2) {
                left = mainWidth - 2;
                // top = 2;
                classBoundaryInfo.isBoundary = true;
                classBoundaryInfo.isBoundaryType = 'right';
              }
              if (top > mainHeight - 2) {
                top = mainHeight - 2;
                classBoundaryInfo.isBoundary = true;
                classBoundaryInfo.isBoundaryType = 'bottom';
              }

              target!.style.left = `${left}px`;
              target!.style.top = `${top}px`;
            }
          )
          .on(
            'dragEnd',
            async ({
              target,
              //  isDrag,
              clientX
              // clientY
            }) => {
              if (document.body.clientWidth / 2 - clientX > 0) {
                // 往左出
                directionType.value = 'right';
              } else {
                // 往又出
                directionType.value = 'left';
              }
              if (classBoundaryInfo.isBoundary) {
                // 这里说明贴边了
                target.style.transition = '.3s';
                actionEnd(target, classBoundaryInfo.isBoundaryType);
              }
              isDragIng.value = false;
            }
          )
          .on('click', () => {
            showClass.value = true;
          });
      }
    };

    watch(
      () => route.path,
      (val: any) => {
        const elDoc = document.getElementById('WrapcoreViewWrap') as any;
        if (elDoc) {
          elDoc.scrollTo(0, 0);
          window.scrollTo(0, 0);
        }
      }
    );
    onMounted(() => {
      initMoveable();
      // // initMoveableClass();
      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
      // // const classEl = document.getElementById(
      // //   `moveNPopover2`
      // // ) as HTMLDivElement;

      // // initBoxRectInfo(classEl, classBoundaryInfo);
      initBoundaryWrap(subdEl, boxBoundaryInfo);
      initBoxRectInfo(subdEl, boxBoundaryInfo);
      // // initBoundaryWrap(classEl, classBoundaryInfo);
      window.addEventListener('resize', resetSize);
    });

    const resetSize = () => {
      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
      subdEl.style.display = 'none';
      // const boxBoundaryInfo = reactive({
      //   isBoundary: true,
      //   isBoundaryType: 'right' as any,
      //   mainWidth: '' as any,
      //   mainHeight: '' as any,
      //   subWidth: '' as any,
      //   subHeight: '' as any
      // });

      // boxBoundaryInfo.isBoundary = true;
      // boxBoundaryInfo.isBoundaryType= 'right'
      if (NPopoverRef.value) {
        NPopoverRef.value.setShow(false);
      }

      setTimeout(() => {
        subdEl.style.transition = '';
        initBoxRectInfo(subdEl, boxBoundaryInfo);
        initBoundaryWrap(subdEl, boxBoundaryInfo);
        console.log('resize');
        subdEl.style.display = 'block';
      }, 100);
    };
    onUnmounted(() => {
      window.removeEventListener('resize', resetSize);
    });
    const initBoundaryWrap = (target: any, wrapInfo: any) => {
      target.addEventListener('mouseover', () => {
        if (wrapInfo.isBoundary) {
          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
          if (wrapInfo.isBoundaryType == 'left') {
            target.style.left = '2px';
          } else if (wrapInfo.isBoundaryType == 'right') {
            target.style.left = `${wrapInfo.mainWidth - 2}px`;
          } else if (wrapInfo.isBoundaryType == 'top') {
            target.style.top = `${2}px`;
          } else if (wrapInfo.isBoundaryType == 'bottom') {
            target.style.top = `${wrapInfo.mainHeight - 2}px`;
          }
        }
        rate(target, 0);
      });
      target.addEventListener('mouseout', () => {
        if (wrapInfo.isBoundary) {
          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
          if (wrapInfo.isBoundaryType == 'left') {
            actionEnd(target, 'left');
          } else if (wrapInfo.isBoundaryType == 'right') {
            actionEnd(target, 'right');
          } else if (wrapInfo.isBoundaryType == 'top') {
            actionEnd(target, 'top');
          } else if (wrapInfo.isBoundaryType == 'bottom') {
            actionEnd(target, 'bottom');
          }
        }
        // rate(target, 0)
      });
      target.addEventListener('contextmenu', (event: any) => {
        event.preventDefault();
        dialog.warning({
          title: '提示',
          content: '是否收入托盘',
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            console.log('确定');
          },
          onNegativeClick: () => {
            console.log('取消');
          }
        });
      });

      // actionEnd(target, 'right');
    };
    const startShowModal = (
      val:
        | 'setTimeIcon'
        | 'beatIcon'
        | 'toneIcon'
        | 'iconWhiteBorad'
        | 'iconPen'
        | 'iconNote'
    ) => {
      if (val == 'setTimeIcon') {
        showModalTime.value = true;
      }
      if (val == 'beatIcon') {
        showModalBeat.value = true;
      }
      if (val == 'toneIcon') {
        showModalTone.value = true;
      }
      if (val == 'iconNote') {
        if (NPopoverRef.value) {
          NPopoverRef.value.setShow(false);
        }
        console.log(route.name, 'guideInfo');
        eventGlobal.emit('teacher-guideInfo', route.name);
      }
      if (val == 'iconWhiteBorad') {
        studyData.whiteboardShow = true;
        studyData.type = 'whiteboard';
        studyData.homeStatus = false;
        if (NPopoverRef.value) {
          NPopoverRef.value.setShow(false);
        }
      }
      if (val == 'iconPen') {
        studyData.penShow = true;
        studyData.type = 'pen';
        studyData.homeStatus = false;
        if (NPopoverRef.value) {
          NPopoverRef.value.setShow(false);
        }
      }
    };
    // const moveTargetBoundary = (target: any, type: any) => {
    //   console.log('moveTargetBoundary', target, type);
    // };
    // 这里是旋转
    const rate = (target: any, rate: any) => {
      target.style.transform = ' rotate(' + rate + ')';
    };

    //  这里是选装的方式
    const actionEnd = (target: any, type: any) => {
      switch (type) {
        case 'left':
          rate(target, '90deg');
          target!.style.left = `${2 - boxBoundaryInfo.subWidth / 2}px`;
          target!.style.top = `${top}px`;
          break;
        case 'right':
          rate(target, '-90deg');
          target!.style.left = `${
            boxBoundaryInfo.mainWidth - 2 + boxBoundaryInfo.subWidth / 2
          }px`;
          target!.style.top = `${top}px`;
          break;

        case 'top':
          target!.style.top = `${2 - boxBoundaryInfo.subHeight / 2}px`;
          rate(target, '-180deg');
          break;
        case 'bottom':
          target!.style.top = `${
            boxBoundaryInfo.mainHeight - 2 + boxBoundaryInfo.subHeight / 2
          }px`;
          break;
        default:
          rate(target, '-0');
          break;
      }
    };

    const initBoxRectInfo = (target: any, wrapInfo: any) => {
      // const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
      // console.log(subdEl, "subdEl", "drag");
      const subdElStyle = getComputedStyle(target, null);
      const RectInfo = {
        left: Number(subdElStyle.left.replace('px', '')),
        top: Number(subdElStyle.top.replace('px', '')),
        width: Number(subdElStyle.width.replace('px', '')),
        height: Number(subdElStyle.height.replace('px', ''))
      };
      // target.style.transition = ''
      const mainWidth =
        parseInt(
          window.getComputedStyle(document.querySelector('.wrap') as Element)
            .width
        ) - RectInfo.width;

      const mainHeight =
        parseInt(
          window.getComputedStyle(document.querySelector('.wrap') as Element)
            .height
        ) - RectInfo.height;
      // boxBoundaryInfo.isBoundary = false;
      // boxBoundaryInfo.isBoundaryType = '';
      wrapInfo.mainHeight = mainHeight;
      wrapInfo.mainWidth = mainWidth;
      wrapInfo.subWidth = RectInfo.width;
      wrapInfo.subHeight = RectInfo.height;
      target.style.transition = '.3s .3s';
    };

    /** 教学数据 */
    const studyData = reactive({
      homeStatus: true, // 是否显示首页
      type: '',
      penShow: false,
      whiteboardShow: false
    });
    return () => (
      <div class={[styles.wrap, 'wrap']}>
        <div>
          <LayoutSilder></LayoutSilder>
        </div>
        <div class={styles.Wrapcore}>
          <LayoutTop></LayoutTop>
          <div class={styles.WrapcoreView} id="WrapcoreViewWrap">
            {/* <div class={styles.WrapcoreViewInfo}> */}
            <router-view>
              {(obj: any) => (
                <Transition name="fade-slide" mode="out-in">
                  <obj.Component />
                </Transition>
              )}
            </router-view>
            {/* </div> */}
          </div>
        </div>
        {/* <img
          src={toolStartClass}
          id="moveNPopover2"
          style={{
            display: ['/', '/home', '/classList', '/prepare-lessons'].includes(
              route.path
            )
              ? 'none'
              : 'block'
          }}
          class={[
            styles.toolClassImg,
            'moveNPopover2',
            isDragIng.value ? styles.isDragIng : ''
          ]}
          alt=""
        /> */}
        <NPopover
          raw
          trigger="click"
          ref={NPopoverRef}
          show-arrow={false}
          placement={directionType.value as 'left' | 'right'}
          v-slots={{
            trigger: () => (
              // 首页不显示工具箱 ['/', '/home'].includes(route.path) ||
              <img
                // src={isDragIng.value ? dragingBoxIcon : toolbox}
                src={toolbox}
                id="moveNPopover"
                style={{
                  display: !studyData.homeStatus ? 'none' : 'block'
                }}
                class={[
                  styles.toolboxImg,
                  'moveNPopover',
                  isDragIng.value ? styles.isDragIng : ''
                ]}
                alt=""
              />
            )
          }}>
          <div class={styles.booxToolWrap}>
            <div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('beatIcon')}>
                <img src={beatIcon} alt="" />
                节拍器
              </div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('toneIcon')}>
                <img src={toneIcon} alt="" />
                调音器
              </div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('setTimeIcon')}>
                <img src={setTimeIcon} alt="" />
                计时器
              </div>
              <div
                class={styles.booxToolItem}
                onClick={() => {
                  showClass.value = true;
                }}
                style={{
                  display: [
                    '/',
                    '/home',
                    '/classList',
                    '/prepare-lessons'
                  ].includes(route.path)
                    ? 'none'
                    : 'block'
                }}>
                <img
                  src={toolStartClass}
                  style={{
                    display: [
                      '/',
                      '/home',
                      '/classList',
                      '/prepare-lessons'
                    ].includes(route.path)
                      ? 'none'
                      : 'block'
                  }}
                  class={[styles.toolClassImg]}
                  alt=""
                />
                开始上课
              </div>
            </div>
            <div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('iconNote')}>
                <img src={iconNote} alt="" />
                帮助指引
              </div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('iconPen')}>
                <img src={iconWhiteBorad} alt="" />
                批注
              </div>
              <div
                class={styles.booxToolItem}
                onClick={() => startShowModal('iconWhiteBorad')}>
                <img src={iconPen} alt="" />
                白板
              </div>
            </div>
          </div>
        </NPopover>

        {/* 批注 */}
        {studyData.penShow && (
          <Pen
            show={studyData.type === 'pen'}
            type={studyData.type as any}
            close={() => {
              studyData.type = 'init';
              studyData.homeStatus = true;
            }}
          />
        )}

        {studyData.whiteboardShow && (
          <Pen
            show={studyData.type === 'whiteboard'}
            type={studyData.type as any}
            close={() => {
              studyData.type = 'init';
              studyData.homeStatus = true;
            }}
          />
        )}

        <NModal
          class={['modalTitle background']}
          style={{ width: '687px' }}
          title={'节拍器'}
          preset="card"
          v-model:show={showModalBeat.value}>

          <div class={styles.modeWrap}>
            <iframe
              src={`${vaildUrl()}/metronome/?id=${new Date().getTime()}`}
              scrolling="no"
              frameborder="0"
              width="100%"
              height={'650px'}></iframe>
          </div>
        </NModal>
        <NModal v-model:show={showModalTone.value} class={['background']}>
          {/* <div
            onClick={() => {
              showModalTone.value = false;
            }}>
            <NImage
              src={toneImage}
              previewDisabled
              class={styles.beatImage}></NImage>
          </div> */}
          <div>
            <PlaceholderTone
              onClose={() => {
                showModalTone.value = false;
              }}></PlaceholderTone>
          </div>
        </NModal>
        <NModal
          v-model:show={showModalTime.value}
          class={['modalTitle background']}
          title={'计时器'}
          preset="card"
          style={{ width: px2vw(772) }}>
          <div>
            <TimerMeter></TimerMeter>
          </div>
        </NModal>

        <NModal
          v-model:show={showClass.value}
          class={['modalTitle background', styles.showClass]}
          preset="card"
          title={'开始上课'}>
          <AttendClass
            onClose={() => (showClass.value = false)}
            type="change"
            onConfirm={(item: any) => {
              showClass.value = false;
              router.push({
                path: '/prepare-lessons',
                query: {
                  ...item
                }
              });
            }}
          />
        </NModal>

        {/* 弹窗查看 */}
        <PreviewWindow
          v-model:show={previewModal.value}
          type="attend"
          params={previewItem.value}
        />
      </div>
    );
  }
});