<!--
 * @Author: ChenChanghua
 * @Date: 2021-09-29 16:13:35
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import { computed, shallowRef } from "vue";

const props = defineProps({
  name: String,
  onEdgeDown: Function,
  onItemFocus: Function,
});

let activeId = shallowRef(0);
let focused = shallowRef(false);

const tab1Class = computed(() => {
  if (activeId.value == 0) {
    return focused.value
      ? "text-active item-focused"
      : "text-active item-normal";
  } else {
    return "text-normal item-normal";
  }
});
const tab2Class = computed(() => {
  if (activeId.value == 1) {
    return focused.value
      ? "text-active item-focused"
      : "text-active item-normal";
  } else {
    return "text-normal item-normal";
  }
});
const tab3Class = computed(() => {
  if (activeId.value == 2) {
    return focused.value
      ? "text-active item-focused"
      : "text-active item-normal";
  } else {
    return "text-normal item-normal";
  }
});

const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37:
      activeId.value--;
      if (activeId.value < 0) {
        activeId.value = 2;
      }
      props.onItemFocus(activeId.value);
      return true;
    case 39:
      activeId.value++;
      if (activeId.value > 2) {
        activeId.value = 0;
      }
      props.onItemFocus(activeId.value);
      return true;
    case 40:
      props.onEdgeDown();
      return true;
  }
};
const onFocus = () => {
  focused.value = true;
};
const onBlur = () => {
  focused.value = false;
};
const actionDefines = {
  onBlur,
  onFocus,
  onKeyDown,
};
</script>

<template>
  <jsv-focus-block
    :name="props.name"
    :onAction="actionDefines"
  ></jsv-focus-block>
  <div :class="tab1Class">Tab1</div>
  <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
  <div :class="tab3Class" :style="{ left: 440 }">Tab3</div>
</template>

<style scoped>
.text-normal {
  width: 200;
  height: 50;
  line-height: 50;
  color: #444444;
  font-size: 25;
  text-align: center;
}

.text-active {
  width: 200;
  height: 50;
  line-height: 50;
  color: #ffffff;
  font-size: 25;
  text-align: center;
}

.item-focused {
  width: 200;
  height: 50;
  background-color: #008080;
}
.item-normal {
  width: 200;
  height: 50;
  background-color: #87cecb;
}
</style>
