<template>
  <div 
    class="main_container"  
    ref="mainContainerRef" 
    v-loading="loading"
    element-loading-text="图片加载中……" 
    element-loading-spinner="el-icon-loading" 
    element-loading-background="#ffffff"  
    @mousedown="OnMouseDown" 
    @mousemove="OnMouseMove" 
    @mouseup="OnMouseUp"  
    @wheel="OnWheel"
  >
    <canvas 
      id="paperCanvas" 
      ref="paperCanvasRef" 
      class="paper_canvas" 
      @mouseleave="OnCanvasLeave"
    ></canvas>
    <div id="imgContainer" class="img_container">
      <img v-if="paperImgUrl" :src="paperImgUrl" />
    </div>
    <div class="no_paper_url" v-if="paperImgUrl == ''">
      暂无数据
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
import { throttle } from 'lodash'
import { mmToPx } from '@/utils/common.ts'

// 定义 Props
const props = defineProps({
  drawData: {
    type: Array,
    default: () => [],
  },
  paperInfo: {
    type: Object,
    default: () => null,
  },
  paperImgUrl: {
    type: String,
    default: '',
  },
  currentId: {
    type: String,
    default: '',
  },
  isDrag: {
    type: Boolean,
    default: true,
  },
  isAbnormal: {
    type: Boolean,
    default: false,
  },
})

// 定义 Emits
const emit = defineEmits(['GetRectPoint'])

// 响应式数据
const position = reactive({ 
  x: 0,
  y: 0 
})

const startX = ref(0)
const startY = ref(0)
const scale = ref(1)
const isDragging = ref(false)
const isDrawing = ref(false)
const drawType = ref(0)
const image = ref(null)

const paperImgInfo = reactive({
  width: 0,
  height: 0
})

const canvasInfo = reactive({
  width: 0,
  height: 0
})

const canvas = ref(null)
const ctx = ref(null)
const zoomRate = ref(0)
const dpr = ref(window.devicePixelRatio || 1)
const minScale = ref(0.7)
const maxScale = ref(4)

const rectPoint = reactive({
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0
})

const showObjectArea = ref(false)
const addObjectAreaOption = reactive({
  derection: 1,
  questionType: 1,
  startNumber: 16,
  endNumber: 20,
  interval: 1,
  answerNumber: 4,
  answerWidth: 0,
  answerHeight: 0,
})

const currenPoint = reactive({
  x: 0,
  y: 0,
  w: 0,
  h: 0,
})

const containerWidth = ref(0)
const containerHeight = ref(0)
const isInit = ref(true)
const isShowDraw = ref(true)
const loading = ref(false)

// Ref 引用
const mainContainerRef = ref(null)
const paperCanvasRef = ref(null)

// 监听 paperImgUrl 变化
watch(
  () => props.paperImgUrl,
  (newVal, oldVal) => {
    console.log('地址变化了', newVal, '旧值:', oldVal)
    if (newVal && newVal !== oldVal) {
      loading.value = true
      InitData()
    } else if (!newVal) {
      loading.value = false
    }
  },
  { deep: true }
)

// 监听 drawData 变化
watch(
  () => props.drawData,
  () => {
    DrawImage()
  },
  { deep: true }
)

// 监听 currentId 变化
watch(
  () => props.currentId,
  () => {
    DrawImage()
  }
)


// 初始化数据加载
const InitData = () => {
  if (!props.paperImgUrl) {
    console.warn('图片URL为空')
    loading.value = false
    return
  }

  if (!mainContainerRef.value) {
    console.warn('容器未就绪')
    return
  }

  // 使用 nextTick 确保 DOM 已更新
  nextTick(() => {
    const rect = mainContainerRef.value.getBoundingClientRect()
    console.log('容器尺寸:', rect.width, rect.height)
    
    // 如果容器尺寸为 0，延迟重试
    if (rect.width === 0 || rect.height === 0) {
      console.warn('容器尺寸为0，稍后重试...')
      setTimeout(() => {
        InitData()
      }, 100)
      return
    }

    containerHeight.value = Number(rect.height)
    containerWidth.value = Number(rect.width)

    console.log('开始加载图片:', props.paperImgUrl)
    
    image.value = new Image()
    
    image.value.onload = () => {
      console.log('图片加载成功', image.value.width, image.value.height)
      
      if (props.paperInfo?.width && props.paperInfo?.height) {
        paperImgInfo.width = props.paperInfo.width
        paperImgInfo.height = props.paperInfo.height
      } else {
        paperImgInfo.width = image.value.width
        paperImgInfo.height = image.value.height
      }
      
      loading.value = false
      
      nextTick(() => {
        UpdateZoomAndPaperInfo()
        UpdateCanvasSize()
        
        if (isInit.value) {
          CenterCanvas()
        }
        
        LoadImage()
      })
    }
    
    image.value.onerror = (error) => {
      console.error('图片加载失败:', error)
      loading.value = false
    }
    
    image.value.src = props.paperImgUrl
  })
}


