<template>
  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
    <div class="bgStyle">
      <div v-for="(item, index) in 6">
        <div v-show="index == num - 1">
          <jsv-free-move-actor :ref="(el) => (actRef[index] = el)">
            <div class="box">{{ "测试文字1" }}</div>
          </jsv-free-move-actor>
          <jsv-free-move-actor :ref="(el) => (actRef2[index] = el)">
            <div class="box" :style="{ backgroundColor: '#b52489' }">
              {{ "测试文字2" }}
            </div>
          </jsv-free-move-actor>
        </div>
      </div>
      <div class="tip">{{ "左右键翻页 " + `${num}/6 页` }}</div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { JsvFreeMoveActor, FreeMoveDef } from "jsview";
import { shallowRef, onMounted, watch } from "vue";

const actEvents = FreeMoveDef.ActEventDefine;
const keepFlags = FreeMoveDef.KeepFlags;

let actRef = shallowRef([]);
let actRef2 = shallowRef([]);
let actorControl = null;
let actorControl2 = null;

let num = shallowRef(1);
const procKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 13:
      console.log("procKeyDown get ok key");
      break;
    case 37:
      if (num.value !== 1) {
        num.value -= 1;
      } else {
        num.value = 1;
      }
      break;
    case 39:
      if (num.value !== 6) {
        num.value += 1;
      } else {
        num.value = 6;
      }
  }
};
// ******* 直接跳转位置 *******
window.DebugResetPos = (x, y) => {
  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportTo(x, y),
  ]);

  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportTo(x, y + 50),
  ]);
};

window.DebugResetOffsetPos = (x, y) => {
  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportOffset(x, y),
  ]);

  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportOffset(x, y),
  ]);
};

// ******* 有参照物的刹车测试，仅X轴移动 *******
window.DebugBrakeToPosX = () => {
  // 参照物
  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportTo(400, 50),
  ]);
  // 运动体
  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(0, 200),
    cmds.action().moveTo(300, undefined, 10, undefined),
    cmds
      .condition()
      .reachPosition(200, undefined)
      .then([
        cmds.action(1).brakeToPosition(
          400,
          undefined,
          (a, b, c, d) => {
            console.log(
              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
            );
          },
          () => {
            console.log("LudlDebugCB DebugBrakeToPos onRejected");
          }
        ),
      ]),
  ]);
};

// ******* 有参照物的刹车测试，XY都移动 *******
window.DebugBrakeToPosXY = () => {
  // 参照物
  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportTo(400, 50),
  ]);
  // 运动体
  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(800, 400),
    cmds.action().moveTo(100, 50, 10, undefined),
    cmds
      .condition()
      .reachPosition(400, undefined)
      .then([
        cmds.action(3).brakeToPosition(
          100,
          50,
          (a, b, c, d) => {
            console.log(
              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
            );
          },
          () => {
            console.log("LudlDebugCB DebugBrakeToPos onRejected");
          }
        ),
      ]),
  ]);
};

// ******* 定向移动 *******
window.DebugMoveTarget = () => {
  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(0, 400),
    cmds.action().moveTo(300, undefined, 10, undefined),
  ]);
};

// ******* 定向移动 + 回调监听 和 共享结束监听(OnNexusEvent) *******
window.DebugTestMove = (x, y) => {
  let actRef = {};
  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(160, 150),
    cmds.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
      console.log(
        "LudlDebugCB DebugTestMove enter " +
          " a=" +
          a +
          " b=" +
          b +
          " c=" +
          c +
          " d=" +
          d
      );
    }),
    cmds
      .condition()
      .onNexusEvent(actRef, actEvents.ActFinish)
      .then([
        () => {
          console.log("on move finished");
        },
      ]),
  ]);
};

window.DebugTestOffset = (control, startPos) => {
  control.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(startPos, 150),
    cmds.action().altSpeed(3, undefined, 0),
    cmds
      .condition(undefined, true)
      .reachPosition(460, undefined)
      .then([cmds.action(1, 0).teleportOffset(-300, undefined)]),
  ]);
};
window.DebugTestThrowStart = () => {
  // 参照物
  actorControl2.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.action().teleportTo(400, 300),
  ]);

  actorControl.run((cmds) => [
    cmds.state().clearAllConditions(),
    cmds.state().setStartPos(100, 300),
    cmds.action().setSpeed(2, undefined),
    cmds.action(1).setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
      console.log("on pole");
      // 在接触地板时停止
      actorControl.run((cmds) => [
        cmds
          .condition(undefined, true)
          .reachPosition(undefined, 300)
          .then([cmds.action(3, 3).stopMoving()]),
      ]);
    }),
  ]);
};

window.DebugTestThrow = () => {};

watch(num, (n, o) => {
  switch (n) {
    case 1:
      actorControl = actRef.value[0].control;
      actorControl2 = actRef2.value[0].control;
      window.DebugTestMove(200, 200);
      break;
    case 2:
      actorControl = actRef.value[1].control;
      actorControl2 = actRef2.value[1].control;
      window.DebugTestOffset(actorControl, 160);
      window.DebugTestOffset(actorControl2, 310);
      break;
    case 3:
      actorControl = actRef.value[2].control;
      actorControl2 = actRef2.value[2].control;
      window.DebugMoveTarget();
      break;
    case 4:
      actorControl = actRef.value[3].control;
      actorControl2 = actRef2.value[3].control;
      window.DebugBrakeToPosX();
      break;
    case 5:
      actorControl = actRef.value[4].control;
      actorControl2 = actRef2.value[4].control;
      window.DebugTestThrowStart();
      break;
    case 6:
      actorControl = actRef.value[5].control;
      actorControl2 = actRef2.value[5].control;
      window.DebugBrakeToPosXY();
      break;
    default:
      break;
  }
});
onMounted(() => {
  actorControl = actRef.value[0].control;
  actorControl2 = actRef2.value[0].control;
  window.DebugControl = actorControl;
  window.DebugTestMove(200, 200);
});
</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>
