<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:17
 * @Description: file content
-->
<script setup>
import { ref } from "vue";

const props = defineProps({
  /* 固定格式 {width: Number, hieght: Number, from: Number, to: Number} */
  data: Object,
  onAction: Object,
  query: Object,
});

const focused = ref(false);
const gazed = ref(false);

// 注册回调
const onFocus = () => {
  focused.value = true;
};
const onBlur = () => {
  focused.value = false;
};
const onGaze = () => {
  gazed.value = true;
};
const onIgnore = () => {
  gazed.value = false;
};
const onClick = () => {
  console.log("item onclick ", props.data);
};
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);
props.onAction.register("onGaze", onGaze);
props.onAction.register("onIgnore", onIgnore);
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      lineHeight: data.height,
      textAlign: 'center',
      backgroundColor: '#6789fd',
      fontSize: 30,
      color: gazed ? '#ffffff' : '#aaaaaa',
    }"
  >
    {{ data.from + "-" + data.to }}
  </div>
  <div
    v-if="focused"
    :style="{
      top: data.height - 3,
      width: data.width,
      height: 3,
      backgroundColor: '#0000ff',
    }"
  ></div>
</template>
