<!--
 * @Author: ChenChanghua
 * @Date: 2022-08-30 10:58:38
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-08-30 14:20:46
 * @Description: file content
-->
<script setup>
import { createImpactTracer, createImpactCallback } from "jsview";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const transEle1 = ref(null),
  transEle2 = ref(null),
  rotateEle1 = ref(null),
  rotateEle2 = ref(null),
  rotateEle3 = ref(null),
  rotateEle4 = ref(null),
  scaleEle1 = ref(null),
  scaleEle2 = ref(null),
  skewEle1 = ref(null),
  skewEle2 = ref(null);

let sensors = [];

const tLeftColor = ref("#FF0000"),
  tRightColor = ref("#00FF00"),
  rLeftColor = ref("#FF0000"),
  rRightColor = ref("#00FF00"),
  r2LeftColor = ref("#FF0000"),
  r2RightColor = ref("#00FF00"),
  sLeftColor = ref("#FF0000"),
  sRightColor = ref("#00FF00"),
  skLeftColor = ref("#FF0000"),
  skRightColor = ref("#00FF00");

const lastItemVisibility = ref("hidden"); // 验证View先声明碰撞检测再显示的场景，是否碰撞能正常生效
const lastItemGone = ref(false); // 验证碰撞对象关联的View从ViewTree拿掉后是否触发Native端的自清理处理

setTimeout(() => {
  lastItemVisibility.value = "visible";
}, 1000);
setTimeout(() => {
  lastItemGone.value = true;
}, 5000);

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};

onMounted(() => {
  const translate_sensor = createImpactTracer(
    transEle1.value,
    transEle2.value,
    createImpactCallback(
      () => {
        tLeftColor.value = "#00FFFF";
        tRightColor.value = "#FFFF00";
      },
      () => {
        tLeftColor.value = "#FF0000";
        tRightColor.value = "#00FF00";
      }
    )
  );
  sensors.push(translate_sensor);

  const rotate_count = { count: 0 };
  const rotate_sensor = createImpactTracer(
    rotateEle1.value,
    rotateEle2.value,
    createImpactCallback(
      () => {
        rLeftColor.value = "#00FFFF";
        rRightColor.value = "#FFFF00";
      },
      () => {
        rotate_count.count++;
        if (rotate_count.count >= 2) {
          // 旋转有头尾连续两次碰撞
          console.log("Finish collision of rotate element");
        }
        rLeftColor.value = "#FF0000";
        rRightColor.value = "#00FF00";
      }
    )
  );
  sensors.push(rotate_sensor);

  const rotate2_sensor = createImpactTracer(
    rotateEle3.value,
    rotateEle4.value,
    createImpactCallback(
      () => {
        r2LeftColor.value = "#00FFFF";
        r2RightColor.value = "#FFFF00";
      },
      () => {
        r2LeftColor.value = "#FF0000";
        r2RightColor.value = "#00FF00";
      }
    )
  );
  sensors.push(rotate2_sensor);

  const scale_sensor = createImpactTracer(
    scaleEle1.value,
    scaleEle2.value,
    createImpactCallback(
      () => {
        sLeftColor.value = "#00FFFF";
        sRightColor.value = "#FFFF00";
      },
      () => {
        sLeftColor.value = "#FF0000";
        sRightColor.value = "#00FF00";
      }
    )
  );
  sensors.push(scale_sensor);

  const skew_sensor = createImpactTracer(
    skewEle1.value,
    skewEle2.value,
    createImpactCallback(
      () => {
        skLeftColor.value = "#00FFFF";
        skRightColor.value = "#FFFF00";
      },
      () => {
        skLeftColor.value = "#FF0000";
        skRightColor.value = "#00FF00";
      }
    )
  );
  sensors.push(skew_sensor);
});

