<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:08
 * @Description: file content
-->
<script setup>
import {
  MetroWidget,
  HORIZONTAL,
  useFocusHub,
  JsvPreload,
  buildPreloadInfo,
} from "jsview";
import Item from "./Item.vue";
import { onMounted } from "vue";

const ironmanSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_small.png";
const ironmanLarge =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_large.png";
const spidermanSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_small.png";
const spidermanLarge =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_large.png";
const captainSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_small.png";
const captainLarge =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_large.png";

const focusHub = useFocusHub();

const data = [
  {
    width: 266,
    height: 266,
    marginRight: 20,
    smallImg: ironmanSmall,
    largeImg: ironmanLarge,
    largeWidth: 566,
    largeHeight: 566,
  },
  {
    width: 266,
    height: 266,
    marginRight: 20,
    smallImg: spidermanSmall,
    largeImg: spidermanLarge,
    largeWidth: 566,
    largeHeight: 566,
  },
  {
    width: 266,
    height: 266,
    marginRight: 20,
    smallImg: captainSmall,
    largeImg: captainLarge,
    largeWidth: 566,
    largeHeight: 566,
  },
];
const preloadList = [];
data.forEach((item) => {
  preloadList.push(buildPreloadInfo(item.smallImg));
  preloadList.push(buildPreloadInfo(item.largeImg));
});
const provideData = () => {
  return data;
};

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

const widgetLayout = {
  left: 200,
  top: 100,
  width: 1058,
  height: 266,
};

onMounted(() => {
  //组件mount后设置焦点
  focusHub.setFocus("mainMw");
});
</script>

<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  />
  <JsvPreload :preloadList="preloadList"></JsvPreload>

  <metro-widget
    name="mainMw"
    :left="widgetLayout.left"
    :top="widgetLayout.top"
    :width="widgetLayout.width"
    :height="widgetLayout.height"
    :provideData="provideData"
    :direction="HORIZONTAL"
    :measures="measures"
    :disableClip="true"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>
