<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 13:31:36
 * @Description: file content
-->
<script setup>
import {
  MetroWidget,
  VERTICAL,
  useFocusHub,
  JsvNinePatch,
  METRO_WIDGET_CONST,
} from "jsview";
import { onMounted, reactive, provide } from "vue";
import PageRow from "./PageRow.vue";
import focusImg from "../../assets/focus1.png";

const focusHub = useFocusHub();

const focusSize = reactive({
  width: 0,
  height: 0,
  left: 0,
  top: 0,
});
provide("focusSize", focusSize);

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

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' }">
    <div
      :style="{
        left: 100,
        top: 20,
        width: 800,
        height: 400,
        fontSize: 30,
        color: '#FFFFFF',
      }"
    >
      {{ "一个带焦点移动的简单页面示例" }}
    </div>
    <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
    <metro-widget
      name="mwWidget"
      :top="80"
      :left="50"
      :width="660"
      :height="600"
      :provideData="provideData"
      :padding="{ left: 30, right: 30 }"
      :direction="VERTICAL"
      :measures="measures"
    >
      <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
      <template #renderItem="{ data, onAction, onItemEdge }">
        <page-row :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
      </template>
    </metro-widget>
    <jsv-nine-patch
      :style="{
        width: focusSize.width,
        height: focusSize.height,
        top: focusSize.top,
        left: focusSize.left,
      }"
      :imageUrl="focusImg"
      :imageWidth="55"
      :centerWidth="1"
      :borderOutset="13"
      :imageDspWidth="55"
      :animTime="0.2"
      :waitForInit="true"
    ></jsv-nine-patch>
  </div>
</template>