<script setup>
import { ref } from "vue";

const props = defineProps({
  data: Object,
  onAction: Object,
});

const focused = ref(false);

// 注册回调
const onFocus = () => {
  focused.value = true;
};

const onBlur = () => {
  focused.value = false;
};

const onClick = () => {
  console.log("page item clicked:", props.data);
};

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,
      backgroundImage: `url(${data.img})`,
      borderRadius: 15,
      transform: focused ? 'scale3d(1.1, 1.1, 1)' : 'scale3d(1, 1, 1)',
      transition: 'transform 0.2s',
    }"
  />
</template>
