<template>
  <JsvPreload :preloadList="preload_info"></JsvPreload>
  <metro-widget
    name="swipeLight"
    :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" :lightImg="swipLight" />
    </template>
  </metro-widget>
</template>

<script setup>
import { MetroWidget, HORIZONTAL, JsvPreload, buildPreloadInfo } from "jsview";
import Item from "./Item.vue";
import { widgetLayout, padding, data } from "../CommonPageSetting";

const props = defineProps({
  onEdge: Function,
});
const swipLight = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/SwipeLight/SwipeLightPage/swipLight.png";
const preload_info = [buildPreloadInfo(swipLight)];

const provideData = () => {
  return data;
};

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