<script setup>
import { shallowRef,computed } from "vue"
const props = defineProps({
    data: Object,
    query: Object,
    onEdge: Function,
    onAction: Object,
    onClick: Function,
})
const focused = shallowRef(false)

const style = computed(() => {
    return {
        width: props.data.width,
        height: props.data.height,
        fontSize: 20,
        textAlign: "center",
        lineHeight: props.data.height,
        color: "#FFFFFF",
    };
})
const _onFocus = () => {
    focused.value = true;
}
const _onBlur = () => {
    focused.value = false;
}
const _onClick = () => {
    props.onClick(props.data);
}

props.onAction.register("onFocus", _onFocus);
props.onAction.register("onBlur", _onBlur);
props.onAction.register("onClick", _onClick);


</script>

<template>
    <div v-if="focused" :style="{
            width: props.data.width,
            height: props.data.height,
            backgroundColor: '#00FF00',
        }" />
    <div ref="element" :style="style">
        {{ props.data.content }}
    </div>
</template>