<template>
  <div class="imageDiv_">
    <div class="imageDiv_Comparison" style="overflow: hidden">
      <div class="imageDiv_Comparison_title">视窗1</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?.show1?.url}) no-repeat center center`,
          backgroundSize: 'contain',
          backgroundPosition: 'center',
        }"
      />
    </div>
    <div class="imageDiv_Comparison" style="overflow: hidden">
      <div class="imageDiv_Comparison_title">视窗2</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?.show2?.url}) no-repeat center center`,
          backgroundSize: 'contain',
          backgroundPosition: 'center',
        }"
      />
    </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="button">
          {{ nowImageGroupIndex }}
          /
          {{ 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>
        <!-- 锁定 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>锁定</span>
            </template>
            <LockOutlined @click="lockOut" />
          </a-tooltip>
        </div>
        <!-- 解锁 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>解锁</span>
            </template>
            <UnlockOutlined @click="unlockOut" />
          </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>
            <EditOutlined @click="unlockOut" />
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {
    RightOutlined,
    LeftOutlined,
    ZoomOutOutlined,
    ZoomInOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    EditOutlined,
    FontColorsOutlined,
    RedoOutlined,
    LockOutlined,
    UnlockOutlined,
  } from '@ant-design/icons-vue';
  import { ref, watch, onMounted, computed } from 'vue';
  import { cloneDeep } from 'lodash-es';

  const props = defineProps(['recordList', 'nowRecord']);
  const emit = defineEmits(['']);

  // 当前图片组-----------------------------------
  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];
          } else {
            nowImageGroup.value = imageGroupList[index - 1];
          }
        }
        if (direction == 'right') {
          if (index == imageGroupList.length - 1) {
            nowImageGroup.value = imageGroupList[0];
          } else {
            nowImageGroup.value = imageGroupList[index + 1];
          }
        }
        getNowImageGroup();
      }
    }
  }
  // 当前图片组的索引
  function getNowImageGroup() {
    const nowRecordImageGroupList = props.nowRecord.imageGroup.map((item) => item.id);
    nowImageGroupIndex.value = nowRecordImageGroupList.indexOf(nowImageGroup.value.id) + 1;
  }

  // 初始化、变更后----------------------------------
  onMounted(() => {
    nowImageGroup.value = props.nowRecord.imageGroup[0];
    getNowImageGroup();
  });
  watch(
    () => props.nowRecord,
    () => {
      nowImageGroup.value = props.nowRecord.imageGroup[0];
    },
    {
      deep: true,
    },
  );

  // 宽高
  const getImageWidthAndHeight = computed(() => {
    let width = 1300;
    let height = 800;
    if (props.nowRecord.imageGroup.width > 1300 || props.nowRecord.height > 800) {
      if (props.nowRecord.width / 1300 > props.nowRecord.height / 800) {
        width = 1300;
        height = (props.nowRecord.height / props.nowRecord.width) * 1300;
      } else {
        height = 800;
        width = (props.nowRecord.width / props.nowRecord.height) * 800;
      }
    } else {
      width = props.nowRecord.width;
      height = props.nowRecord.height;
    }
    return [width, height];
  });

  // 缩放比例、旋转-----------------------------------
  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 mouseCanvasRef_1 = ref();
  const mouseCanvasRef_2 = ref();
  // 鼠标滚轮
  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;
    }
  }

  // 鼠标拖动
  const isDragging = ref(false);
  let initialMouseX;
  let initialMouseY;
  let initialDocumentX_1;
  let initialDocumentY_1;
  let initialDocumentX_2;
  let initialDocumentY_2;
  // 鼠标按下
  function onMouseDown(event, num) {
    const dragDocument1: any = document.querySelector('.dragModal_1');
    const dragDocument2: any = document.querySelector('.dragModal_2');
    isDragging.value = true;
    initialMouseX = event.clientX;
    initialMouseY = event.clientY;
    initialDocumentX_1 = dragDocument1.offsetLeft;
    initialDocumentY_1 = dragDocument1.offsetTop;
    initialDocumentX_2 = dragDocument2.offsetLeft;
    initialDocumentY_2 = dragDocument2.offsetTop;
    dragDocument1.style.cursor = 'grabbing';
    dragDocument2.style.cursor = 'grabbing';
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  }
  // 鼠标移动-拖动
  function onMouseMove(event) {
    const dragDocument1: any = document.querySelector('.dragModal_1');
    const dragDocument2: any = document.querySelector('.dragModal_2');
    if (isDragging.value) {
      const deltaX = event.clientX - initialMouseX;
      const deltaY = event.clientY - initialMouseY;
      dragDocument1.style.left = initialDocumentX_1 + deltaX + 'px';
      dragDocument1.style.top = initialDocumentY_1 + deltaY + 'px';
      dragDocument2.style.left = initialDocumentX_2 + deltaX + 'px';
      dragDocument2.style.top = initialDocumentY_2 + deltaY + 'px';
    }
  }
  // 鼠标松开-拖动
  function onMouseUp(event) {
    const dragDocument1: any = document.querySelector('.dragModal_1');
    const dragDocument2: any = document.querySelector('.dragModal_2');
    isDragging.value = false;
    if (dragDocument1) {
      dragDocument1.style.cursor = 'default';
    }
    if (dragDocument2) {
      dragDocument2.style.cursor = 'default';
    }
  }
</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;
      }
    }
  }
</style>
