<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:17
 * @Description: file content
-->
<script setup>
import { ref } from "vue";
import { EdgeDirection } from "jsview";

const props = defineProps({
  data: Object,
  onAction: Object,
  anim: Object,
  scaleRate: Number,
});
const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterAnim/Scale/Item/background.png";
const transform = `scale3d(${props.scaleRate}, ${props.scaleRate}, 1)`;

const focused = ref(false);
const animation = ref(null);

// 注册回调
const onFocus = () => {
  focused.value = true;
  animation.value = `${props.anim.name} 0.4s`;
};
const onBlur = () => {
  focused.value = false;
};
const onClick = () => {};

const onAnimEnd = () => {
  animation.value = null;
};

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

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      animation: animation,
    }"
    @animationend="onAnimEnd"
  >
    <div
      :style="{
        width: data.width,
        height: data.height,
        transform: focused ? transform : null,
      }"
    >
      <div
        :style="{
          width: data.width,
          height: data.height,
          fontSize: 30,
          color: focused ? '#FF0000' : '#FFFFFF',
          backgroundImage: bgImage,
          lineHeight: data.height,
          textAlign: 'center',
        }"
      >
        缩放
      </div>
    </div>
  </div>
</template>
