<!--
 * @Author: ChenChanghua
 * @Date: 2021-10-20 18:27:08
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-05 
 * @Description: file content
-->
<script setup>
import LRParabolicDemo from "./LRParabolicDemo.vue";
import UDParabolicDemo from "./UDParabolicDemo.vue";
import TargetDemo from "./TargetDemo.vue";
import AccelerateDemo from "./AccelerateDemo.vue";
import { shallowRef } from "vue"
import { useRouter } from "vue-router"

const router=useRouter()
let  demoIndex=shallowRef(0)

const  onKeyDown=(ev)=>{
      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
        return true;
      }
      if (ev.keyCode === 37) {
        demoIndex.value = demoIndex.value - 1 < 0 ? 3 : demoIndex.value - 1;
      } else if (ev.keyCode === 39) {
        demoIndex.value = demoIndex.value + 1 > 3 ? 0 : demoIndex.value + 1;
      }
      return true;
    }
</script>

<template>
  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#000000',
    }"
  >
    <div
      key="leftWall"
      :style="{
        top: 0,
        left: 425,
        width: 5,
        height: 620,
        backgroundColor: '#F0F000',
      }"
    />
    <div
      key="rightWall"
      :style="{
        top: 0,
        left: 850,
        width: 5,
        height: 620,
        backgroundColor: '#F0F000',
      }"
    />
    <div
      key="bottomWall"
      :style="{
        top: 620,
        left: 425,
        width: 430,
        height: 5,
        backgroundColor: '#F0F000',
      }"
    />
    <div
      key="GuidText1"
      className="{CssStyles.FontStyle.getName()}"
      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
    >
      {`按OK键进行跳跃和转向`}
    </div>
    <div
      key="GuidText2"
      className="{CssStyles.FontStyle.getName()}"
      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
    >
      {`左右键切换不同模式的Demo`}
    </div>
    <jsv-focus-block
      autoFocus
      ref="focusNode"
      :onAction="{
        onKeyDown: onKeyDown,
      }"
    >
      <LRParabolicDemo
        v-if="demoIndex === 0"
        name="/actorMove"
      ></LRParabolicDemo>
      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
      <AccelerateDemo
        v-if="demoIndex === 3"
        name="/accelerateDemo"
      ></AccelerateDemo>
    </jsv-focus-block>
  </div>
</template>