<!--
 * 【界面概述】
 * 用于展示JsvFocusBlock在NameSpace分割后的操作处理
 * 界面分为上区域(NameSpace为TopNS)和下区域(NameSpace为BottomNS)，每个区域内部再分两行，分别为L0和L1两个各自独立的NameSpace区域
 * 每行内部不再开新的NameSpace, 而是放入4个可获焦的节点, 作为4列，并且每个焦点中显示其完整名称(fullName)
 * 左右键处理时，在4个可获焦节点中切换焦点，NameSpace不改变
 * 上下键处理时，上下进行焦点切换，NameSpace改变，并可能发生从TopNs区域切换到BottomNS的场景
 *
 * 【控件介绍】
 * FocusHub：全局节点控制对象，获取方法: useFocusHub() 接口
 *   通过FocusHub 设置焦点为, setFocus(name) 接口
 *   当获取Root的Hub时, useFocusHub(false) 或者 useFocusHub(), 此Hub要访问含有NameSpace的内容时,需要传节点的fullName
 *   要获取当前节点的所在NameSpace的Hub时，useFocusHub(true), 此Hub中访问子节点时，只需要传子节点的name即可,不需要fullName   
 *
 * 【技巧说明】
 * Q: 如何进行按键响应？
 * A: 重载函数onKeyDown/onKeyUp/onDispatchKeyDown/onDispatchKeyUp中任何一个关心的按键事件响应函数，
 *    处理ev.keyCode判断按键值，通过返回值控制消息传递链是否中止
 *
 * Q: 如何进行焦点切换？
 * A: 通过useFocusHub获得focusHub句柄, 并赋值给变量，然后调用setFocus(name), 
 *    注意: 不能直接 useFocusHub().setFocus(name)
 *
 * Q: setFocus 的第二个参数keepChildFocus的作用是什么？
 * A: 使用场景举例：
 *    场景1：setFocus 的目标是一个当前获焦节点的父节点时，若keepChildFocus为true，则不会发生任何改变；
 *    若keepChildFocus为false或者不设置，则该焦点会失焦，焦点退回到父节点中。
 *    场景2：setFocus 的目标为一个曾经获得过焦但目前处于非焦状态的节点的父节点时，若keepChildFocus为true时，
 *    焦点会沿着该父节点的最后获焦状态记录，寻找到最末尾的落焦节点进行获焦；若keepChildFocus为false或者不设置，
 *    则只会对该父节点进行获焦，不会根据最后获焦状态寻找最末尾节点。
 *    （例如，进行场景回退时，返回上一个场景过程中，不需要该场景去记录最后的焦点位置，只要 setFocus 设置
 *    为该场景的根JsvFocusBlock，并且keepChildFocus设置为true，则JsvFocusBlock系统会自动将焦点落在此场景失焦时的最后获焦位置。）
 *
-->

<script setup>
import { useRouter } from "vue-router";
import MainArea from "./components/MainArea.vue";
import { useFocusHub } from "jsview";

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

window.DebugMyHub = useFocusHub();
window.DebugMyHub.enableFocusTrace(); // 激活焦点变化堆栈
</script>

<template>
  <!-- 这里的jsv-focus-block只是为了获取到一个base focus节点，并不是必须的 -->
  <jsv-focus-block :onKeyDown="onKeyDown">
    <div class="title">可上下左右切换焦点</div>
    <div class="body">
      <MainArea />
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.title {
  text-align: center;
  font-size: 30;
  line-height: 50;
  color: #ffffff;
  left: 100;
  top: 50;
  width: 400;
  height: 50;
  background-color: rgba(27, 38, 151, 0.8);
}

.body {
  left: 100;
  top: 120;
}
</style>