onBeforeUnmount(() => {
  for (let i = 0; i < sensors.length; i++) {
    sensors[i].Recycle();
  }
  sensors = [];
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 100,
        top: 20,
        width: 1280 - 200,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      原生端辅助的高效率碰撞检测处理
    </div>
    <div :style="{ top: 200, left: 100 }">
      <div
        ref="transEle1"
        :style="{
          left: 0,
          width: 100,
          height: 100,
          backgroundColor: tLeftColor,
          animation: 'toRight 5s',
        }"
      >
        view1
      </div>
      <div :style="{ left: 300 }">
        <div
          ref="transEle2"
          :style="{
            width: 100,
            height: 100,
            backgroundColor: tRightColor,
            animation: 'toLeft 5s',
          }"
        >
          view2
        </div>
      </div>
    </div>

    <div :style="{ top: 500, left: 100 }">
      <div
        ref="rotateEle1"
        :style="{
          left: 0,
          width: 20,
          height: 150,
          backgroundColor: rLeftColor,
          animation: 'rotate1 5s',
        }"
      >
        view1
      </div>
      <div
        ref="rotateEle2"
        :style="{
          left: 100,
          width: 20,
          height: 150,
          backgroundColor: rRightColor,
          animation: 'rotate2 5s',
        }"
      >
        view2
      </div>
    </div>

    <div :style="{ top: 500, left: 500 }">
      <div
        :style="{
          top: 50,
          left: 0,
          width: 150,
          height: 150,
          backgroundColor: 'rgba(255,255,255,0.5)',
          animation: 'rotate3 5s',
        }"
      >
        <div
          ref="rotateEle3"
          :style="{
            left: (150 - 20) / 2,
            width: 20,
            height: 150,
            backgroundColor: r2LeftColor,
          }"
        >
          view1
        </div>
      </div>
      <div
        :style="{
          top: 0,
          left: 100,
          width: 150,
          height: 150,
          backgroundColor: 'rgba(255,255,255,0.5)',
          animation: 'rotate4 5s',
        }"
      >
        <div
          ref="rotateEle4"
          :style="{
            left: 0,
            top: (150 - 20) / 2,
            width: 150,
            height: 20,
            backgroundColor: r2RightColor,
          }"
        >
          view2
        </div>
      </div>
    </div>

    <div :style="{ top: 200, left: 500 }">
      <div
        ref="scaleEle1"
        :style="{
          left: 100,
          width: 100,
          height: 100,
          backgroundColor: sLeftColor,
          animation: 'scale1 5s',
        }"
      >
        view1
      </div>
      <div
        ref="scaleEle2"
        :style="{
          left: 250,
          width: 100,
          height: 100,
          backgroundColor: sRightColor,
          animation: 'scale2 5s',
        }"
      >
        view2
      </div>
    </div>

    <div
      v-if="!lastItemGone"
      :style="{
        top: 500,
        left: 800,
        visibility: lastItemVisibility,
      }"
    >
      <div
        ref="skewEle1"
        :style="{
          left: 100,
          width: 100,
          height: 100,
          backgroundColor: skLeftColor,
          animation: 'skew1 5s',
        }"
      >
        viewA
      </div>
      <div
        ref="skewEle2"
        :style="{
          left: 300,
          width: 100,
          height: 100,
          backgroundColor: skRightColor,
          animation: 'skew2 5s',
        }"
      >
        viewB
      </div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
@keyframes toLeft {
  from {
    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
  }
  to {
    transform: translate3d(-300, 0, 0) scale3d(1.5, 1.5, 1);
  }
}

@keyframes toRight {
  from {
    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
  }
  to {
    transform: translate3d(300, 0, 0) scale3d(1.5, 1.5, 1);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

/* webview中 旋转轴为(0,0,-1)会导致getComputeStyle中的transform为单位矩阵*/
@keyframes rotate2 {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, -360deg);
  }
}

@keyframes scale1 {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(2, 2, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scale2 {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(2, 2, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes skew1 {
  0% {
    transform: skew(0, 0);
  }
  50% {
    transform: skew(-60deg, 0);
  }
  100% {
    transform: skew(0, 0);
  }
}

@keyframes skew2 {
  0% {
    transform: skew(0, 0);
  }
  50% {
    transform: skew(60deg, 0);
  }
  100% {
    transform: skew(0, 0);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
    transform-origin: center top;
  }
  to {
    transform: rotate3d(0, 0, 1, -360deg);
    transform-origin: center top;
  }
}

@keyframes rotate4 {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
    transform-origin: center center;
  }
  to {
    transform: rotate3d(0, 0, 1, -360deg);
    transform-origin: center center;
  }
}
</style>
