<!--对比详情弹框 -->
    <a-modal
      v-model:visible="showCompDetailVisible"
      :footer="null"
      :width="1400"
      :title="`对比详情`"
      :maskClosable="false"
      destroyOnClose
      centered
    >
      <a-row :gutter="24">
        <a-col :span="12">
          {{ currentPresetItem.presetImagePath }}
          <img
            style="width: 640px; height: 360px"
            :src="currentPresetItem.presetImagePath"
            @click="previewImg(currentPresetItem.presetImagePath)"
          />
        </a-col>
        <a-col :span="12">
          {{ currentPresetItem.dayLightImagePath }}
          <canvas ref="canvasRight" width="640" height="360"></canvas>
        </a-col>
      </a-row>
    </a-modal>


const showCompDetailVisible = ref(false)
const currentPresetItem = ref('')

const canvasRight = ref(null)
const ctx = ref(null)
//打开详情页面
const openPresetCompDetailInfo = (item) => {
  showCompDetailVisible.value = true
  currentPresetItem.value = item
  let xoff = Number(currentPresetItem.value.xoff)
  let yoff = Number(currentPresetItem.value.yoff)
  if (xoff > 0) {
    xoff = Number(640) - Number(Number(xoff) / 3).toFixed(0)
  } else if (xoff < 0) {
    xoff = Number(Math.abs(xoff) / 3).toFixed(0)
  }
  if (yoff > 0) {
    yoff = Number(360) - Number(Number(yoff) / 3).toFixed(0)
  } else if (yoff < 0) {
    yoff = Number(Math.abs(yoff) / 3).toFixed(0)
  }

  // 替换为图片路径
  const image = new Image()
  image.src = currentPresetItem.value.dayLightImagePath
  //用onload加载图片，解决图片不显示的问题
  image.onload = function () {  //image
    ctx.value = canvasRight.value.getContext('2d')
    setTimeout(() => {
      ctx.value.drawImage(image, 0, 0, 640, 360)
      ctx.value.strokeStyle = 'red' // 线条颜色
      ctx.value.lineWidth = 2 // 线条宽度
      ctx.value.lineCap = 'round' // 线条端点样式
      //若x、y都为0，则不画线
      if (xoff != 0 || yoff != 0) {
        const x = xoff
        const y = yoff
        ctx.value.font = '30px Arial'
        ctx.value.fillStyle = '#FF0000' //设置字体颜色
        let contextX = xoff
        let contextY = yoff
        if (contextX > 500) {
          contextX = Number(contextX) - 150
        } else {
          contextX = Number(contextX) + 10
        }

        if (contextY < 150) {
          contextY = Number(contextY) + 30
        } else {
          contextY = Number(contextY) - 20
        }
		//图片上写文字
        ctx.value.fillText(
          'x:' +
            currentPresetItem.value.xoff +
            'y:' +
            currentPresetItem.value.yoff,
          contextX,
          contextY
        )
        ctx.value.beginPath()
        ctx.value.moveTo(x, y)
        ctx.value.lineTo(0, y)
        ctx.value.moveTo(x, y)
        ctx.value.lineTo(640, y)
        ctx.value.moveTo(x, y)
        ctx.value.lineTo(x, 0)
        ctx.value.moveTo(x, y)
        ctx.value.lineTo(x, 360)
        ctx.value.stroke()
      }
    }, 100)
  }
}