<!--
 * 【界面概述】
 * 展示文字垂直对齐方式显示控件的用法
 *
 * 【控件介绍】
 *
 * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
 *      props说明:
 *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
 *          style {object}          样式(必需)
 *
 * 【技巧说明】
 * Q: 如何实现文字居中对齐方式显示?
 * A: verticalAlign属性设置为middle
 *
 * Q: 如何触发控件重绘?
 * A: 1. 变更文字内容，将触发控件重绘，但不会重新解析styles
 -->

 <script setup>
import RenderLeft from "./RenderLeft.vue";
import RenderRight from "./RenderRight.vue";
import RenderCenter from "./RenderCenter.vue";
import RenderOneLine from "./RenderOneLine.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
let offsetX = ref(0);
let offsetY = ref(0);
const onLineText = "abcdefghigk";
const text = `静夜思 --唐李白
床前明月光，疑是地上霜；
举头望明月，低头思故乡。`;
const text_latex = `静夜思 --唐李白
床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;

const moveCount = ref(0);

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }
  switch (ev.keyCode) {
    case 37:
      offsetX.value += 30;
      moveCount.value++;
      break;
    case 39:
      offsetX.value -= 30;
      moveCount.value++;
      break;
    case 38:
      offsetY.value += 30;
      moveCount.value++;
      break;
    case 40:
      offsetY.value -= 30;
      moveCount.value++;
      break;
  }
  return true;
};
const onFocus = () => {
  console.log("TextBox getFocus");
};
const onBlur = () => {
  console.log("TextBox loseFocus");
};
</script>

 <template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
      onFocus: onFocus,
      onBlur: onBlur,
    }"
  >
    <div :style="{ top: offsetY, left: offsetX }">
      <RenderLeft :text="text" :moveCount="moveCount" />
      <RenderRight :text="text" />
      <RenderCenter :text="text" :text_latex="text_latex" />
      <RenderOneLine :text="onLineText" />
    </div>
  </jsv-focus-block>
</template>