// 生命周期
onMounted(() => {
  window.addEventListener('resize', HandleResize)
  window.addEventListener('mouseup', OnGlobalMouseUp)
  
  // 只在有 URL 时才初始化
  if (props.paperImgUrl) {
    // 延迟执行，确保对话框和容器已经完全渲染
    setTimeout(() => {
      InitData()
    }, 50)
  }
})

// ... existing code ...

// 切换试卷图片
const ChanagePaperImage = () => {
  UpdateZoomAndPaperInfo()
  UpdateCanvasSize()
  LoadImage()
}

// 适合屏幕
const FitScreen = () => {
  scale.value = 1
  isInit.value = true
  InitData()
}

// 加载图片
const LoadImage = () => {
  DrawImage()
}

// 图片宽高坐标变化
const ImageInfoChange = () => {
  const { width, height } = paperImgInfo
  const imgDom = document.getElementById('imgContainer')
  if (imgDom) {
    imgDom.style.width = width * zoomRate.value * scale.value + 'px'
    imgDom.style.height = height * zoomRate.value * scale.value + 'px'
    imgDom.style.left = position.x + 'px'
    imgDom.style.top = position.y + 'px'
  }
}

// 绘制图片
const DrawImage = () => {
  if (!paperCanvasRef.value) {
    console.warn('Canvas未就绪')
    return
  }
  
  const canvasEl = paperCanvasRef.value
  const context = canvasEl.getContext('2d')
  
  context.clearRect(0, 0, canvasInfo.width, canvasInfo.height)
  ImageInfoChange()
  
  console.log('加载边框数据', props.drawData)
  
  for (let i = 0; i < props.drawData.length; i++) {
    const item = props.drawData[i]
    let point = {
      x: item.x * zoomRate.value * scale.value,
      y: item.y * zoomRate.value * scale.value,
      width: item.w * zoomRate.value * scale.value,
      height: item.h * zoomRate.value * scale.value,
      blockName: item.blockName,
      page: item.page,
      blockArea: item.blockArea,
    }
    
    // 系统卡坐标转换
    if (item.usedCardType == 1) {
      console.log('系统卡答案边框', item)
      const imageInfo = paperImgInfo
      let offsetX, offsetY, templateWidth, templateHeight
      
      if (paperImgInfo.width > paperImgInfo.height) {
        offsetX = item.x - 30
        offsetY = item.y - 25
        templateWidth = 1588 - 30 * 2
        templateHeight = 1123 - 25 * 2
      } else {
        offsetX = item.x - 30
        offsetY = item.y - 25
        templateWidth = 794 - 30 * 2
        templateHeight = 1123 - 25 * 2
      }
      
      const x = parseFloat(((offsetX / templateWidth) * imageInfo.width).toFixed(2))
      const y = parseFloat(((offsetY / templateHeight) * imageInfo.height).toFixed(2))
      const w = parseFloat(((item.w / templateWidth) * imageInfo.width).toFixed(2))
      const h = parseFloat(((item.h / templateHeight) * imageInfo.height).toFixed(2))
      
      point = {
        x: x * zoomRate.value * scale.value,
        y: y * zoomRate.value * scale.value,
        width: w * zoomRate.value * scale.value,
        height: h * zoomRate.value * scale.value,
        blockName: item.blockName,
        page: item.page || 1,
        blockArea: item.blockArea,
      }
    }
    
    // 设置边框颜色
    if (props.currentId == item.id) {
      context.strokeStyle = 'blue'
      context.fillStyle = 'blue'
      context.lineWidth = 2
    } else {
      context.strokeStyle = 'red'
      context.fillStyle = 'red'
      context.lineWidth = 2
    }
    
    const topiclist = item.topiclist || []
    
    if (topiclist.length > 0) {
      const topicName = String(topiclist?.[0]?.topicName)
      
      if (topicName.includes('选做区')) {
        context.strokeRect(point.x, point.y, point.width, point.height)
      }
      if (topiclist[0].index < 0) {
        context.strokeRect(point.x, point.y, point.width, point.height)
      }
    } else {
      context.lineWidth = 2
      context.strokeRect(point.x, point.y, point.width, point.height)
    }
    
    // 客观题小题加载
    if (item.topiclist && isShowDraw.value) {
      let derection = 1
      
      if (item.areaOption) {
        const option = JSON.parse(item.areaOption)
        derection = option.derection
      }
      
      topiclist.forEach(topicItem => {
        context.font = '15px Arial'
        context.fillStyle = 'red'
        context.textAlign = 'left'
        
        if (!String(topicItem.topicName).includes('选做区')) {
          let namePoint = {
            x: topicItem.answerList[0].x,
            y: topicItem.answerList[0].y,
          }
          
          // 系统卡坐标转换
          if (item.usedCardType == 1) {
            const imageInfo = paperImgInfo
            let offsetX, offsetY, templateWidth, templateHeight
            
            if (paperImgInfo.width > paperImgInfo.height) {
              offsetX = topicItem.answerList[0].x - 30
              offsetY = topicItem.answerList[0].y - 25
              templateWidth = 1588 - 30 * 2
              templateHeight = 1123 - 25 * 2
            } else {
              offsetX = topicItem.answerList[0].x - 30
              offsetY = topicItem.answerList[0].y - 25
              templateWidth = 794 - 30 * 2
              templateHeight = 1123 - 25 * 2
            }
            
            namePoint.x = parseFloat(((offsetX / templateWidth) * imageInfo.width).toFixed(2))
            namePoint.y = parseFloat(((offsetY / templateHeight) * imageInfo.height).toFixed(2))
          }
          
          // 设置文字颜色
          if (props.isAbnormal) {
            context.fillStyle = topicItem.hasAbnormal ? 'red' : 'blue'
          } else {
            context.fillStyle = props.currentId == item.id ? 'blue' : 'red'
          }
          
          // 绘制文字
          if (derection == 1 || derection == 3) {
            context.fillText(
              topicItem.topicName,
              parseFloat(namePoint.x - 30) * zoomRate.value * scale.value,
              parseFloat(namePoint.y + 15) * zoomRate.value * scale.value
            )
          } else {
            context.fillText(
              topicItem.topicName,
              parseFloat(namePoint.x + 1) * zoomRate.value * scale.value,
              parseFloat(namePoint.y - 22) * zoomRate.value * scale.value
            )
          }
        }
        
        // 绘制答案框
        topicItem.answerList.forEach(answerItem => {
          let obj = {
            x: answerItem.x * zoomRate.value * scale.value,
            y: answerItem.y * zoomRate.value * scale.value,
            width: answerItem.w * zoomRate.value * scale.value,
            height: answerItem.h * zoomRate.value * scale.value,
          }
          
          // 系统卡坐标转换
          if (item.usedCardType == 1) {
            const imageInfo = paperImgInfo
            let offsetX, offsetY, templateWidth, templateHeight
            
            if (paperImgInfo.width > paperImgInfo.height) {
              offsetX = answerItem.x - 30
              offsetY = answerItem.y - 25
              templateWidth = 1588 - 30 * 2
              templateHeight = 1123 - 25 * 2
            } else {
              offsetX = answerItem.x - 30
              offsetY = answerItem.y - 25
              templateWidth = 794 - 30 * 2
              templateHeight = 1123 - 25 * 2
            }
            
            const x = parseFloat(((offsetX / templateWidth) * imageInfo.width).toFixed(2))
            const y = parseFloat(((offsetY / templateHeight) * imageInfo.height).toFixed(2))
            const w = parseFloat(((answerItem.w / templateWidth) * imageInfo.width).toFixed(2))
            const h = parseFloat(((answerItem.h / templateHeight) * imageInfo.height).toFixed(2))
            
            obj = {
              x: x * zoomRate.value * scale.value,
              y: y * zoomRate.value * scale.value,
              width: w * zoomRate.value * scale.value,
              height: h * zoomRate.value * scale.value,
            }
          }
          
          context.lineWidth = 1
          
          // 异常情况处理
          if (topicItem.hasAbnormal) {
            if (answerItem.isCheck) {
              context.fillStyle = 'rgba(255,0,0,0.3)'
              context.strokeStyle = 'red'
              context.fillRect(obj.x, obj.y, obj.width, obj.height)
              context.strokeRect(obj.x, obj.y, obj.width, obj.height)
            } else {
              context.fillStyle = 'red'
              context.strokeStyle = 'red'
              context.strokeRect(obj.x, obj.y, obj.width, obj.height)
            }
          } else {
            if (props.isAbnormal) {
              context.fillStyle = 'rgba(0,0,255,0.3)'
              context.strokeStyle = 'blue'
            } else {
              context.fillStyle = 'rgba(255,0,0,0.3)'
              context.strokeStyle = props.currentId == item.id ? 'blue' : 'red'
            }
            // console.log("打印画框的地方answerItem"+'当前的题目'+topicItem.topicName+"当前答案："+answerItem.title+'当前check:'+ answerItem.isCheck)
            if (answerItem?.isCheck) {
              context.fillStyle = 'rgba(255,0,0,0.4)'; // 红色背景
              context.strokeStyle = 'red';//红色边框
              
              context.fillRect(obj.x, obj.y, obj.width, obj.height)
              context.strokeRect(obj.x, obj.y, obj.width, obj.height)
            } else {
              context.fillStyle = 'rgba(0,0,255,0.3)'
              context.strokeStyle = 'blue'
              context.strokeRect(obj.x, obj.y, obj.width, obj.height)
            }
          }
        })
      })
    }
    
    // 主观题划分区加载
    if (item.scoreList) {
      item.scoreList.forEach(scoreItem => {
        context.font = '15px Arial'
        context.fillStyle = 'red'
        context.textAlign = 'left'
        
        let obj = {
          x: scoreItem.x * zoomRate.value * scale.value,
          y: scoreItem.y * zoomRate.value * scale.value,
          width: scoreItem.w * zoomRate.value * scale.value,
          height: scoreItem.h * zoomRate.value * scale.value,
        }
        
        // 系统卡坐标转换
        if (item.usedCardType == 1) {
          const imageInfo = paperImgInfo
          let offsetX, offsetY, templateWidth, templateHeight
          
          if (paperImgInfo.width > paperImgInfo.height) {
            offsetX = scoreItem.x - 30
            offsetY = scoreItem.y - 25
            templateWidth = 1588 - 30 * 2
            templateHeight = 1123 - 25 * 2
          } else {
            offsetX = scoreItem.x - 30
            offsetY = scoreItem.y - 25
            templateWidth = 794 - 30 * 2
            templateHeight = 1123 - 25 * 2
          }
          
          const x = parseFloat(((offsetX / templateWidth) * imageInfo.width).toFixed(2))
          const y = parseFloat(((offsetY / templateHeight) * imageInfo.height).toFixed(2))
          const w = parseFloat(((scoreItem.w / templateWidth) * imageInfo.width).toFixed(2))
          const h = parseFloat(((scoreItem.h / templateHeight) * imageInfo.height).toFixed(2))
          
          obj = {
            x: x * zoomRate.value * scale.value,
            y: y * zoomRate.value * scale.value,
            width: w * zoomRate.value * scale.value,
            height: h * zoomRate.value * scale.value,
          }
        }
        
        context.lineWidth = 1
        context.fillStyle = scoreItem.color + '50'
        context.strokeStyle = scoreItem.color
        
        if (scoreItem.isCheck) {
          context.fillRect(obj.x, obj.y, obj.width, obj.height)
        }
        
        context.strokeRect(obj.x, obj.y, obj.width, obj.height)
      })
    }
    
    // 绘制区域名称
    context.fillStyle = 'rgba(255,0,0,1)'
    context.font = '15px Arial'
    context.textAlign = 'left'
    
    if (point.blockArea != 2 && point.blockArea != 8) {
      context.fillText(point.blockName, point.x, point.y - 5)
    }
  }
  
  context.restore()
}

