<template>
  <div class="myPage">
    <!-- 获取点图片原始大小 -->
    <img
      draggable="false"
      v-if="realImgUrl"
      ref="realImg"
      :src="realImgUrl"
      alt=""
      class="realImg"
    />
    <!-- 主要显示 -->
    <div
      :class="props.videoType == 1 ? 'content1' : 'content2'"
      id="content"
      :style="bgStyle"
      ref="fatherBox"
    >
      <!-- 数字人的图片 -->
      <div
        class="virtual"
        :class="showBorderActive == materialList.virtual.id ? 'border' : ''"
        @mousedown.stop="handleDrag(materialList.virtual, $event)"
        :style="virtualStyle"
      >
        <img
          id="virtualImg"
          draggable="false"
          :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
            draggable="false"
            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.stop="handleDragSc(item, index, $event)"
        :style="{
          top: item.y / props.proportion + 'px',
          left: item.x / props.proportion + 'px',
          transform: 'scale(' + item.w / props.proportion + ') ',
          transformOrigin: 'top left',
          zIndex: item.z,
        }"
      >
        <img id="scListItemImg" draggable="false" :src="item.material" alt="" />
        <div ref="box1" class="stretchBox box1"></div>
        <div
          v-show="showBorderActive == item.id"
          class="stretchBox box2"
          @click="delScListItem(index)"
        >
          <img
            draggable="false"
            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
            draggable="false"
            style="width: 100px; height: 100px"
            src="../assets/img/Scale.png"
            alt=""
          />
        </div>
      </div>
      <!-- 字幕 -->
      <div
        v-show="props.Subtitles.SubtitlesSwitch"
        class="subtitles"
        :class="showBorderActive == 'subtitles' ? 'border' : ''"
        :style="SubtitlesStyle"
        @mousedown.stop="handleDragSubtitles"
      >
        {{ $t("createVideo.SubtitlesTip") }}
      </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,
  },
  Subtitles: {
    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 / props.proportion + "px",
    left: props.materialList.virtual.x / props.proportion + "px",
    transform:
      "scale(" + props.materialList.virtual.w / props.proportion + ") ",
    transformOrigin: "top left",
    zIndex: props.materialList.virtual.z,
  };
});
// 拖动盒子
const showBorderActive = ref(-1); //判断显示边框
watch(
  () => props.materialList.virtual.id,
  (newValue, oldValue) => {
    showBorderActive.value = props.materialList.virtual.id;
  },
  { deep: true }
);

const fatherBox = ref(null);
const handleDrag = (item, event) => {
  realImgUrl.value = item.material;
  console.log(realImgUrl.value);
  showBorderActive.value = item.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.proportion;
    props.materialList.virtual.y = startTop + deltaY * props.proportion;
  };

  // 鼠标抬起
  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.stopPropagation();
  const baseLine = Diagonal.value / props.proportion; //原图基线
  const baseLineScale = baseLine * props.materialList.virtual.w; //缩放后的基线
  touchStart.pageX = event.clientX;
  touchStart.pageY = event.clientY;
  const onMouseMove = (event) => {
    let x = event.clientX;
    let y = event.clientY;
    let deltaX = touchStart.pageX - x;
    let deltaY = touchStart.pageY - y;
    let boxDistance2 = Math.sqrt(deltaX ** 2 + deltaY ** 2);
    if (deltaX < 0) {
      if (props.materialList.virtual.w < 0.4) {
        props.materialList.virtual.w = 0.4;
        return;
      }
      props.materialList.virtual.w = (baseLineScale + boxDistance2) / baseLine;
    } else {
      if (props.materialList.virtual.w > 1.3) {
        props.materialList.virtual.w = 1.3;
        return;
      }
      props.materialList.virtual.w = (baseLineScale - boxDistance2) / baseLine;
    }
  };
  // 鼠标抬起
  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 = (item, index, event) => {
  realImgUrl.value = item.material;

  showBorderActive.value = item.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.proportion;
    props.materialList.scList[index].y = startTop + deltaY * props.proportion;
  };

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

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

