<template>
  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
    <div class="bgStyle">
      <jsv-free-move-div
        ref="mActRef1"
        :style="{
          top: 200,
          left: 400,
          width: 500,
          height: 350,
          backgroundColor: '#00F00F',
        }"
      >
        <jsv-free-move-div
          ref="mActRef2"
          :style="{
            width: 50,
            height: 50,
            backgroundColor: '#FF0000',
          }"
        />
      </jsv-free-move-div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { JsvFreeMoveDiv, ForgeConst } from "jsview";
import { shallowRef, onMounted, watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const procKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }

  return false;
};

const mActRef1 = shallowRef(null);
const mActRef2 = shallowRef(null);
let mActControl1 = null;
let mActControl2 = null;

onMounted(() => {
  mActControl1 = mActRef1.value.control;
  mActControl2 = mActRef2.value.control;

  mActControl1
    .getBindedView()
    .DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_FIRST_START);
  mActControl2
    .getBindedView()
    .DragEnables?.(
      ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT |
        ForgeConst.DragFlags.TOUCH_RECV_FIRST_START |
        ForgeConst.DragFlags.TOUCH_RECV_LAST_END
    );

  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);

  console.log(`OnMoved starting onMovement`);
  mActControl2.run([
    mActControl2
      .condition(0, true) // 通过第二个参数设置回调为多次触发
      .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
      .then([
        (pointInfo) => {
          console.log(`OnMoved x=${pointInfo.xPos} y=${pointInfo.yPos}`);
        },
      ]),
  ]);
  window.DebugControl = mActControl1;
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.box {
  width: 150;
  height: 150;
  font-size: 30;
  color: #000000;
  background-color: #3fb524;
}
.tip {
  width: 300;
  height: 30;
  line-height: 28;
  font-size: 28;
  left: 980;
  top: 680;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
}
</style>
