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

const props = defineProps({
  data: Object,
  onAction: Object,
  lightImg: String,
});
const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/SwipeLight/Item/background.png";

const focused = ref(false);
const showLight = ref(false);

// 注册回调
const onFocus = () => {
  focused.value = true;
  showLight.value = true;
};
const onBlur = () => {
  focused.value = false;
  showLight.value = false;
};
const onClick = () => {};
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);

function onAnimEnd() {
  showLight.value = false;
}
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      transition: 'transform 0.2s',
      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
    }"
  >
    <div
      :style="{
        width: data.width,
        height: data.height,
        fontSize: 30,
        color: '#FFFFFF',
        backgroundImage: bgImage,
        lineHeight: data.height,
        textAlign: 'center',
        borderRadius: 20,
      }"
    >
      扫光
    </div>
    <swipe-light-box
      v-if="showLight"
      :lightImg="lightImg"
      :size="{
        width: data.width,
        height: data.height,
      }"
      :borderRadius="20"
      :onAnimEnd="onAnimEnd"
    />
  </div>
</template>
