<!--
 * @Author: ChenChanghua
 * @Date: 2021-09-29 16:13:35
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2021-09-29 17:07:19
 * @Description: file content
-->
<script>
import { ref } from "vue";

export default {
  props: {
    name: String,
    onEdgeDown: Function,
    onItemFocus: Function,
  },
  setup() {
    let activeId = ref(0);
    let focused = ref(false);
    return {
      activeId,
      focused,
    };
  },
  computed: {
    tab1Class() {
      if (this.activeId == 0) {
        return this.focused
          ? "text-active item-focused"
          : "text-active item-normal";
      } else {
        return "text-normal item-normal";
      }
    },
    tab2Class() {
      if (this.activeId == 1) {
        return this.focused
          ? "text-active item-focused"
          : "text-active item-normal";
      } else {
        return "text-normal item-normal";
      }
    },
    tab3Class() {
      if (this.activeId == 2) {
        return this.focused
          ? "text-active item-focused"
          : "text-active item-normal";
      } else {
        return "text-normal item-normal";
      }
    },
  },
  methods: {
    onKeyDown(ev) {
      switch (ev.keyCode) {
        case 37:
          this.activeId--;
          if (this.activeId < 0) {
            this.activeId = 2;
          }
          this.onItemFocus(this.activeId);
          break;
        case 39:
          this.activeId++;
          if (this.activeId > 2) {
            this.activeId = 0;
          }
          this.onItemFocus(this.activeId);
          break;
        case 40:
          this.onEdgeDown();
          break;
      }
    },
    onFocus() {
      this.focused = true;
    },
    onBlur() {
      this.focused = false;
    },
    getOnAction() {
      return {
        onKeyDown: this.onKeyDown,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
      };
    },
  },
};
</script>

<template>
  <jsv-focus-block :name="name" :onAction="getOnAction()"></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>