<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 ref="box1" class="stretchBox box1"></div>
        <div class="stretchBox box2"></div>
        <div class="stretchBox box3"></div>
        <div
          v-show="showBorderActive == materialList.virtual.id"
          ref="box4"
          @mousedown.stop="changeScale"
          class="stretchBox box4"
        >
          <img
            style="width: 100px; height: 100px"
            src="../assets/img/Scale.png"
            alt=""
          />
        </div>
      </div>
      <!-- 素材图的图片 -->
      <div
        v-for="(item, index) in materialList.scList"
        :key="item.id"
        class="scListItem"
        :class="showBorderActive == item.id ? 'border' : ''"
        @mousedown="handleDragSc(item.id, index, $event)"
        :style="{
          top: item.y + 'px',
          left: item.x + 'px',
          transform: 'scale(' + item.w / props.proportion + ') ',
          transformOrigin: 'top left',
          zIndex: item.z,
        }"
      >
        <img id="scListItemImg" :src="item.material" alt="" />
        <div ref="box1" class="stretchBox box1"></div>
        <div
          v-show="showBorderActive == item.id"
          class="stretchBox box2"
          @click="delScListItem(index)"
        >
          <img
            style="width: 100px; height: 100px"
            src="../assets/img/delete2.png"
            alt=""
          />
        </div>
        <div class="stretchBox box3"></div>
        <div
          v-show="showBorderActive == item.id"
          ref="box4"
          @mousedown.stop="changeScaleSc(index, $event)"
          class="stretchBox box4"
        >
          <img
            style="width: 100px; height: 100px"
            src="../assets/img/Scale.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
//#region 导入
import { useI18n } from "vue-i18n";
//#endregion --------------------------
const { locale } = useI18n();
const lanChange = ref(locale);

//#region 父组件传参
const props = defineProps({
  // isLoading: {
  //   required: true, //是否必传
  // },
  materialList: {
    required: true,
  },
  videoType: {
    required: true,
  },
  proportion: {
    required: true,
  },
  showImgInfo: {
    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",
    zIndex: props.materialList.virtual.z,
  };
});
// 拖动盒子
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);
};
// 缩放盒子
const touchStart = ref({
  pageX: null,
  pageY: null,
});
const touchOver = ref({
  pageX: null,
  pageY: null,
});
const scaleNum = ref(0.004);
// 初始版
// function changeScale(event) {
//   event.preventDefault();
//   const x = event.clientX;
//   const y = event.clientY;
//   // touchStart = {
//   //   pageX: x,
//   //   pageY: y,
//   // };
//   touchStart.pageX = x;
//   touchStart.pageY = y;
//   // 鼠标移动
//   const onMouseMove = (event) => {
//     const MoveX = event.clientX;
//     const MoveY = event.clientY;
//     const flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
//     if (flag) {
//       // 限制最大缩放系数
//       if (props.materialList.virtual.w > 1.3) return;
//       props.materialList.virtual.w += scaleNum.value;
//       // 更新坐标位置
//       // touchStart = {
//       //   pageX: MoveX,
//       //   pageY: MoveY,
//       // };
//       touchStart.pageX = MoveX;
//       touchStart.pageY = MoveY;
//     } else {
//       // 限制最小缩放系数
//       if (props.materialList.virtual.w < 0.4) return;
//       props.materialList.virtual.w -= scaleNum.value;
//       // 更新坐标位置
//       // touchStart = {
//       //   pageX: MoveX,
//       //   pageY: MoveY,
//       // };
//       touchStart.pageX = MoveX;
//       touchStart.pageY = MoveY;
//     }
//   };

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

//   document.addEventListener("mousemove", onMouseMove);
//   document.addEventListener("mouseup", onMouseUp);
// }
// 改动版