// 更新缩放率
const UpdateZoomAndPaperInfo = () => {
  if (!paperImgInfo.width || !paperImgInfo.height) {
    console.warn('图片尺寸无效')
    return
  }
  
  const widthZoomRate = containerWidth.value / paperImgInfo.width
  const heightZoomRate = containerHeight.value / paperImgInfo.height
  zoomRate.value = Math.min(widthZoomRate, heightZoomRate)
  
  console.log('缩放率:', zoomRate.value, '容器:', containerWidth.value, containerHeight.value, '图片:', paperImgInfo.width, paperImgInfo.height)
}

// 更新画布尺寸
const UpdateCanvasSize = () => {
  canvasInfo.width = Math.round(paperImgInfo.width * zoomRate.value * scale.value)
  canvasInfo.height = Math.round(paperImgInfo.height * zoomRate.value * scale.value)
  
  if (paperCanvasRef.value) {
    paperCanvasRef.value.width = canvasInfo.width
    paperCanvasRef.value.height = canvasInfo.height
  }
}

// 中心化画布
const CenterCanvas = () => {
  position.x = (containerWidth.value - canvasInfo.width) / 2
  position.y = (containerHeight.value - canvasInfo.height) / 2
  
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.left = `${position.x}px`
    paperCanvasRef.value.style.top = `${position.y}px`
  }
  
  isInit.value = false
  console.log('画布已居中', position.x, position.y)
}

