<!--
 * @Author: ChenChanghua
 * @Date: 2021-10-20 18:27:25
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-05 
 * @Description: file content
-->
<script setup>
import { JsvActorMoveControl, JsvActorMove } from "jsview";
import { shallowRef, computed } from "vue";

let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
let focusNode=shallowRef(null)

const props = defineProps({
  name: String,
})
let direction = shallowRef(1)

const directionDetail = computed(() => {
  return direction.value < 0 ? "上" : "下";
})
const detail = computed(() => {
  return direction.value < 0 ? "向上抛物" : "向下掷物并弹起";
})

const  onKeyDown=(ev)=>{
      let preDirection = direction.value;
      switch (ev.keyCode) {
        case 13:
          direction.value = -direction.value;
          throwControl.throwAlongY(
            -400 * preDirection,
            550 * preDirection,
            {
              type: "catch",
              position: 100 * preDirection,
              direction: preDirection,
            },
            (x, y) => {
              console.log(`Throw end with x=${x} y=${y}`);
            }
          );
          return true;
      }
      return false;
    }

</script>

<template>
  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
    onKeyDown: onKeyDown,
  }">
    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
      {{ detail }}
    </div>
    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
      {{ `当前方向:${directionDetail}` }}
    </div>
    <div :style="{ top: 590, left: 625 }">
      <jsv-actor-move key="move" :control="moveControl">
        <jsv-actor-move key="throw" :control="throwControl">
          <div :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"></div>
        </jsv-actor-move>
      </jsv-actor-move>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.font {
  font-size: 32;
  color: #73665c;
  line-height: 40;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.detail-font {
  font-size: 32;
  color: #f7f7eb;
  line-height: 30;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
</style>