<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-08 15:05:00
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 17:45:44
 * @Description: file content
-->
<script setup>
import { ref } from "vue";

const props = defineProps({
  data: Object,
  query: Object,
  onEdge: Function,
  onAction: Object,
});
const focused = ref(false);
const onFocus = () => {
  focused.value = true;
};

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

const onClick = () => {};

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

<template>
  <div
    :style="{
      width: props.data.width,
      height: props.data.height,
      fontSize: 30,
      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
    }"
  >
    {{ data.content }}
  </div>
</template>