<!--
 * @Author: ChenChanghua
 * @Date: 2022-05-10 15:21:24
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 11:51:26
 * @Description: file content
-->
<script setup>
import { ref, shallowRef } from "vue";
const props = defineProps({
  userData: Object,
  name: String,
});

let focusIndex = ref(0);
let focused = ref(false);
let divNumber = new Array(25);
let focusBlock = shallowRef(null);

const _onFocus = () => {
  console.log("button onfocus", props.userData);
  focused.value = true;
};
const _onBlur = () => {
  focused.value = false;
  focusIndex.value = 0;
};
const _onKeyDown = (ev) => {
  console.log("button onkeydown");
  if (ev.keyCode == 37 && focusIndex.value == 1) {
    focusIndex.value = 0;
    return true;
  } else if (ev.keyCode == 39 && focusIndex.value == 0) {
    focusIndex.value = 1;
    return true;
  } else if (ev.keyCode == 13) {
    console.log("button click", props.userData);
    return true;
  }
  return false;
};
const getFocusBlock = () => {
  return focusBlock.value;
};
const _MapColor = (color_num) => {
  return color_num < 10 || color_num >= 100
    ? "0" + (color_num % 10)
    : "" + (color_num % 100);
};

defineExpose({
  getFocusBlock,
});
</script>

<template>
  <jsv-focus-block
    ref="focusBlock"
    :name="name"
    :onAction="{
      onFocus: _onFocus,
      onBlur: _onBlur,
      onKeyDown: _onKeyDown,
    }"
  >
    <div
      v-for="(item, index) in divNumber"
      :key="index + '_l'"
      :style="{
        left: 2 * index,
        width: 2,
        height: 50,
        backgroundColor: '#77' + _MapColor(index) + _MapColor(index),
      }"
    ></div>
    <div
      :style="{
        width: 50,
        height: 50,
        fontSize: 20,
        color: '#FFFFFF',
      }"
    >
      {{ userData.name }}
    </div>

    <div
      v-for="(item, index) in divNumber"
      :key="index + '_r'"
      :style="{
        left: 2 * index + 50,
        width: 2,
        height: 50,
        backgroundColor:
          '#' +
          _MapColor(userData.baseColor) +
          _MapColor(index) +
          _MapColor(index),
      }"
    ></div>

    <div
      :style="{
        visibility: focused ? 'visible' : 'hidden',
        left: 50 * focusIndex,
        width: 10,
        height: 10,
        backgroundColor: '#FF0000',
      }"
    ></div>
  </jsv-focus-block>
</template>