<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 13:31:36
 * @Description: file content
-->
<script setup>
import {
  MetroWidget,
  VERTICAL,
  useFocusHub,
  METRO_WIDGET_CONST,
  FixPositionSlide,
} from "jsview";
import WidgetItem from "./WidgetItem.vue";
import { onMounted } from "vue";

const focusHub = useFocusHub();

const provideData = () => {
  const data = [];
  for (let i = 0; i < 10; i++) {
    data.push({
      width: 900,
      height: 650,
      name: "widget_" + i,
      marginBottom: 10,
      index: i,
    });
  }
  return data;
};

const s = new FixPositionSlide();
const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: item.marginRight,
    marginBottom: item.marginBottom,
    /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
    // itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
  };
};

onMounted(() => {
  focusHub.setFocus("mwWidget");
});
</script>

<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->

  <div
    :style="{
      textAlign: 'center',
      fontSize: 30,
      lineHeight: 50,
      color: '#ffffff',
      left: 60,
      top: 5,
      width: 1160,
      height: 50,
      backgroundColor: 'rgba(27,38,151,0.8)',
    }"
  >
    测试MetroWidget可视区域内项目过多时防卡顿时，盒子上的分段显示(上下翻一屏)
  </div>

  <metro-widget
    name="mwWidget"
    :top="62"
    :left="200"
    :width="1000"
    :height="650"
    :provideData="provideData"
    :padding="{ left: 30, right: 30 }"
    :direction="VERTICAL"
    :measures="measures"
    :slideSetting="s"
  >
    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
    <template #renderItem="{ data, onAction, onItemEdge }">
      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
    </template>
  </metro-widget>
</template>
