<template>
  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
    <div class="bgStyle">
      <jsv-free-move-div
        ref="mActRef1"
        :style="{
          top: 100,
          left: 200,
          width: 500,
          height: 350,
          backgroundColor: '#00F00F',
          overflow: 'hidden',
        }"
        :sizeMode="true"
      >
        <div
          :style="{
            width: 400,
            height: 400,
            fontSize: 50,
            backgroundColor: '#FF0000',
          }"
        >
          {{ "测试文字" }}
        </div>
      </jsv-free-move-div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { JsvFreeMoveDiv, FreeMoveDef } 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);
let mActControl1 = null;

onMounted(() => {
  mActControl1 = mActRef1.value.control;
  window.DebugControl = mActControl1;
});

// 预设动画控制
function MoveToRightBottom() {
  mActControl1.run([
    mActControl1.state().clearAllConditions(),
    mActControl1.action().moveTo(600, 500, undefined, 3),
  ]);
}

function MoveToLeftTop() {
  mActControl1.run([
    mActControl1.state().clearAllConditions(),
    mActControl1.action().moveTo(100, 200, 3, undefined),
  ]);
}

// 暴露给devtool去使用
window.DebugFreeMove = {
  MoveToRightBottom,
  MoveToLeftTop,
};
</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>
