<template>
  <div class="previewImage">
    <div id="imageDiv" class="imageDiv">
      <div
        ref="mouseCanvasRef"
        @mousedown="onMouseDown"
        :style="{
          position: 'relative',
          transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
          transition: 'transform 0.2s',
          width: `${getImageWidthAndHeight[0]}px`,
          height: `${getImageWidthAndHeight[1]}px`,
          background: `url(${props.nowPreviewRecord.url}) no-repeat`,
        }"
      >
        <!-- 创建的矩形 -->
        <div
          v-if="hideOrShowGraffitiFlag"
          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: '220px',
              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; color: green"
                @click="
                  nowGraffiti = -1;
                  rect.status = 'success';
                  addGraffiti();
                "
              />
              <CloseOutlined
                style="margin-right: 10px; color: red"
                @click="
                  rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
                  nowGraffiti = -1;
                  rect.status = 'success';
                "
              />
              <DeleteOutlined
                style="margin-right: 10px"
                @click="
                  deleteGraffiti(index, rect.text);
                  nowGraffiti = -1;
                "
              />
              <a-popover placement="top">
                <template #content>
                  <div style="display: flex; gap: 5px">
                    <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" />
                    </div>
                  </div>
                </template>
                <FontColorsOutlined style="" />
              </a-popover>
            </div>
            <div
              v-if="nowGraffiti != index"
              style="
                font-size: 20px;
                font-weight: bold;
                -webkit-text-stroke: 1px white;
                width: fit-content;
              "
              :style="{
                textDecoration: rect.status == 'mouse' ? 'underline' : '',
              }"
              @mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
              @mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
              @click="
                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: `${rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'top')"
            @mouseleave="mouseleave(rect)"
            @click="
              rect.status = 'edit';
              nowGraffiti = index;
            "
            @mousedown="funMouseDownEdit($event, index, 'top')"
          />
          <!-- 下 -->
          <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: `${rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'bottom')"
            @mouseleave="mouseleave(rect)"
            @click="
              rect.status = 'edit';
              nowGraffiti = index;
            "
            @mousedown="funMouseDownEdit($event, index, 'bottom')"
          />
          <!-- 右 -->
          <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: `${rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'right')"
            @mouseleave="mouseleave(rect)"
            @click="
              rect.status = 'edit';
              nowGraffiti = index;
            "
            @mousedown="funMouseDownEdit($event, index, 'right')"
          />
          <!-- 左 -->
          <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: `${rect.color}`,
              outline: rect.status != 'success' ? `2px solid #ffffff` : '',
            }"
            @mouseenter="mouseenter(rect, 'left')"
            @mouseleave="mouseleave(rect)"
            @click="
              rect.status = 'edit';
              nowGraffiti = index;
            "
            @mousedown="funMouseDownEdit($event, index, 'left')"
          />
          <!-- 左上 -->
          <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')"
          />
          <!-- 右下 -->
          <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')"
          />
          <!-- 右上 -->
          <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')"
          />
          <!-- 左下 -->
          <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')"
          />
        </div>
      </div>
      <!-- 全屏 -->
      <div class="expandButton" @click="clickExpandButton">
        <ExpandOutlined v-if="!fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
        <CompressOutlined v-if="fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
      </div>
    </div>

    <div class="bottom">
      <div class="buttonList">
        <!-- 放大 -->
        <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: #ffffff; margin-left: 5px; margin-right: 5px">|</span>
        <!-- 全屏 -->
        <!-- <div class="button"> <RedoOutlined @click="refresh" /> </div> -->
        <!-- 对比 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>对比</span>
            </template>
            <BorderHorizontalOutlined @click="c" />
          </a-tooltip>
        </div>
        <!-- 加载到地图上 -->
        <div class="button2" @click="funAddOrRemoveToMap">
          <a-tooltip placement="top">
            <template #title>
              <span>
                {{ props.nowPreviewRecord.addOrRemoveToMap ? '在地图上取消加载' : '在地图上加载' }}
              </span>
            </template>
            <svg
              v-if="props.nowPreviewRecord.addOrRemoveToMap"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 24 24"
              width="25"
              height="25"
            >
              <path
                d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
                fill="#ffffff"
              ></path>
            </svg>
            <svg
              v-if="!props.nowPreviewRecord.addOrRemoveToMap"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 24 24"
              width="25"
              height="25"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
                fill="#ffffff"
              ></path>
            </svg>
          </a-tooltip>
        </div>
        <!-- 复制到剪贴板 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>图片链接复制到剪贴板</span>
            </template>
            <ExportOutlined @click="copyToClipboard(props.nowPreviewRecord.url)" />
          </a-tooltip>
        </div>
        <!-- 下载 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>下载</span>
            </template>
            <DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
          </a-tooltip>
        </div>
        <!-- 删除 -->
        <div class="button">
          <a-tooltip placement="top">
            <template #title>
              <span>删除</span>
            </template>
            <DeleteOutlined @click="deleteImage" />
          </a-tooltip>
        </div>
      </div>
      <div class="imageList">
        <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
          <div
            :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
            v-if="li.type == 'img'"
          >
            <img :src="li.url" :width="60" :height="40" />
          </div>
        </div>
      </div>
    </div>

    <!-- 上一张、下一张图片 -->
    <div class="leftButton" @click="clickLeftOrRightButton('left')">
      <LeftOutlined style="color: #ffffff; font-size: 20px" />
    </div>
    <div class="rightButton" @click="clickLeftOrRightButton('right')">
      <RightOutlined style="color: #ffffff; font-size: 20px" />
    </div>

    <!-- 涂鸦颜色选择-提示 -->
    <div @click="setGraffiti" :class="graffitiFlag ? 'graffitiButton_choose' : 'graffitiButton'">
      <a-popover placement="left">
        <template #content>
          <div style="display: flex; gap: 5px">
            <div
              class="popoverClass"
              v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
              :key="color"
              :style="{ background: color }"
              @click="graffitiColor = color"
            >
              <CheckOutlined v-if="graffitiColor == color" style="color: white" />
            </div>
          </div>
        </template>
        <EditOutlined
          :style="{
            color: graffitiColor,
            fontSize: '20px',
          }"
        />
      </a-popover>
    </div>
    <!-- 隐藏or显示涂鸦和标签 -->
    <div class="showTextboxClass">
      <div class="button">
        <a-tooltip placement="left">
          <template #title>
            <span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
          </template>
          <EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
          <EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
          <div
            style="
              position: absolute;
              bottom: 0px;
              right: 0px;
              font-size: 10px;
              color: #000000;
              pointer-events: none;
            "
          >
            涂鸦
          </div>
        </a-tooltip>
      </div>
      <div class="button">
        <a-tooltip placement="left">
          <template #title>
            <span>
              {{
                hideOrShowTextboxFlag
                  ? '点击隐藏地图上的其他标注信息'
                  : '点击显示地图上的其他标注信息'
              }}
            </span>
          </template>
          <EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
          <EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
          <div
            style="
              position: absolute;
              bottom: 0px;
              right: 0px;
              font-size: 10px;
              color: #000000;
              pointer-events: none;
            "
          >
            标注
          </div>
        </a-tooltip>
      </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 { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
  import {
    CloseOutlined,
    RightOutlined,
    LeftOutlined,
    ZoomOutOutlined,
    ZoomInOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    ExportOutlined,
    DownloadOutlined,
    DeleteOutlined,
    CheckOutlined,
    EyeOutlined,
    EyeInvisibleOutlined,
    EditOutlined,
    FontColorsOutlined,
    RedoOutlined,
    FileImageOutlined,
    BorderHorizontalOutlined,
    ExpandOutlined,
    CompressOutlined,
  } from '@ant-design/icons-vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';

  const { createConfirm, createMessage } = useMessage();

  const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
  const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'setHideOrShowTextboxFlag']);

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

  // 上一张、下一张图片
  function clickLeftOrRightButton(direction) {
    const list = props.previewRecordList.filter((item) => item.type == 'img');
    graffitiFlag.value = false;
    for (let index = 0; index < list.length; index++) {
      if (list[index].id == props.nowPreviewRecord.id) {
        if (direction == 'left') {
          if (index == 0) {
            chooseNowPreviewRecord(list[list.length - 1]);
          } else {
            chooseNowPreviewRecord(list[index - 1]);
          }
        }
        if (direction == 'right') {
          if (index == list.length - 1) {
            chooseNowPreviewRecord(list[0]);
          } else {
            chooseNowPreviewRecord(list[index + 1]);
          }
        }
      }
    }
  }

  // 选择
  function chooseNowPreviewRecord(value) {
    emit('chooseNowPreviewRecord', value);
    // 初始化
    scale.value = 1;
    rotationAngle.value = 0;
  }

  // 刷新表格
  function reloadTable() {
    emit('reloadTable');
  }

  // 缩放比例-----------------------------------
  const scale = ref(1);
  // 放大函数
  function zoomIn() {
    if (scale.value < 3) {
      // 设置最大缩放倍数为3倍
      scale.value += 0.1;
    }
  }
  // 缩小函数
  function zoomOut() {
    if (scale.value > 0.5) {
      // 设置最小缩放倍数为0.5倍
      scale.value -= 0.1;
    }
  }

  // 旋转-----------------------------------
  const rotationAngle = ref(0);
  // 顺时针旋转函数
  function rotateClockwise() {
    rotationAngle.value += 90; // 每次旋转90度
  }
  // 逆时针旋转
  function rotateCounterClockwise() {
    rotationAngle.value -= 90; // 每次旋转-90度
  }

  // 刷新
  function refresh() {
    scale.value = 1;
    rotationAngle.value = 0;
    graffitiFlag.value = false;
  }

  // 删除
  function deleteImage() {}

  // 复制到剪贴板-----------------------------------
  const copyToClipboard = async (url) => {
    try {
      await navigator.clipboard.writeText(url);
      createMessage.success('图片链接已复制到剪贴板');
    } catch (err) {
      createMessage.error('无法复制图片链接');
    }
  };

  // 加载到地图上
  function funAddOrRemoveToMap() {
    props.nowPreviewRecord.addOrRemoveToMap = !props.nowPreviewRecord.addOrRemoveToMap;
    if (props.nowPreviewRecord.addOrRemoveToMap) {
      createMessage.success('在地图上加载成功');
    } else {
      createMessage.success('在地图上取消加载成功');
    }
  }

  // 下载
  async function fetchAndDownloadImage(url) {
    try {
      const response = await fetch(url, {
        mode: 'cors',
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const blob = await response.blob();
      const urlObject = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = urlObject;
      link.download = props.nowPreviewRecord.name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(urlObject);
    } catch (error) {
      console.error('Error downloading image:', error);
    }
  }

  // 隐藏涂鸦
  const hideOrShowGraffitiFlag = ref(true);
  function hideOrShowGraffiti(value) {
    hideOrShowGraffitiFlag.value = value;
  }

  // 隐藏标签
  const hideOrShowTextboxFlag = ref(true);
  function hideOrShowTextbox(value) {
    hideOrShowTextboxFlag.value = value;
    emit('setHideOrShowTextboxFlag', value);
  }

  // 设置画笔---------------------------------------------------------------
  const graffitiFlag = ref(false);
  const graffitiColor = ref('#E23C39');
  const nowGraffiti = ref(-1);
  const nowMouseGraffiti = ref(0);
  // 设置鼠标格式
  function setGraffiti() {
    graffitiFlag.value = !graffitiFlag.value;
    if (graffitiFlag.value) {
      document.body.style.cursor = 'crosshair';
    } else {
      document.body.style.cursor = 'pointer';
    }
  }

  // 临时选框状态
  const isDrawing = ref(false);
  let startX = 0;
  let startY = 0;
  let endX = 0;
  let endY = 0;

  // 所有已创建的矩形
  const graffitis: any = ref([]);
  const graffitisClone: any = ref([]);

  watch(
    () => props.nowPreviewRecord.id,
    () => {
      graffitis.value = props.nowPreviewRecord.graffitiJson
        ? JSON.parse(props.nowPreviewRecord.graffitiJson)
        : [];
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    () => graffitis.value,
    () => {},
    {
      deep: true,
    },
  );

  // 添加
  function addGraffiti() {
    props.nowPreviewRecord.graffitiJson = JSON.stringify(graffitis.value);
    graffitis.value.forEach((item) => {
      if (!props.nowPreviewRecord.label.includes(item.text)) {
        if (item.text) {
          props.nowPreviewRecord.label.push(item.text);
        }
      }
    });
  }
  // 删除
  function deleteGraffiti(index = undefined, value = undefined) {
    graffitis.value.splice(index, 1);
    // 刷新or删除标签
    props.nowPreviewRecord.graffitiJson = JSON.stringify(graffitis.value);
    if (!graffitis.value.some((item) => item.text == value)) {
      props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((la) => la != value);
    }
  }

  const mouseCanvasRef = ref();
  // 鼠标按下
  function onMouseDown(e) {
    if (!graffitiFlag.value) return;
    if (nowGraffiti.value != -1) return;
    if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
    // 获取相对于容器的坐标
    const rect = mouseCanvasRef.value.getBoundingClientRect();
    startX = e.x - rect.x;
    startY = e.y - rect.y;
    isDrawing.value = true;

    // 添加矩形到数组中
    graffitis.value.push({
      x: startX,
      y: startY,
      width: 0,
      height: 0,
      color: graffitiColor.value,
      text: '',
      status: 'edit',
    });
    graffitisClone.value = cloneDeep(graffitis.value);
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  }
  // 鼠标移动
  function onMouseMove(e) {
    const rect = mouseCanvasRef.value.getBoundingClientRect();
    if (!isDrawing.value) return;
    endX = e.x - rect.x;
    endY = e.y - rect.y;
    if (endX < 0 && endY < 0) {
      endX = startX;
      endY = startY;
    }
    setMouseData();
  }
  // 鼠标松开
  function onMouseUp(e) {
    if (!isDrawing.value) return;
    const rect = mouseCanvasRef.value.getBoundingClientRect();

    endX = e.x - rect.x;
    endY = e.y - rect.y;
    if (endX < 0 && endY < 0) {
      endX = startX;
      endY = startY;
    }
    isDrawing.value = false;
    if (e.x > rect.right || e.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', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  }

  // 设置鼠标涂鸦绘画出的数据
  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 mouseenter(rect, type) {
    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 (rect.status == 'mouse' || rect.status == 'edit') {
      if (rect.status == 'mouse') {
        rect.status = 'success';
      }
      if (graffitiFlag.value) {
        document.body.style.cursor = 'crosshair';
      } else {
        document.body.style.cursor = 'pointer';
      }
    }
  }
  // 编辑状态下的鼠标按下
  const mouseEditType = ref('');
  function funMouseDownEdit(e, index, type) {
    // 获取相对于容器的坐标
    graffitisClone.value = cloneDeep(graffitis.value);
    const rect = mouseCanvasRef.value.getBoundingClientRect();
    startX = e.x - rect.x;
    startY = e.y - rect.y;
    isDrawing.value = true;
    nowGraffiti.value = index;
    mouseEditType.value = type;
    window.addEventListener('mousemove', funMouseMoveEdit);
    window.addEventListener('mouseup', funMouseUpEdit);
  }
  // 编辑状态下的鼠标移动
  function funMouseMoveEdit(e) {
    const rect = mouseCanvasRef.value.getBoundingClientRect();
    if (!isDrawing.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 (!isDrawing.value) return;
    const rect = mouseCanvasRef.value.getBoundingClientRect();
    endX = e.x - rect.x;
    endY = e.y - rect.y;
    if (endX < 0 && endY < 0) {
      endX = startX;
      endY = startY;
    }
    isDrawing.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();
    }
  };

  // 全屏
  const fullscreenFlag = ref(false);
  function clickExpandButton() {
    const mapContainer = document.getElementById('imageDiv');
    if (mapContainer) {
      if (!document.fullscreenElement) {
        mapContainer.requestFullscreen();
        fullscreenFlag.value = true;
      } else {
        document.exitFullscreen();
        fullscreenFlag.value = false;
      }
    }
  }

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

  .imageDiv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 820px;
    background: #101010;
  }

  .bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    background: #1c1c1c;
    display: block;

    .buttonList {
      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;
      }

      .button2 {
        padding-top: 3px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 6px;
        margin-right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .imageList {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 60px;

      .bottom_div {
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
      }

      .bottom_div_choose {
        padding: 4px;
        border: 1px solid yellow;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }

  // 上一张、下一张
  .leftButton {
    position: absolute;
    left: 40px;
    top: 45%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 50px;
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rightButton {
    position: absolute;
    right: 40px;
    top: 45%;
    z-index: 200;
    background: #9c9c9c;
    border-radius: 50px;
    width: 50px;
    height: 50px;

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

  // 涂鸦颜色选择-提示
  .graffitiButton {
    background: #ffffff;
    position: absolute;
    right: 40px;
    top: 5%;
    z-index: 200;
    width: 30px;
    height: 30px;
    border-radius: 3px;

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

  .graffitiButton_choose {
    background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
    background-size:
      100% 100%,
      auto;
    position: absolute;
    right: 40px;
    top: 5%;
    z-index: 200;
    width: 30px;
    height: 30px;
    border-radius: 3px;

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

    outline: 2px solid #2b85e4;
  }

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

  // 标签颜色选择
  .showTextboxClass {
    position: absolute;
    right: 40px;
    top: 25%;
    width: 30px;
    height: 70px;

    display: block;
    align-items: center;
    justify-content: center;

    .button {
      border-radius: 3px;
      position: relative;
      color: #2d8cf0;
      background: #ffffff;
      font-size: 22px;
      width: 30px;
      height: 30px;

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

  // 全屏
  .expandButton {
    position: absolute;
    right: 30px;
    bottom: 15%;
    z-index: 500;
    background: #ffffff;
    border-radius: 5px;
    width: 40px;
    height: 40px;

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

  .escTip {
    position: absolute;
    left: 0%;
    bottom: 100px;
    width: 120px;
    height: 40px;
    background: #9c9c9c77;
    border-radius: 5px;

    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>