// 全局鼠标释放事件处理
const OnGlobalMouseUp = () => {
  isDragging.value = false
}

// 鼠标按下事件
const OnMouseDown = (event) => {
  if (event.button !== 0) {
    isDragging.value = false
    return
  }
  
  isDragging.value = false
  
  if (drawType.value == 0) {
    if (props.isDrag) {
      isDragging.value = true
      startX.value = event.clientX - position.x
      startY.value = event.clientY - position.y
    }
  }
  
  if (drawType.value == 1) {
    if (event.target.id != 'paperCanvas') {
      isDragging.value = true
      startX.value = event.clientX - position.x
      startY.value = event.clientY - position.y
    }
  }
}

// 鼠标移动事件
const OnMouseMove = (event) => {
  if (isDragging.value) {
    position.x = event.clientX - startX.value
    position.y = event.clientY - startY.value
    
    if (paperCanvasRef.value) {
      paperCanvasRef.value.style.left = `${position.x}px`
      paperCanvasRef.value.style.top = `${position.y}px`
    }
    
    ImageInfoChange()
  }
}

// 鼠标抬起事件
const OnMouseUp = (event) => {
  if (event && event.button !== 0) {
    return
  }
  isDragging.value = false
}

// 鼠标滚轮事件
const OnWheel = (event) => {
  event.preventDefault()
  
  const delta = event.deltaY < 0 ? 1 : -1
  const newScale = scale.value + delta * 0.1
  const clampedScale = Math.max(minScale.value, Math.min(maxScale.value, newScale))
  
  if (clampedScale === scale.value) return
  
  const containerRect = mainContainerRef.value.getBoundingClientRect()
  const mouseX = event.clientX - containerRect.left
  const mouseY = event.clientY - containerRect.top
  
  const mouseRelativeToCanvasX = (mouseX - position.x) / scale.value
  const mouseRelativeToCanvasY = (mouseY - position.y) / scale.value
  
  scale.value = clampedScale
  UpdateCanvasSize()
  
  position.x = mouseX - mouseRelativeToCanvasX * scale.value
  position.y = mouseY - mouseRelativeToCanvasY * scale.value
  
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.left = `${position.x}px`
    paperCanvasRef.value.style.top = `${position.y}px`
  }
  
  ImageInfoChange()
  DrawImage()
}

