<script>
export default {
  props: {
    data: Object,
    query: Object,
    onEdge: Function,
    onAction: Object,
  },
  methods: {
    onFocus() {
      this.focus = true;
    },
    onBlur() {
      this.focus = false;
    },
    onClick() {
      console.log("item click");
    },
    getStyle() {
      const width = this.focus
        ? (this.data.blocks.w - 10) * (1 / 0.8)
        : this.data.blocks.w - 10;
      const height = this.focus
        ? (this.data.blocks.h - 10) * (1 / 0.8)
        : this.data.blocks.h - 10;
      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
      return {
        left: posx,
        top: posy,
        width: width,
        height: height,
        color: "#FFFFFF",
        backgroundColor: this.focus ? "#FF0000" : this.data.color,
      };
    },
  },
  data() {
    return {
      focus: false,
      anim: null,
    };
  },
  created() {
    this.onAction.register("onFocus", this.onFocus);
    this.onAction.register("onBlur", this.onBlur);
    this.onAction.register("onClick", this.onClick);
  },
};
</script>

<template>
  <div :style="{ ...getStyle() }">
    {{ data.content }}
  </div>
</template>

<style scoped></style>
