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

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

const focused = ref(false);
const showType = computed(() => {
  return focused.value ? "large" : "small";
});

// 注册回调
const onFocus = () => {
  focused.value = true;
};
const onBlur = () => {
  focused.value = false;
};
const onClick = () => {
  console.log("item onclick ", props.data);
};
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);
const posterSizeInfo = {
  width: props.data.width,
  height: props.data.height,
  largeWidth: props.data.largeWidth,
  largeHeight: props.data.largeHeight,
};

const largePos = { left: -props.data.width / 2 - 17, top: -161 };
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      transform: focused ? 'scale3d(1.1, 1.1, 1)' : 'scale3d(1, 1, 1)',
      transition: 'transform 0.3s',
    }"
  >
    <PosterOverflow :showType="showType" :largePos="largePos">
      <template #small>
        <img
          :src="`url(${data.smallImg})`"
          :style="{ width: data.width, height: data.height }"
        />
      </template>
      <template #large>
        <img
          :src="`url(${data.largeImg})`"
          :style="{ width: data.largeWidth, height: data.largeHeight }"
        />
      </template>
    </PosterOverflow>
  </div>
</template>
