<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 18:03:22
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import { shallowRef } from "vue"
const props = defineProps({
  data: Object,
  onAction: Object,
})

let focus = shallowRef(false)
let anim = shallowRef(null)

const onFocus = () => {
  focus.value = true;
  anim.value = "focusScale 0.3s";
}

const onBlur = () => {
  focus.value = false;
  anim.value = "blurScale 0.3s";
}

const onClick = () => {
  console.log("item click");
}

const getStyle = () => {
  const width = focus.value
    ? (props.data.blocks.w - 10) * (1 / 0.8)
    : props.data.blocks.w - 10;
  const height = focus.value
    ? (props.data.blocks.h - 10) * (1 / 0.8)
    : props.data.blocks.h - 10;
  const posx = focus.value ? (props.data.blocks.w - 10 - width) / 2 : 0;
  const posy = focus.value ? (props.data.blocks.h - 10 - height) / 2 : 0;
  return {
    left: posx,
    top: posy,
    width: width,
    height: height,
    color: "#FFFFFF",
    backgroundColor: focus.value ? "#FF0000" : props.data.color,
    animation: anim.value,
  };
}

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


</script>

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

<style scoped>
@keyframes focusScale {
  from {
    transform: scale3d(0.8, 0.8, 1);
    transform-origin: center center;
  }
  to {
    transform: scale3d(1, 1, 1);
    transform-origin: center center;
  }
}

@keyframes blurScale {
  from {
    transform: scale3d(1.25, 1.25, 1);
    transform-origin: center center;
  }
  to {
    transform: scale3d(1, 1, 1);
    transform-origin: center center;
  }
}
</style>