// 显示画框
const ShowDrawData = () => {
  isShowDraw.value = !isShowDraw.value
  DrawImage()
}

// 鼠标复位
const MouseReset = () => {
  drawType.value = 0
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.cursor = 'pointer'
    paperCanvasRef.value.onmousedown = null
    paperCanvasRef.value.onmousemove = null
    paperCanvasRef.value.onmouseup = null
  }
}

// 框选答案区域
const SelectionBox = () => {
  drawType.value = 1
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.cursor = 'crosshair'
    paperCanvasRef.value.onmousedown = OnCanvasDown
    paperCanvasRef.value.onmousemove = OnCanvasMove
    paperCanvasRef.value.onmouseup = OnCanvasUp
  }
}

// 画圈模式
const PaintingCircle = () => {
  drawType.value = 1
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.cursor = 'crosshair'
    paperCanvasRef.value.onmousedown = OnCanvasDown
    paperCanvasRef.value.onmousemove = OnCanvasMove
    paperCanvasRef.value.onmouseup = OnCanvasUp
  }
}

// 开始画答案区域圈
const StartPaintingCircle = (obj) => {
  Object.assign(addObjectAreaOption, obj)
  drawType.value = 1
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.cursor = 'crosshair'
    paperCanvasRef.value.onmousedown = OnCanvasDown
    paperCanvasRef.value.onmousemove = OnCanvasMove
    paperCanvasRef.value.onmouseup = OnCanvasUp
  }
}

