<template>
  <metro-widget
    name="bounce"
    :left="widgetLayout.left"
    :top="widgetLayout.top"
    :width="widgetLayout.width"
    :height="widgetLayout.height"
    :provideData="provideData"
    :direction="HORIZONTAL"
    :measures="measures"
    :onEdge="onEdge"
    :padding="padding"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" :anim="animObj" />
    </template>
  </metro-widget>
</template>

<script setup>
import { onUnmounted } from "vue";
import { MetroWidget, HORIZONTAL } from "jsview";
import Item from "./Item.vue";
import { widgetLayout, padding, data } from "../CommonPageSetting";
import { getPosterAnim } from "../PosterAnim.js";

const animObj = {
  left: getPosterAnim("bounce-left", { level: "middle" }),
  right: getPosterAnim("bounce-right", { level: "middle" }),
  top: getPosterAnim("bounce-top", { level: "middle" }),
  bottom: getPosterAnim("bounce-bottom", { level: "middle" }),
};
const props = defineProps({
  onEdge: Function,
});
const provideData = () => {
  return data;
};

const measures = (data) => {
  return {
    width: data.width,
    height: data.height,
    marginRight: data.marginRight,
    marginBottom: data.marginBottom,
  };
};

onUnmounted(() => {
  for (let key in animObj) {
    animObj[key].release();
  }
});
</script>