function changeScale(event) {
  event.preventDefault();
  const x = event.clientX;
  const y = event.clientY;
  touchStart.pageX = x;
  touchStart.pageY = y;
  // 鼠标移动
  const onMouseMove = (event) => {
    const MoveX = event.clientX;
    const MoveY = event.clientY;
    let flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
    if (flag) {
      // 限制最大缩放系数
      if (props.materialList.virtual.w > 1.3) return;
      props.materialList.virtual.w += scaleNum.value;
      // 更新坐标位置
      touchStart.pageX = MoveX;
      touchStart.pageY = MoveY;
    } else {
      // 限制最小缩放系数
      if (props.materialList.virtual.w < 0.4) return;
      props.materialList.virtual.w -= scaleNum.value;
      // 更新坐标位置
      touchStart.pageX = MoveX;
      touchStart.pageY = MoveY;
    }
  };

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

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
}
const box1 = ref(null);
const box2 = ref(null);
const box3 = ref(null);
const box4 = ref(null);
// 距离版
// function changeScale(event) {
//   const box1Element = box1.value;
//   const box4Element = box4.value;
//   if (!box1Element || !box4Element) {
//     return;
//   }
//   touchStart.pageX = event.clientX;
//   touchStart.pageY = event.clientY;
//   const box1Rect = box1Element.getBoundingClientRect();
//   const box4Rect = box4Element.getBoundingClientRect();
//   const boxDistance = Math.sqrt(
//     (box1Rect.left - box4Rect.left) ** 2 + (box1Rect.top - box4Rect.top) ** 2
//   ).toFixed(0);
//   const onMouseMove = (event) => {
//     const x = event.clientX;
//     const y = event.clientY;
//     const deltaX = touchStart.pageX - x;
//     const deltaY = touchStart.pageY - y;
//     const boxDistance2 = Math.sqrt(deltaX ** 2 + deltaY ** 2).toFixed(0);

//     if (deltaX < 0) {
//       props.materialList.virtual.w = Math.min(
//         Math.max((boxDistance + boxDistance2) / boxDistance, 0.4),
//         1.3
//       );
//     } else {
//       props.materialList.virtual.w = Math.min(
//         Math.max((boxDistance - boxDistance2) / boxDistance, 0.4),
//         1.3
//       );
//     }

//     // touchOver.pageX = event.clientX;
//     // touchOver.pageY = event.clientY;
//   };
//   // 鼠标抬起
//   const onMouseUp = () => {
//     // touchStart.pageX = touchOver.pageX;
//     // touchStart.pageY = touchOver.pageY;
//     document.removeEventListener("mousemove", onMouseMove);
//     document.removeEventListener("mouseup", onMouseUp);
//   };

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

//#endregion --------------------------

//#region 素材图逻辑
const handleDragSc = (id, index, event) => {
  showBorderActive.value = id;
  event.preventDefault();
  const imageElement = fatherBox.value;
  const startX = event.clientX; //保存初始值,避免闪烁
  const startY = event.clientY;
  const startLeft = props.materialList.scList[index].x;
  const startTop = props.materialList.scList[index].y;

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

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

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};
function changeScaleSc(index, event) {
  event.preventDefault();
  const x = event.clientX;
  const y = event.clientY;
  touchStart.pageX = x;
  touchStart.pageY = y;
  // 鼠标移动
  const onMouseMove = (event) => {
    let MoveX = event.clientX;
    let MoveY = event.clientY;
    let flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
    if (flag) {
      // 限制最大缩放系数
      if (props.materialList.scList[index].w > 1.3) return;
      props.materialList.scList[index].w += scaleNum.value;
      // 更新坐标位置
      touchStart.pageX = MoveX;
      touchStart.pageY = MoveY;
    } else {
      // 限制最小缩放系数
      if (props.materialList.scList[index].w < 0.4) return;
      props.materialList.scList[index].w -= scaleNum.value;
      // 更新坐标位置
      touchStart.pageX = MoveX;
      touchStart.pageY = MoveY;
    }
  };

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

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
}
function delScListItem(index) {
  const msg =
    lanChange.value == "zh-cn"
      ? "确定删除素材吗吗？"
      : "Are you sure you want to delete the footage?";
  const notice = lanChange.value == "zh-cn" ? "提示" : "Notice";
  const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm";
  const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel";
  ElMessageBox.confirm(msg, notice, {
    confirmButtonText: confirm,
    cancelButtonText: cancel,
  }).then(() => {
    props.materialList.scList.splice(index, 1);
  });
}
//#endregion --------------------------

//#region 控制台回显
watch(
  () => showBorderActive.value,
  (newValue, oldValue) => {
    props.showImgInfo.id = showBorderActive.value;
  },
  { deep: true }
);
//#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;
}
.scListItem {
  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;
    display: none;
  }

  .box2 {
    top: -50px;
    left: 100%;
    transform: translateX(-50px);
    // cursor: nesw-resize;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    width: 100px;
    height: 100px;
    img {
      width: 100px;
      height: 100px;
    }
  }
  .box3 {
    top: 100%;
    left: -10px;
    transform: translateY(-10px);
    cursor: nesw-resize;
    display: none;
  }
  .box4 {
    top: 100%;
    left: 100%;
    transform: translate(-50px, -50px);
    cursor: nwse-resize;
    // background-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      max-width: 65px;
      max-height: 65px;
    }
  }
}
</style>
