<template>
  <metro-widget
    name="breath"
    :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="anim" />
    </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.js";
import { getPosterAnim } from "../PosterAnim.js";

const anim = getPosterAnim("breath", { scale: 1.05 });
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(() => {
  anim.release();
});
</script>
