<template>
  <div class="imageDiv_">
    <div class="imageDiv_Comparison" style="overflow: hidden">
      <div class="imageDiv_Comparison_title">前时相</div>
      <div class="imageDiv_Comparison_1">1</div>
      <div
        ref="mouseCanvasRef_1"
        class="dragModal_1"
        @wheel="onWheel"
        @mousedown="onMouseDown($event, 1)"
        :style="{
          position: 'relative',
          transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
          transition: 'transform 0.2s',
          width: `100%`,
          height: `100%`,
          background: `url(${nowImageGroup?.url1}) no-repeat center center`,
          backgroundSize: 'contain',
          backgroundPosition: 'center',
        }"
      >
        <!-- 创建的矩形 -->
        <div
          v-for="(rect, index) in graffitis"
          :key="index"
          :style="{
            position: 'absolute',
            left: rect.x + 'px',
            top: rect.y + 'px',
            width: rect.width + 'px',
            height: rect.height + 'px',
            zIndex: rect.status == 'edit' ? 1000 : 201,
          }"
        >
          <!-- 文字标签 -->
          <div
            v-if="nowGraffiti == index || (rect.text && rect.type == 'hand')"
            :style="{
              position: 'absolute',
              left: '0px',
              top: rect.height + 'px',
              width: '235px',
              height: 30 + 'px',
              background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
            }"
          >
            <div style="display: block" v-if="nowGraffiti == index">
              <a-input
                v-model:value="rect.text"
                style="width: 110px; height: 30px; margin-right: 10px"
                @keypress.enter="
                  nowGraffiti = -1;
                  rect.status = 'success';
                  addGraffiti();
                "
              />
              <CheckOutlined
                style="margin-right: 10px; padding: 3px; color: green"
                @click="
                  nowGraffiti = -1;
                  rect.status = 'success';
                  addGraffiti();
                "
              />
              <CloseOutlined
                style="margin-right: 10px; padding: 3px; color: red"
                @click="
                  rect.text
                    ? ((rect.x = graffitisClone[index].x),
                      (rect.y = graffitisClone[index].y),
                      (rect.width = graffitisClone[index].width),
                      (rect.height = graffitisClone[index].height),
                      (rect.color = graffitisClone[index].color),
                      (rect.text = graffitisClone[index].text),
                      (rect.status = 'success'))
                    : graffitis.splice(index, 1);
                  nowGraffiti = -1;
                "
              />
              <DeleteOutlined
                style="margin-right: 10px; padding: 3px"
                @click="
                  deleteGraffiti(index, rect.text);
                  nowGraffiti = -1;
                "
              />
              <a-popover placement="top">
                <template #content>
                  <div style="display: flex; gap: 3px">
                    <div
                      class="popoverClass"
                      v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                      :key="color"
                      :style="{ background: color }"
                      @click="rect.color = color"
                    >
                      <CheckOutlined
                        v-if="rect.color == color"
                        style="color: white; padding: 3px"
                      />
                    </div>
                  </div>
                </template>
                <FontColorsOutlined style="" />
              </a-popover>
            </div>
            <div
              v-if="nowGraffiti != index"
              style="
                font-size: 20px;
                font-weight: bold;
                -webkit-text-stroke: 0.1px white;
                width: fit-content;
              "
              :style="{
                textDecoration: rect.status == 'mouse' ? 'underline' : '',
              }"
              @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
              @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
              @click="
                graffitiFlag
                  ? ((rect.status = 'edit'),
                    (graffitisClone = cloneDeep(graffitis)),
                    (nowGraffiti = index))
                  : ''
              "
            >
              {{ rect.text }}
            </div>
          </div>
          <div
            v-if="rect.text && rect.type == 'ai'"
            :style="{
              position: 'absolute',
              left: '0px',
              top: '-20px',
              width: '50px',
              height: 30 + 'px',
              background: '#ffffff00',
              color: rect.color,
            }"
          >
            {{ rect.text }}
          </div>
          <!-- 上 -->
          <div
            :style="{
              position: 'absolute',
              left: rect.status == 'edit' ? '6px' : '0px',
              top: '0px',
              width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
              height: '4px',
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'top')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'top', 1)"
          />
          <!-- 下 -->
          <div
            :style="{
              position: 'absolute',
              left: rect.status == 'edit' ? '6px' : '0px',
              bottom: `0px`,
              width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
              height: '4px',
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'bottom')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'bottom', 1)"
          />
          <!-- 右 -->
          <div
            :style="{
              position: 'absolute',
              right: '0px',
              top: rect.status == 'edit' ? '6px' : '0px',
              width: '4px',
              height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'right')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'right', 1)"
          />
          <!-- 左 -->
          <div
            :style="{
              position: 'absolute',
              left: '0px',
              top: rect.status == 'edit' ? '6px' : '0px',
              width: '4px',
              height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'left')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'left', 1)"
          />
          <!-- 左上 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              left: '-4px',
              top: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'leftTop')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'leftTop', 1)"
          />
          <!-- 右下 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              right: '-4px',
              bottom: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'rightBottom')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'rightBottom', 1)"
          />
          <!-- 右上 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              right: '-4px',
              top: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'rightTop')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'rightTop', 1)"
          />
          <!-- 左下 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              left: '-4px',
              bottom: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'leftBottom')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'leftBottom', 1)"
          />
        </div>
      </div>
    </div>
    <div class="imageDiv_Comparison" style="overflow: hidden">
      <div class="imageDiv_Comparison_title">后时相</div>
      <div class="imageDiv_Comparison_2">2</div>
      <div
        ref="mouseCanvasRef_2"
        class="dragModal_2"
        @wheel="onWheel"
        @mousedown="onMouseDown($event, 2)"
        :style="{
          position: 'relative',
          transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
          transition: 'transform 0.2s',
          width: `100%`,
          height: `100%`,
          background: `url(${nowImageGroup?.url2}) no-repeat center center`,
          backgroundSize: 'contain',
          backgroundPosition: 'center',
        }"
      >
        <!-- 创建的矩形 -->
        <div
          v-for="(rect, index) in graffitis"
          :key="index"
          :style="{
            position: 'absolute',
            left: rect.x + 'px',
            top: rect.y + 'px',
            width: rect.width + 'px',
            height: rect.height + 'px',
            zIndex: rect.status == 'edit' ? 1000 : 201,
          }"
        >
          <!-- 文字标签 -->
          <div
            v-if="nowGraffiti == index || rect.text"
            :style="{
              position: 'absolute',
              left: '0px',
              top: rect.height + 'px',
              width: '235px',
              height: 30 + 'px',
              background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
            }"
          >
            <div style="display: block" v-if="nowGraffiti == index">
              <a-input
                v-model:value="rect.text"
                style="width: 110px; height: 30px; margin-right: 10px"
                @keypress.enter="
                  nowGraffiti = -1;
                  rect.status = 'success';
                  addGraffiti();
                "
              />
              <CheckOutlined
                style="margin-right: 10px; padding: 3px; color: green"
                @click="
                  nowGraffiti = -1;
                  rect.status = 'success';
                  addGraffiti();
                "
              />
              <CloseOutlined
                style="margin-right: 10px; padding: 3px; color: red"
                @click="
                  rect.text
                    ? ((rect.x = graffitisClone[index].x),
                      (rect.y = graffitisClone[index].y),
                      (rect.width = graffitisClone[index].width),
                      (rect.height = graffitisClone[index].height),
                      (rect.color = graffitisClone[index].color),
                      (rect.text = graffitisClone[index].text),
                      (rect.status = 'success'))
                    : graffitis.splice(index, 1);
                  nowGraffiti = -1;
                "
              />
              <DeleteOutlined
                style="margin-right: 10px; padding: 3px"
                @click="
                  deleteGraffiti(index, rect.text);
                  nowGraffiti = -1;
                "
              />
              <a-popover placement="top">
                <template #content>
                  <div style="display: flex; gap: 3px">
                    <div
                      class="popoverClass"
                      v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                      :key="color"
                      :style="{ background: color }"
                      @click="rect.color = color"
                    >
                      <CheckOutlined
                        v-if="rect.color == color"
                        style="color: white; padding: 3px"
                      />
                    </div>
                  </div>
                </template>
                <FontColorsOutlined style="" />
              </a-popover>
            </div>
            <div
              v-if="nowGraffiti != index"
              style="
                font-size: 20px;
                font-weight: bold;
                -webkit-text-stroke: 0.1px white;
                width: fit-content;
              "
              :style="{
                textDecoration: rect.status == 'mouse' ? 'underline' : '',
              }"
              @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
              @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
              @click="
                graffitiFlag
                  ? ((rect.status = 'edit'),
                    (graffitisClone = cloneDeep(graffitis)),
                    (nowGraffiti = index))
                  : ''
              "
            >
              {{ rect.text }}
            </div>
          </div>
          <!-- 上 -->
          <div
            :style="{
              position: 'absolute',
              left: rect.status == 'edit' ? '6px' : '0px',
              top: '0px',
              width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
              height: '4px',
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'top')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'top', 2)"
          />
          <!-- 下 -->
          <div
            :style="{
              position: 'absolute',
              left: rect.status == 'edit' ? '6px' : '0px',
              bottom: `0px`,
              width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
              height: '4px',
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'bottom')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'bottom', 2)"
          />
          <!-- 右 -->
          <div
            :style="{
              position: 'absolute',
              right: '0px',
              top: rect.status == 'edit' ? '6px' : '0px',
              width: '4px',
              height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'right')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'right', 2)"
          />
          <!-- 左 -->
          <div
            :style="{
              position: 'absolute',
              left: '0px',
              top: rect.status == 'edit' ? '6px' : '0px',
              width: '4px',
              height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
              background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'left')"
            @mouseleave="mouseleave(rect)"
            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
            @mousedown="funMouseDownEdit($event, index, 'left', 2)"
          />
          <!-- 左上 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              left: '-4px',
              top: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'leftTop')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'leftTop', 2)"
          />
          <!-- 右下 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              right: '-4px',
              bottom: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'rightBottom')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'rightBottom', 2)"
          />
          <!-- 右上 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              right: '-4px',
              top: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'rightTop')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'rightTop', 2)"
          />
          <!-- 左下 -->
          <div
            v-if="rect.status == 'edit'"
            :style="{
              position: 'absolute',
              left: '-4px',
              bottom: '-4px',
              width: '12px',
              height: '12px',
              background: `#ffffff`,
            }"
            @mouseenter="mouseenter(rect, 'leftBottom')"
            @mouseleave="mouseleave(rect)"
            @mousedown="funMouseDownEdit($event, index, 'leftBottom', 2)"
          />
        </div>
      </div>
    </div>
    <div class="imageDiv_BottomButton">
      <div class="bottomButtonList">
        <!-- 上一个 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>上一个</span>
            </template>
            <LeftOutlined @click="clickLeftOrRightButton('left')" />
          </a-tooltip>
        </div>
        <div :class="inputFlag ? 'buttonInput' : 'button'">
          <span v-if="!inputFlag" style="width: 100px" @click="focusInput">
            {{ nowImageGroupIndex }}
          </span>
          <a-input
            ref="inputRef"
            v-if="inputFlag"
            v-model:value="nowImageGroupIndex"
            style="width: 46px"
            @blur="blurInput"
            @keypress.enter="blurInput"
          />
          /
          {{ props.nowRecord.imageGroup.length }}
        </div>
        <!-- 下一个 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>下一个</span>
            </template>
            <RightOutlined @click="clickLeftOrRightButton('right')" />
          </a-tooltip>
        </div>
        <span style="color: gray; margin-left: 5px; margin-right: 5px">|</span>
        <!-- 放大 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>放大</span>
            </template>
            <ZoomInOutlined @click="zoomIn" />
          </a-tooltip>
        </div>
        <!-- 缩小 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>缩小</span>
            </template>
            <ZoomOutOutlined @click="zoomOut" />
          </a-tooltip>
        </div>
        <!-- 顺时针旋转 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>顺时针旋转</span>
            </template>
            <RotateRightOutlined @click="rotateClockwise" />
          </a-tooltip>
        </div>
        <!-- 逆时针旋转 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>逆时针旋转</span>
            </template>
            <RotateLeftOutlined @click="rotateCounterClockwise" />
          </a-tooltip>
        </div>
        <!-- 复位刷新 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>复位刷新</span>
            </template>
            <RedoOutlined @click="refresh" />
          </a-tooltip>
        </div>
        <span style="color: gray; margin-left: 5px; margin-right: 5px" v-if="props.isEdit">|</span>
        <!-- 涂鸦标记 -->
        <div class="button" v-if="props.isEdit">
          <a-tooltip placement="top">
            <template #title>
              <span> {{ graffitiFlag ? '关闭手动涂鸦标记' : '开启手动涂鸦标记' }}</span>
            </template>
            <EditOutlined @click="setGraffiti" />
          </a-tooltip>
        </div>
      </div>
    </div>

    <!-- 退出涂鸦 -->
    <div class="escTip" v-if="graffitiFlag">
      <div class="whiteEsc">Esc</div>
      <div class="blackTip">退出涂鸦</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {
    RightOutlined,
    LeftOutlined,
    ZoomOutOutlined,
    ZoomInOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    EditOutlined,
    FontColorsOutlined,
    RedoOutlined,
    CloseOutlined,
    ExportOutlined,
    DownloadOutlined,
    DeleteOutlined,
    CheckOutlined,
    EyeOutlined,
    EyeInvisibleOutlined,
    OneToOneOutlined,
    BorderHorizontalOutlined,
    ExpandOutlined,
    CompressOutlined,
  } from '@ant-design/icons-vue';
  import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { getAppEnvConfig } from '@/utils/env';

  const props = defineProps(['recordList', 'nowRecord', 'groupIndex', 'isEdit', 'graffitiColor']);
  const emits = defineEmits(['chooseNowImageGroup']);

  watch(
    () => props.isEdit,
    () => {
      if (!props.isEdit) {
        refresh();
        graffitiFlag.value = false;
        document.body.style.cursor = 'pointer';
      }
    },
  );
  watch(
    () => props.groupIndex,
    () => {
      refresh();
      nowImageGroupIndex.value = props.groupIndex;
      nowImageGroup.value = props.nowRecord.imageGroup[props.groupIndex - 1];
    },
  );
  watch(
    () => props.graffitiColor,
    () => {},
  );

  function chooseNowImageGroup(index) {
    emits('chooseNowImageGroup', index);
  }

  // 当前图片组-----------------------------------
  const nowImageGroup: any = ref();
  const nowImageGroupIndex = ref(1);

  // 上一个、下一个图片对比组
  function clickLeftOrRightButton(direction) {
    const imageGroupList = props.nowRecord.imageGroup;
    const nowImageListId = cloneDeep(nowImageGroup.value.id);
    for (let index = 0; index < imageGroupList.length; index++) {
      if (imageGroupList[index].id == nowImageListId) {
        if (direction == 'left') {
          if (index == 0) {
            nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
            chooseNowImageGroup(imageGroupList.length);
          } else {
            nowImageGroup.value = imageGroupList[index - 1];
            chooseNowImageGroup(index);
          }
        }
        if (direction == 'right') {
          if (index == imageGroupList.length - 1) {
            nowImageGroup.value = imageGroupList[0];
            chooseNowImageGroup(1);
          } else {
            nowImageGroup.value = imageGroupList[index + 1];
            chooseNowImageGroup(index + 2);
          }
        }
      }
    }
    getNowImageGroup();
    refresh();
  }
  // 当前图片组的索引
  function getNowImageGroup() {
    const nowRecordImageGroupList = props.nowRecord.imageGroup.map((item) => item.id);
    nowImageGroupIndex.value = nowRecordImageGroupList.indexOf(nowImageGroup.value.id) + 1;
  }

  // 初始化、变更后----------------------------------
  onMounted(() => {
    if(props.nowRecord?.imageGroup.length > 0){
      nowImageGroup.value = props.nowRecord.imageGroup[0];
      getNowImageGroup();
    }
  });
  watch(
    () => props.nowRecord,
    () => {
      if(props.nowRecord?.imageGroup.length > 0){
        nowImageGroup.value = props.nowRecord.imageGroup[0];
      }
    },
    {
      deep: true,
    },
  );
  // -----------------------------------------------
  const inputFlag = ref(false);
  const inputRef = ref();
  // input鼠标聚焦
  function focusInput() {
    inputFlag.value = true;
    nextTick(() => {
      if (inputRef.value && inputRef.value.focus) {
        inputRef.value.focus();
      }
    });
  }
  // input鼠标聚焦后离开or点击Enter
  function blurInput() {
    inputFlag.value = false;
    // 检测是否是数字
    if (/^-?\d+(\.\d+)?$/.test(nowImageGroupIndex.value.toString())) {
      if (parseInt(nowImageGroupIndex.value) > props.nowRecord.imageGroup.length) {
        nowImageGroupIndex.value = props.nowRecord.imageGroup.length;
      } else if (parseInt(nowImageGroupIndex.value) < 1) {
        nowImageGroupIndex.value = 1;
      }
    } else {
      nowImageGroupIndex.value = 1;
    }
    nowImageGroup.value = props.nowRecord.imageGroup[nowImageGroupIndex.value - 1];
    chooseNowImageGroup(nowImageGroupIndex.value);
  }
  // 缩放比例、旋转-----------------------------------
  const scale = ref(1);
  const rotationAngle = ref(0);
  // 放大函数
  function zoomIn() {
    if (scale.value < 3) {
      // 设置最大缩放倍数为3倍
      scale.value += 0.1;
    }
  }
  // 缩小函数
  function zoomOut() {
    if (scale.value > 0.5) {
      // 设置最小缩放倍数为0.5倍
      scale.value -= 0.1;
    }
  }
  // 顺时针旋转函数
  function rotateClockwise() {
    rotationAngle.value += 90; // 每次旋转90度
  }
  // 逆时针旋转
  function rotateCounterClockwise() {
    rotationAngle.value -= 90; // 每次旋转-90度
  }
  // 复位+刷新
  function refresh() {
    scale.value = 1;
    rotationAngle.value = 0;
    // 复位
    const dragDocument1: any = document.querySelector('.dragModal_1');
    if (dragDocument1) {
      dragDocument1.style.left = 0 + 'px';
      dragDocument1.style.top = 0 + 'px';
    }
    const dragDocument2: any = document.querySelector('.dragModal_2');
    if (dragDocument2) {
      dragDocument2.style.left = 0 + 'px';
      dragDocument2.style.top = 0 + 'px';
    }
  }

  // 设置画笔---------------------------------------------------------------
  const graffitiFlag = ref(false);
  const nowGraffiti = ref(-1);
  const nowMouseGraffiti = ref(0);
  // 设置鼠标格式
  function setGraffiti() {
    refresh();
    graffitiFlag.value = !graffitiFlag.value;
    if (graffitiFlag.value) {
      document.body.style.cursor = 'crosshair';
    } else {
      document.body.style.cursor = 'pointer';
    }
  }
  // 临时选框状态
  const isDragging = ref(false);
  let startX = 0;
  let startY = 0;
  let endX = 0;
  let endY = 0;
  // 鼠标拖动-状态管理
  const dragState = {
    isDragging: false,
    initialMouseX: 0,
    initialMouseY: 0,
    initialElementX_1: 0,
    initialElementY_1: 0,
    initialElementX_2: 0,
    initialElementY_2: 0,
  };
  // 所有已创建的矩形
  const graffitis: any = ref([]);
  const graffitisClone: any = ref([]);
  let comparisoNnum = 0;
  const mouseCanvasRef_1 = ref();
  const mouseCanvasRef_2 = ref();

  // 鼠标按下
  function onMouseDown(event, num) {
    if (
      graffitiFlag.value &&
      (graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
    ) {
      // 涂鸦
      if (nowGraffiti.value != -1) return;
      if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
      comparisoNnum = num;
      // 获取相对于容器的坐标
      const rect =
        comparisoNnum == 1
          ? mouseCanvasRef_1.value.getBoundingClientRect()
          : mouseCanvasRef_2.value.getBoundingClientRect();
      startX = event.x - rect.x;
      startY = event.y - rect.y;
      isDragging.value = true;
      // 添加矩形到数组中
      graffitis.value.push({
        x: startX,
        y: startY,
        width: 0,
        height: 0,
        color: props.graffitiColor != '#ffffff' ? props.graffitiColor : '#E23C39',
        text: '',
        status: 'edit',
        type: 'hand',
      });
      graffitisClone.value = cloneDeep(graffitis.value);
      window.addEventListener('mousemove', onMouseMoveGraffit);
      window.addEventListener('mouseup', onMouseUpGraffit);
    }
    if (!graffitiFlag.value) {
      const dragElement1: any = document.querySelector('.dragModal_1');
      const dragElement2: any = document.querySelector('.dragModal_2');
      if (!dragElement1) return;
      if (!dragElement2) return;
      dragState.isDragging = true;
      dragState.initialMouseX = event.clientX;
      dragState.initialMouseY = event.clientY;
      dragState.initialElementX_1 = dragElement1.offsetLeft;
      dragState.initialElementY_1 = dragElement1.offsetTop;
      dragState.initialElementX_2 = dragElement2.offsetLeft;
      dragState.initialElementY_2 = dragElement2.offsetTop;
      dragElement1.style.cursor = 'grabbing';
      dragElement2.style.cursor = 'grabbing';
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }
  }
  // 鼠标移动-涂鸦
  function onMouseMoveGraffit(event) {
    // 涂鸦
    const rect =
      comparisoNnum == 1
        ? mouseCanvasRef_1.value.getBoundingClientRect()
        : mouseCanvasRef_2.value.getBoundingClientRect();
    if (!isDragging.value) return;
    endX = event.x - rect.x;
    endY = event.y - rect.y;
    if (endX < 0 && endY < 0) {
      endX = startX;
      endY = startY;
    }
    setMouseData();
  }
  // 鼠标松开-涂鸦
  function onMouseUpGraffit(event) {
    // 涂鸦
    if (!isDragging.value) return;
    const rect =
      comparisoNnum == 1
        ? mouseCanvasRef_1.value.getBoundingClientRect()
        : mouseCanvasRef_2.value.getBoundingClientRect();
    endX = event.x - rect.x;
    endY = event.y - rect.y;
    if (endX < 0 && endY < 0) {
      endX = startX;
      endY = startY;
    }
    isDragging.value = false;
    if (event.x > rect.right || event.y > rect.bottom) {
      graffitis.value.splice(graffitis.value.length - 1, 1);
      nowGraffiti.value = -1;
    } else {
      setMouseData();
      nowGraffiti.value = graffitis.value.length - 1;
    }
    window.removeEventListener('mousemove', onMouseMoveGraffit);
    window.removeEventListener('mouseup', onMouseUpGraffit);
  }
  // 鼠标移动-拖动
  const handleMouseMove = (event) => {
    const dragElement1: any = document.querySelector('.dragModal_1');
    const dragElement2: any = document.querySelector('.dragModal_2');
    if (!dragElement1) return;
    if (!dragElement2) return;
    if (!dragState.isDragging) return;
    const deltaX = event.clientX - dragState.initialMouseX;
    const deltaY = event.clientY - dragState.initialMouseY;
    dragElement1.style.left = `${dragState.initialElementX_1 + deltaX}px`;
    dragElement1.style.top = `${dragState.initialElementY_1 + deltaY}px`;
    dragElement2.style.left = `${dragState.initialElementX_2 + deltaX}px`;
    dragElement2.style.top = `${dragState.initialElementY_2 + deltaY}px`;
  };
  // 鼠标松开-拖动
  const handleMouseUp = () => {
    const dragElement1: any = document.querySelector('.dragModal_1');
    const dragElement2: any = document.querySelector('.dragModal_2');
    if (!dragElement1) return;
    if (!dragElement2) return;
    dragState.isDragging = false;
    dragElement1.style.cursor = 'default';
    dragElement2.style.cursor = 'default';
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  // 设置鼠标涂鸦绘画出的数据
  function setMouseData() {
    graffitis.value[graffitis.value.length - 1].x = Math.min(startX, endX);
    graffitis.value[graffitis.value.length - 1].width = Math.abs(endX - startX);
    graffitis.value[graffitis.value.length - 1].y = Math.min(startY, endY);
    graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY);
  }

  // 添加保存涂鸦
  function addGraffiti() {
    // UpdatePicStatus({
    //   id: props.nowPreviewRecord.id,
    //   fileTags: JSON.stringify(fileTags.value),
    //   graffitiJson: JSON.stringify(graffitis.value),
    //   display: props.nowPreviewRecord.display0,
    //   showOnMap: props.nowPreviewRecord.showOnMap,
    // }).then((res) => {
    //   emits('handleSuccessPreview');
    // });
  }
  // 删除鼠标涂鸦
  function deleteGraffiti(index = undefined, value = undefined) {
    graffitis.value.splice(index, 1);
  }

  // 鼠标滚轮
  function onWheel(event) {
    const delta = event.deltaY || event.detail || event.wheelDelta;
    // 根据滚轮方向调整缩放比例
    if (delta < 0) {
      // 向上滚动，放大
      scale.value += 0.1;
    } else if (scale.value > 0.5) {
      // 向下滚动，缩小
      scale.value -= 0.1;
    }
  }

  //------------------------------------------------------------------------
  // 鼠标聚焦
  function mouseenter(rect, type) {
    if (graffitiFlag.value) {
      // 鼠标聚焦状态
      if (rect.status != 'edit') {
        rect.status = 'mouse';
        document.body.style.cursor = 'pointer';
      }
      // 编辑状态
      if (rect.status == 'edit') {
        if (type == 'top' || type == 'bottom') {
          document.body.style.cursor = 'ns-resize';
        }
        if (type == 'left' || type == 'right') {
          document.body.style.cursor = 'ew-resize';
        }
        if (type == 'leftTop' || type == 'rightBottom') {
          document.body.style.cursor = 'nwse-resize';
        }
        if (type == 'leftBottom' || type == 'rightTop') {
          document.body.style.cursor = 'nesw-resize';
        }
      }
    }
  }
  // 鼠标离开
  function mouseleave(rect) {
    if (graffitiFlag.value) {
      if (rect.status == 'mouse' || rect.status == 'edit') {
        if (rect.status == 'mouse') {
          rect.status = 'success';
        }
        if (rect.status == 'edit') {
          document.body.style.cursor = 'crosshair';
        }
      }
    }
  }
  // 编辑状态下的鼠标按下
  const mouseEditType = ref('');
  function funMouseDownEdit(e, index, type, num) {
    if (graffitiFlag.value) {
      // 获取相对于容器的坐标
      graffitisClone.value = cloneDeep(graffitis.value);
      comparisoNnum = num;
      // 获取相对于容器的坐标
      const rect =
        comparisoNnum == 1
          ? mouseCanvasRef_1.value.getBoundingClientRect()
          : mouseCanvasRef_2.value.getBoundingClientRect();
      startX = e.x - rect.x;
      startY = e.y - rect.y;
      isDragging.value = true;
      nowGraffiti.value = index;
      mouseEditType.value = type;
      window.addEventListener('mousemove', funMouseMoveEdit);
      window.addEventListener('mouseup', funMouseUpEdit);
    }
  }
  // 编辑状态下的鼠标移动
  function funMouseMoveEdit(e) {
    if (graffitiFlag.value) {
      const rect =
        comparisoNnum == 1
          ? mouseCanvasRef_1.value.getBoundingClientRect()
          : mouseCanvasRef_2.value.getBoundingClientRect();
      if (!isDragging.value) return;
      endX = e.x - rect.x;
      endY = e.y - rect.y;
      if (endX < 0 && endY < 0) {
        endX = startX;
        endY = startY;
      }
      funSetMouseDataEdit();
    }
  }
  // 编辑状态下的鼠标松开
  function funMouseUpEdit(e) {
    if (graffitiFlag.value) {
      if (!isDragging.value) return;
      const rect =
        comparisoNnum == 1
          ? mouseCanvasRef_1.value.getBoundingClientRect()
          : mouseCanvasRef_2.value.getBoundingClientRect();
      endX = e.x - rect.x;
      endY = e.y - rect.y;
      if (endX < 0 && endY < 0) {
        endX = startX;
        endY = startY;
      }
      isDragging.value = false;
      if (e.x > rect.right || e.y > rect.bottom) {
        graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
      } else {
        funSetMouseDataEdit();
      }
      window.removeEventListener('mousemove', funMouseMoveEdit);
      window.removeEventListener('mouseup', funMouseUpEdit);
    }
  }
  // 编辑状态下的数据
  function funSetMouseDataEdit() {
    if (['top', 'leftTop', 'rightTop'].includes(mouseEditType.value)) {
      graffitis.value[nowGraffiti.value].height =
        graffitis.value[nowGraffiti.value].height + graffitis.value[nowGraffiti.value].y - endY;
      graffitis.value[nowGraffiti.value].y = endY;
    }
    if (['bottom', 'leftBottom', 'rightBottom'].includes(mouseEditType.value)) {
      graffitis.value[nowGraffiti.value].height = endY - graffitis.value[nowGraffiti.value].y;
    }
    if (['left', 'leftTop', 'leftBottom'].includes(mouseEditType.value)) {
      graffitis.value[nowGraffiti.value].width =
        graffitis.value[nowGraffiti.value].width + graffitis.value[nowGraffiti.value].x - endX;
      graffitis.value[nowGraffiti.value].x = endX;
    }
    if (['right', 'rightTop', 'rightBottom'].includes(mouseEditType.value)) {
      graffitis.value[nowGraffiti.value].width = endX - graffitis.value[nowGraffiti.value].x;
    }
  }

  // 添加键盘事件监听器
  const addEventListener = () => {
    window.addEventListener('keydown', handleKeydown);
  };
  // 移除键盘事件监听器
  const removeEventListener = () => {
    window.removeEventListener('keydown', handleKeydown);
  };
  // 处理按键按下事件
  const handleKeydown = (event: KeyboardEvent) => {
    if (event.code === 'Escape' && graffitiFlag.value) {
      setGraffiti();
    }
  };

  // 在组件挂载时添加监听器
  onMounted(() => {
    addEventListener();
  });
  // 在组件卸载时移除监听器
  onBeforeUnmount(() => {
    removeEventListener();
  });
</script>
<style lang="less" scoped>
  .imageDiv_ {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    // gap: 4px;
  }

  .imageDiv_Comparison {
    position: relative;
    width: calc(50% - 5px);
    height: 92%;
    outline: 1px solid #ffffff55;
    margin-left: 2px;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;

    .imageDiv_Comparison_title {
      position: absolute;
      top: 8px;
      left: 35px;
      color: #ffffff;
      font-size: 20px;
      z-index: 200;
      pointer-events: none;
    }

    .imageDiv_Comparison_1 {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0px;
      top: 30px;
      background: #2773c3;
      width: 30px;
      height: 25px;
      border-radius: 10px 0px 0px 10px;
      z-index: 200;
    }

    .imageDiv_Comparison_2 {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0px;
      top: 30px;
      background: #cb8824;
      width: 30px;
      height: 25px;
      border-radius: 0px 10px 10px 0px;
      z-index: 200;
    }
  }

  .imageDiv_BottomButton {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #101010;
    // background: red;
    height: calc(8% - 5px);
    width: 100%;

    .bottomButtonList {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40px;

      .button {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 6px;
        margin-right: 6px;
        color: #ffffff;
        font-size: 22px;
      }

      .buttonInput {
        position: relative;
        color: #ffffff;
        font-size: 22px;
      }
    }
  }

  .popoverClass {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
  }

  // 退出涂鸦
  .escTip {
    position: absolute;
    left: 0%;
    bottom: 120px;
    width: 120px;
    height: 40px;
    background: #9c9c9c77;
    border-radius: 5px;
    z-index: 1001;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    .whiteEsc {
      height: 30px;
      background: #ffffff;
      font-size: 16px;
      padding: 10px;
      border-radius: 5px;
      display: flex;
      margin-left: 10px;
      align-items: center;
    }

    .blackTip {
      display: flex;
      margin-left: 5px;
      align-items: center;
      color: #ffffff;
    }
  }
</style>
