<template>
  <div class="myPage">
    <!-- 主要显示 -->
    <div
      :class="props.videoType == 1 ? 'content1' : 'content2'"
      id="content"
      :style="bgStyle"
      ref="fatherBox"
    >
      <!-- 数字人的图片 -->
      <div
        class="virtual"
        :class="showBorderActive == materialList.virtual.id ? 'border' : ''"
        @mousedown="handleDrag(materialList.virtual.id, $event)"
        :style="virtualStyle"
      >
        <img id="virtualImg" :src="materialList.virtual.material" alt="" />
        <div class="stretchBox box1"></div>
        <div class="stretchBox box2"></div>
        <div class="stretchBox box3"></div>
        <div class="stretchBox box4"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
//#region 父组件传参
const props = defineProps({
  // isLoading: {
  //   required: true, //是否必传
  // },
  materialList: {
    required: true,
  },
  videoType: {
    required: true,
  },
  proportion: {
    required: true,
  },
});
//#endregion --------------------------

//#region 大盒子样式
const bgStyle = computed(() => {
  return {
    // width: '1080px',
    // height: '1920px',
    // transform: 'scale(0.2)',
    backgroundImage: `url(${props.materialList.BGI.material})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  };
});
//#endregion --------------------------

//#region 数字人逻辑
// 计算属性来计算盒子位置和大小
const virtualStyle = computed(() => {
  return {
    top: props.materialList.virtual.y + "px",
    left: props.materialList.virtual.x + "px",
    transform:
      "scale(" + props.materialList.virtual.w / props.proportion + ") ",
    transformOrigin: "top left",
  };
});
// 拖动盒子
const showBorderActive = ref(null); //判断显示边框
const fatherBox = ref(null);
const handleDrag = (id, event) => {
  showBorderActive.value = id;
  event.preventDefault();
  const imageElement = fatherBox.value;
  const startX = event.clientX; //保存初始值,避免闪烁
  const startY = event.clientY;
  const startLeft = props.materialList.virtual.x;
  const startTop = props.materialList.virtual.y;

  // 鼠标移动
  const onMouseMove = (event) => {
    const deltaX = event.clientX - startX;
    const deltaY = event.clientY - startY;
    props.materialList.virtual.x = startLeft + deltaX;
    props.materialList.virtual.y = startTop + deltaY;
  };

  // 鼠标抬起
  const onMouseUp = () => {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};
//#endregion --------------------------

//#region

//#endregion --------------------------
</script>
<style lang="scss" scoped>
.myPage {
  // height: 768px;
  // width: 432px;
}
.content1 {
  position: relative;
  height: 768px;
  width: 432px;
  overflow: hidden;
}
.content2 {
  position: relative;
  height: 432px;
  width: 768px;
  overflow: hidden;
}
.virtual {
  position: absolute;
  user-select: none;
  border: rgba(0, 0, 0, 0) 5px solid;
}
.border {
  border: 5px solid #00ff00;
  .stretchBox {
    opacity: 1;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #7264f5;
  }
  .box1 {
    top: -10px;
    left: -10px;
    cursor: nwse-resize;
  }

  .box2 {
    top: -10px;
    left: 100%;
    transform: translateX(-10px);
    cursor: nesw-resize;
  }
  .box3 {
    top: 100%;
    left: -10px;
    transform: translateY(-10px);
    cursor: nesw-resize;
  }
  .box4 {
    top: 100%;
    left: 100%;
    transform: translate(-10px, -10px);
    cursor: nwse-resize;
  }
}
</style>
