<!--
 * @Author: ChenChanghua
 * @Date: 2023-02-06 10:19:42
 * @Description: file content
-->
<script setup>
import { ref } from "vue";

const props = defineProps({
  data: Object,
  onAction: Object,
});

let focused = ref(false);

const onFocus = () => {
  focused.value = true;
};

const onBlur = () => {
  focused.value = false;
};

const onClicked = () => {
  props.data.callback();
};

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClicked);
</script>

<template>
  <div
    :style="{
      width: 300,
      height: 50,
      backgroundColor: focused ? '#444444' : '#778800',
      fontSize: 30,
      color: '#ffffff',
    }"
  >
    {{ data.name }}
  </div>
</template>
