<template>
  <div>
    <img src="../../assets/img/trueImg.png" ref="image" />
    <div
      class="box"
      ref="box"
      :style="{ top: boxPosition.top + 'px', left: boxPosition.left + 'px' }"
      @mousedown="handleDrag"
    >
      <!-- 这里可以放置盒子的内容 -->
    </div>
    <div class="resizable-box" v-if="isResizing" @mousedown="handleResize">
      字幕
    </div>
    <button @click="handleRotate">旋转</button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const image = ref(null);
const box = ref(null);
const boxPosition = reactive({ top: 0, left: 0 });
const isResizing = ref(false);
const rotationAngle = ref(0);

// 盒子位置拖动
const handleDrag = (event) => {
  event.preventDefault();
  const boxElement = box.value;
  const imageElement = image.value;

  const offsetX = event.clientX - imageElement.offsetLeft;
  const offsetY = event.clientY - imageElement.offsetTop;

  const onMouseMove = (event) => {
    const newX = event.clientX - offsetX;
    const newY = event.clientY - offsetY;

    boxPosition.left = newX;
    boxPosition.top = newY;
  };

  const onMouseUp = () => {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

// 边框拖动
const handleResize = () => {
  isResizing.value = true;

  const onMouseMove = (event) => {
    // 处理拉伸逻辑
  };

  const onMouseUp = () => {
    isResizing.value = false;
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

// 图片旋转
const handleRotate = () => {
  rotationAngle.value += 90;
};
</script>

<style>
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: move;
}

.resizable-box {
  border: 2px dashed #000;
  resize: both;
  overflow: auto;
}
</style>
