<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-25 10:33:07
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-04-28 
 * @Description: file content
-->
<script setup>
import FullKeyboard from "./FullKeyboard.vue";
import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
import { shallowRef } from "vue";

const blurColor = "#AAAAAA";
const focusColor = "#FFFF00";
let focusNode = shallowRef(null);
let input = shallowRef(null);
let showCursor = shallowRef(false);
const focusHub = useFocusHub();
let cursorColor = shallowRef(blurColor);
const props = defineProps({
  name: String,
  type: Number,
  textAlign: String,
  placeHolder: String,
  onEdge: Function,
});
const _onFocus = () => {
  showCursor.value = true;
  cursorColor.value = blurColor;
  focusHub.setFocus(`${props.name}/keyboard`);
};
const _onBlur = () => {
  showCursor.value = false;
  cursorColor.value = blurColor;
};
const _keyboardOnClick = (item) => {
  const char = item.content;
  if (char === "删除") {
    input.value?.delete();
  } else if (char === "清空") {
    input.value?.clear();
  } else {
    input.value?.add(char);
  }
};
const _keyboardOnEdge = (edgeInfo) => {
  if (edgeInfo.direction === EdgeDirection.top) {
    focusHub.setFocus(`${props.name}/etext`);
    cursorColor.value = focusColor;
  } else {
    props.onEdge?.(edgeInfo);
  }
};
const _onTextChange = (str) => {
  console.log(props.name + " text change:", str);
};
const _onTextOverflow = () => {
  console.log(props.name + " text overflow.");
};
const _onBackKey = (isUp) => {
  return true; // 无论是key-down还是key-up都consume，防止软键盘有时候返回会吐出导致界面回退的问题
};
const _inputOnEdge = (edgeInfo) => {
  if (edgeInfo.direction === EdgeDirection.bottom) {
    focusHub.setFocus(`${props.name}/keyboard`);
    cursorColor.value = blurColor;
  } else {
    props.onEdge?.(edgeInfo);
  }
  return true;
};
</script>

<template>
  <jsv-focus-block
    :name="props.name"
    ref="focusNode"
    :onAction="{
      onFocus: _onFocus,
      onBlur: _onBlur,
    }"
  >
    <div
      :style="{
        left: 50,
        top: 50,
        width: 150,
        height: 40,
        backgroundColor: '#33334f',
      }"
    />
    <jsv-input
      :name="`${props.name}/etext`"
      ref="input"
      :type="props.type"
      :left="50"
      :top="50"
      :height="40"
      :width="150"
      :placeholder="props.placeHolder"
      :cursorShow="showCursor"
      :fontStyle="{
        fontSize: 28,
        color: '#ffff00',
        textAlign: props.textAlign,
      }"
      :onEdge="_inputOnEdge"
      :cursorWidth="2"
      :onTextChange="_onTextChange"
      :onTextOverflow="_onTextOverflow"
      :cursorColor="cursorColor"
      :onBackKey="_onBackKey"
    />

    <div :style="{ top: 100 }">
      <full-keyboard
        :name="`${props.name}/keyboard`"
        :onClick="_keyboardOnClick"
        :onEdge="_keyboardOnEdge"
      />
    </div>
  </jsv-focus-block>
</template>
