<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 15:54:16
 * @Description: file content
-->
<script setup>
import {
  MetroWidget,
  HORIZONTAL,
  useFocusHub,
  EdgeDirection,
  SeamlessSlide,
  WholePageSlide,
  FixPositionSlide,
} from "jsview";
import Item from "./Item.vue";
import { onMounted } from "vue";

const TAG = "MetroWidgetDemo";

const focusHub = useFocusHub();

const randomColor = () => {
  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
  return (
    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
  );
};

const data = [];
for (let i = 0; i < 30; i++) {
  data.push({
    width: 60,
    height: 60,
    marginRight: 10,
    marginBottom: 10,
    color: randomColor(),
    content: i,
  });
}

const widget1 = {
  provideData: () => {
    return data;
  },
  measures: (data) => {
    return {
      width: data.width,
      height: data.height,
      marginRight: data.marginRight,
      marginBottom: data.marginBottom,
    };
  },
  onEdge: (edgeInfo) => {
    if (edgeInfo.direction == EdgeDirection.bottom) {
      focusHub.setFocus("widget2");
    }
  },
  widgetLayout: {
    left: 50,
    top: 50,
    width: 350,
    height: 140,
  },
  slideSetting: new SeamlessSlide({
    startPercent: 0.2,
    endPercent: 0.8,
  }),
};

const widget2 = {
  provideData: () => {
    return data;
  },
  measures: (data) => {
    return {
      width: data.width,
      height: data.height,
      marginRight: data.marginRight,
      marginBottom: data.marginBottom,
    };
  },
  onEdge: (edgeInfo) => {
    if (edgeInfo.direction == EdgeDirection.top) {
      focusHub.setFocus("widget1");
    } else if (edgeInfo.direction == EdgeDirection.bottom) {
      focusHub.setFocus("widget3");
    }
  },
  widgetLayout: {
    left: 50,
    top: 300,
    width: 350,
    height: 160,
  },
  slideSetting: new WholePageSlide(),
};

const widget3 = {
  provideData: () => {
    return data;
  },
  measures: (data) => {
    return {
      width: data.width,
      height: data.height,
      marginRight: data.marginRight,
      marginBottom: data.marginBottom,
    };
  },
  onEdge: (edgeInfo) => {
    if (edgeInfo.direction == EdgeDirection.top) {
      focusHub.setFocus("widget2");
    }
  },
  widgetLayout: {
    left: 50,
    top: 550,
    width: 350,
    height: 140,
  },
  slideSetting: new FixPositionSlide({ fixPercent: 0.5 }),
};

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

<template>
  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  />
  <div
    :style="{
      left: widget1.widgetLayout.left,
      top: widget1.widgetLayout.top - 50,
      width: 1280,
      height: 50,
      fontSize: 20,
      color: '#FFFFFF',
    }"
  >
    {{ "无缝滚动" }}
  </div>
  <metro-widget
    name="widget1"
    :left="widget1.widgetLayout.left"
    :top="widget1.widgetLayout.top"
    :width="widget1.widgetLayout.width"
    :height="widget1.widgetLayout.height"
    :provideData="widget1.provideData"
    :measures="widget1.measures"
    :onEdge="widget1.onEdge"
    :direction="HORIZONTAL"
    :slideSetting="widget1.slideSetting"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <div
    :style="{
      left: widget2.widgetLayout.left,
      top: widget2.widgetLayout.top - 50,
      width: 1280,
      height: 50,
      fontSize: 20,
      color: '#FFFFFF',
    }"
  >
    {{ "翻页" }}
  </div>
  <metro-widget
    name="widget2"
    :left="widget2.widgetLayout.left"
    :top="widget2.widgetLayout.top"
    :width="widget2.widgetLayout.width"
    :height="widget2.widgetLayout.height"
    :provideData="widget2.provideData"
    :measures="widget2.measures"
    :onEdge="widget2.onEdge"
    :direction="HORIZONTAL"
    :slideSetting="widget2.slideSetting"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <div
    :style="{
      left: widget3.widgetLayout.left,
      top: widget3.widgetLayout.top - 50,
      width: 1280,
      height: 50,
      fontSize: 20,
      color: '#FFFFFF',
    }"
  >
    {{ "焦点固定位置" }}
  </div>
  <metro-widget
    name="widget3"
    :left="widget3.widgetLayout.left"
    :top="widget3.widgetLayout.top"
    :width="widget3.widgetLayout.width"
    :height="widget3.widgetLayout.height"
    :provideData="widget3.provideData"
    :measures="widget3.measures"
    :onEdge="widget3.onEdge"
    :direction="HORIZONTAL"
    :slideSetting="widget3.slideSetting"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>