function changeScaleSc(index, event) {
  event.stopPropagation();
  const baseLine = Diagonal.value / props.proportion; //原图基线
  const baseLineScale = baseLine * props.materialList.scList[index].w; //缩放后的基线
  touchStart.pageX = event.clientX;
  touchStart.pageY = event.clientY;
  const onMouseMove = (event) => {
    let x = event.clientX;
    let y = event.clientY;
    let deltaX = touchStart.pageX - x;
    let deltaY = touchStart.pageY - y;
    let boxDistance2 = Math.sqrt(deltaX ** 2 + deltaY ** 2);
    if (deltaX < 0) {
      if (props.materialList.scList[index].w < 0.4) {
        props.materialList.scList[index].w = 0.4;
        return;
      }
      props.materialList.scList[index].w =
        (baseLineScale + boxDistance2) / baseLine;
    } else {
      if (props.materialList.scList[index].w > 1.3) {
        props.materialList.scList[index].w = 1.3;
        return;
      }
      props.materialList.scList[index].w =
        (baseLineScale - boxDistance2) / baseLine;
    }
  };
  // 鼠标抬起
  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);
}
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 获取图片原始大小及其对角线长度
const realImg = ref(null); //dom
const realImgUrl = ref(null); //
const Diagonal = ref(null); //对角线长度
watch(
  () => realImgUrl,
  async (newValue, oldValue) => {
    await nextTick();
    console.log();
    console.log();
    Diagonal.value = Math.sqrt(
      realImg.value.width ** 2 + realImg.value.height ** 2
    );
  },
  { deep: true }
);
//#endregion --------------------------

//#region 字幕
const SubtitlesStyle = computed(() => {
  let leftX = null;
  if (props.videoType == 1) {
    leftX =
      (1080 / 2 - props.Subtitles.SubtitlesWidth / 2) / props.proportion + "px";
  } else if (props.videoType == 2) {
    leftX =
      (1920 / 2 - props.Subtitles.SubtitlesWidth / 2) / props.proportion + "px";
  }
  // console.log(props.Subtitles.SubtitlesWidth);
  return {
    width: props.Subtitles.SubtitlesWidth / props.proportion + "px",
    top: props.Subtitles.SubtitlesTop / props.proportion + "px",
    left: leftX,
    fontSize: props.Subtitles.SubtitlesSize + "px",
    // fontWeight: props.Subtitles.SubtitlesWeight,
    fontFamily: props.Subtitles.SubtitlesFontFamily,
    color: props.Subtitles.SubtitlesColor,
    zIndex: 99,
  };
});
const handleDragSubtitles = (event) => {
  showBorderActive.value = "subtitles";
  event.preventDefault();
  // const startX = event.clientX; //保存初始值,避免闪烁
  const startY = event.clientY;
  const startTop = props.Subtitles.SubtitlesTop;
  // 鼠标移动
  const onMouseMove = (event) => {
    const deltaY = event.clientY - startY;
    props.Subtitles.SubtitlesTop = startTop + deltaY * props.proportion;
  };

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

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};
function rgbaToBgra(hexColor) {
  // 去除颜色前缀
  hexColor = hexColor.replace("#", "");
  // 分割颜色分量
  const red = hexColor.substring(0, 2);
  const green = hexColor.substring(2, 4);
  const blue = hexColor.substring(4, 6);
  // 组合为新的颜色字符串
  const convertedColor = `&H${blue}${green}${red}`;
  return convertedColor;
}
function BgraToRgba(hexColor) {
  // 去除颜色前缀
  hexColor = hexColor.replace("&H", "");
  // 分割颜色分量
  const blue = hexColor.substring(0, 2);
  const green = hexColor.substring(2, 4);
  const red = hexColor.substring(4, 6);
  // 组合为新的颜色字符串
  const convertedColor = `#${red}${green}${blue}`;
  return convertedColor;
}
//#endregion --------------------------

//#region 公共方法
function NumToFixed(num1, num2) {
  return Number(num1).toFixed(num2);
}
//#endregion ----------------------------

//#region

//#endregion --------------------------
</script>

<style lang="scss" scoped>
.myPage {
  // height: 768px;
  // width: 432px;
  position: relative;
  width: 100%;
  height: 100%;
  .realImg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0;
  }
}
.content1 {
  position: relative;
  // height: 768px;
  // width: 432px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content2 {
  position: relative;
  // height: 432px;
  // width: 768px;
  width: 100%;
  height: 100%;
  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;
}
.subtitles {
  position: absolute;
  user-select: none;
  border: rgba(0, 0, 0, 0) 5px solid;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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>