// canvas上按下事件
const OnCanvasDown = (e) => {
  if (paperCanvasRef.value) {
    paperCanvasRef.value.style.cursor = 'crosshair'
  }
  isDrawing.value = true
  isDragging.value = false
  
  rectPoint.startX = e.offsetX
  rectPoint.startY = e.offsetY
  rectPoint.endX = e.offsetX
  rectPoint.endY = e.offsetY
}

// canvas上移动事件
const OnCanvasMove = (e) => {
  if (isDrawing.value && paperCanvasRef.value) {
    const context = paperCanvasRef.value.getContext('2d')
    
    rectPoint.endX = e.offsetX
    rectPoint.endY = e.offsetY
    
    context.clearRect(0, 0, paperCanvasRef.value.width, paperCanvasRef.value.height)
    DrawImage()
    
    context.strokeStyle = 'blue'
    context.lineWidth = 1
    
    const startX = rectPoint.startX
    const startY = rectPoint.startY
    const width = e.offsetX - startX
    const height = e.offsetY - startY
    
    context.strokeRect(startX, startY, width, height)
  }
}

// canvas抬起事件
const OnCanvasUp = () => {
  isDrawing.value = false
  
  let actualStartX = Math.min(rectPoint.startX, rectPoint.endX)
  let actualStartY = Math.min(rectPoint.startY, rectPoint.endY)
  let actualEndX = Math.max(rectPoint.startX, rectPoint.endX)
  let actualEndY = Math.max(rectPoint.startY, rectPoint.endY)
  
  let width = Math.abs(actualEndX - actualStartX)
  let height = Math.abs(actualEndY - actualStartY)
  
  let point = {
    x: FloatNum(actualStartX / zoomRate.value / scale.value),
    y: FloatNum(actualStartY / zoomRate.value / scale.value),
    w: FloatNum(width / zoomRate.value / scale.value),
    h: FloatNum(height / zoomRate.value / scale.value),
    unit: 'px',
  }
  
  Object.assign(currenPoint, point)
  
  if (point.w > 0 && point.h > 0) {
    emit('GetRectPoint', point)
  }
}

// 浮点数处理
const FloatNum = (num) => {
  return parseFloat(num.toFixed(2))
}

// 鼠标离开画布事件
const OnCanvasLeave = () => {
  if (isDrawing.value) {
    OnCanvasUp()
  }
}

// 监听窗口大小变化
const HandleResize = throttle(() => {
  // 窗口变化重新计算逻辑
}, 500)

// 生命周期
onMounted(() => {
  window.addEventListener('resize', HandleResize)
  window.addEventListener('mouseup', OnGlobalMouseUp)
  
  // 只在有 URL 时才初始化
  if (props.paperImgUrl) {
    InitData()
  }
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', HandleResize)
  window.removeEventListener('mouseup', OnGlobalMouseUp)
})

// 暴露方法给父组件
defineExpose({
  ShowDrawData,
  FitScreen,
  ChanagePaperImage,
  MouseReset,
  SelectionBox,
  PaintingCircle,
  StartPaintingCircle,
})
</script>

<style lang="scss" scoped>
.paper_canvas {
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  z-index: 10;
}

.img_container {
  position: absolute;
  cursor: pointer;
  z-index: 9;
  
  img {
    width: 100%;
    height: 100%;
  }
}

.main_container {
  position: relative;
  overflow: hidden;
}
</style>