marking-cet-web/src/hooks/useMarkHeader.ts

import { reactive, ref, computed, watch, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import bus from '@/utils/bus'
function getParentNodeIsScroll(el: any): any {
  if (el.className.includes('scroll-auto')) {
    return el
  } else {
    return getParentNodeIsScroll(el.parentNode)
  }
}
const useMarkHeader = () => {
  const { back, push } = useRouter()

  const imgOperation = reactive<{
    rotate: number
    scale: number
    center: boolean
    frontColor: string
    backgroundColor: string
  }>({
    rotate: 0,
    scale: 1,
    center: false,
    frontColor: 'transparent',
    backgroundColor: '#fff',
  })

  /** 返回 */

  const onBack = () => {
    back()
  }

  /** 放大/缩小 */
  const onScaleChange = (val: number) => {
    imgOperation.scale = val
  }

  /** 居中 */
  const onCenter = (center: boolean) => {
    imgOperation.center = center
  }

  /** 旋转 */
  const onRotate = (val: number) => {
    imgOperation.rotate = val
  }

  /** 设置前景色 */
  const setFrontColor = (val: string) => {
    imgOperation.frontColor = val
  }

  /** 设置背景色 */
  const setBackgroundColor = (val: string) => {
    imgOperation.backgroundColor = val
  }

  /** 查看样卷 */
  const onViewSample = () => {
    push({ name: 'MarkingViewSample' })
  }

  /** 查看评分标准 */
  const onViewStandard = () => {
    // push({ name: 'MarkStandard' })
    bus.emit('showStandard')
  }
  function markKeyBoardEvents(e: any) {
    if (e.key === 'F7') {
      e.preventDefault()
      bus.emit('scale-up')
    } else if (e.key === 'F8') {
      e.preventDefault()
      bus.emit('scale-down')
    } else if (e.key === 'F9') {
      e.preventDefault()
      bus.emit('init-scale')
    } else if (e.key === 'F10') {
      e.preventDefault()
      bus.emit('fast-send-msg')
    } else if (e.key === 'F12') {
      e.preventDefault()
      bus.emit('mark-method-toggle')
    } else if (e.code === 'Space' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      if (e.target.tagName === 'INPUT' || (e.target.className || '').includes('contenteditable-ele')) {
        return false
      } else {
        const imgWrap = document.querySelector('.img-wrap')
        if (!imgWrap) {
          return
        } else {
          const pWrap = getParentNodeIsScroll(imgWrap)
          let t = (pWrap as any).scrollTop
          t += e.key === 'ArrowUp' ? -100 : 100
          pWrap.scrollTo({
            left: 0,
            top: t,
            behavior: 'smooth',
          })
        }
      }
    } else if (e.keyCode == 36) {
      const imgWrap = document.querySelector('.img-wrap')
      if (!imgWrap) {
        return
      } else {
        const pWrap = getParentNodeIsScroll(imgWrap)
        pWrap.scrollTo({
          left: 0,
          top: 0,
          behavior: 'smooth',
        })
      }
    } else if (e.keyCode == 35) {
      const imgWrap = document.querySelector('.img-wrap')
      if (!imgWrap) {
        return
      } else {
        const pWrap = getParentNodeIsScroll(imgWrap)
        pWrap.scrollTo({
          left: 0,
          top: pWrap.scrollHeight,
          behavior: 'smooth',
        })
      }
    } else if (e.key == 'Backspace') {
      if (e.target.tagName === 'INPUT' || (e.target.className || '').includes('contenteditable-ele')) {
        return false
      } else {
        bus.emit('mark-prev')
      }
    }
  }
  function paperDblClick(e: any) {
    if (typeof e.target.className === 'string' && (e.target.className || '').includes('paper-img')) {
      bus.emit('scale-up')
    }
  }
  onMounted(() => {
    const route = useRoute()
    if (route.path === '/marking/mark') {
      document.addEventListener('keydown', markKeyBoardEvents)
      document.addEventListener('dblclick', paperDblClick)
    }
  })
  onBeforeUnmount(() => {
    const route = useRoute()
    if (route.path === '/marking/mark') {
      document.removeEventListener('keydown', markKeyBoardEvents)
      document.removeEventListener('dblclick', paperDblClick)
    }
  })
  return {
    ...toRefs(imgOperation),
    onBack,
    onScaleChange,
    onCenter,
    onRotate,
    setFrontColor,
    setBackgroundColor,
    onViewSample,
    onViewStandard,
  }
}

export default useMarkHeader