<template>
  <div
    :style="{
      width: props.data.width,
      height: props.data.height,
      backgroundColor: clicked
        ? '#0000FF'
        : focused
        ? props.data.color
        : '#FFFFFF',
      left: props.data.left,
      top: props.data.top,
      fontSize: 30,
    }"
  >
    {{ props.query.id }}
    <div
      :style="{
        width: props.data.width,
        height: 68,
        fontSize: 24,
        top: 32,
      }"
    >
      {{ `left: ${props.data.left}\n` + `top: ${props.data.top}` }}
    </div>
  </div>
</template>

<script setup>
import { shallowRef } from "vue";
const props = defineProps({
  data: Object,
  onAction: Object,
  query: Object,
});
let focused = shallowRef(false);
let clicked = shallowRef(false);
const onFocus = () => {
  focused.value = true;
};

const onBlur = () => {
  focused.value = false;
  clicked.value = false;
};
const onClick = () => {
  clicked.value = !clicked.value;
};
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);
</script>

<style scoped></style>
