<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-20 16:09:31
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-04-28
 * @Description: file content
-->
<script setup>
import { InputType, EdgeDirection, useFocusHub } from "jsview";
import InputPanel from "./InputPanel.vue";
import { useRouter } from "vue-router";
import { shallowRef } from "vue";
const router = useRouter();
let focusNode = shallowRef(null);
const name = "/input";
const focusHub = useFocusHub();

const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};

const focus_name_list = [
  name + "/normal-left",
  name + "/normal-right",
  name + "/password",
  name + "/number",
];

const _onFocus = () => {
  focusHub.setFocus(focus_name_list[0]);
};
const _panel0OnEdge = (edgeInfo) => {
  // 自己为0
  if (edgeInfo.direction == EdgeDirection.right) {
    focusHub.setFocus(focus_name_list[1]);
  }
};
const _panel1OnEdge = (edgeInfo) => {
  // 自己为1
  if (edgeInfo.direction == EdgeDirection.left) {
    focusHub.setFocus(focus_name_list[0]);
  } else if (edgeInfo.direction == EdgeDirection.right) {
    focusHub.setFocus(focus_name_list[2]);
  }
};
const _panel2OnEdge = (edgeInfo) => {
  // 自己为2
  if (edgeInfo.direction == EdgeDirection.left) {
    focusHub.setFocus(focus_name_list[1]);
  } else if (edgeInfo.direction == EdgeDirection.right) {
    focusHub.setFocus(focus_name_list[3]);
  }
};
const _panel3OnEdge = (edgeInfo) => {
  // 自己为3
  if (edgeInfo.direction == EdgeDirection.left) {
    focusHub.setFocus(focus_name_list[2]);
  }
};
</script>

<template>
  <jsv-focus-block
    ref="focusNode"
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
      onFocus: _onFocus,
    }"
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  >
    <div
      :style="{
        top: 100,
        left: 100,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 50,
          lineHeight: 50,
          textAlign: 'center',
          fontSize: 30,
        }"
      >
        文字输入-左对齐
      </div>
      <div
        :style="{
          top: 100,
        }"
      >
        <input-panel
          :name="name + '/normal-left'"
          :type="InputType.TEXT"
          textAlign="left"
          placeholder="请输入"
          :onEdge="_panel0OnEdge"
        />
      </div>
    </div>

    <div
      :style="{
        top: 100,
        left: 360,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 50,
          lineHeight: 50,
          textAlign: 'center',
          fontSize: 30,
        }"
      >
        文字输入-右对齐
      </div>
      <div
        :style="{
          top: 100,
        }"
      >
        <input-panel
          :name="name + '/normal-right'"
          :type="InputType.TEXT"
          textAlign="right"
          placeholder="请输入"
          :onEdge="_panel1OnEdge"
        />
      </div>
    </div>

    <div
      :style="{
        top: 100,
        left: 630,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 50,
          lineHeight: 50,
          textAlign: 'center',
          fontSize: 30,
        }"
      >
        密码输入-右对齐
      </div>
      <div
        :style="{
          top: 100,
        }"
      >
        <input-panel
          :name="name + '/password'"
          :type="InputType.PASSWORD"
          textAlign="right"
          placeholder="请输入"
          :onEdge="_panel2OnEdge"
        />
      </div>
    </div>

    <div
      :style="{
        top: 100,
        left: 900,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 50,
          lineHeight: 50,
          textAlign: 'center',
          fontSize: 30,
        }"
      >
        数字输入-右对齐
      </div>
      <div
        :style="{
          top: 100,
        }"
      >
        <input-panel
          :name="name + '/number'"
          :type="InputType.NUMBER"
          textAlign="right"
          placeholder="请输入"
          :onEdge="_panel3OnEdge"
        />
      </div>
    </div>
  </jsv-focus-block>
</template>
