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

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: 90,
    height: 90,
    marginRight: 10,
    marginBottom: 10,
    color: randomColor(),
    content: i,
  });
}

const horizontalWidget = {
  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: 300,
    height: 200,
  },
};

const verticalWidget = {
  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");
    }
  },
  widgetLayout: {
    left: 50,
    top: 300,
    width: 200,
    height: 300,
  },
};

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

<template>
  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  />
  <div
    :style="{
      left: 50,
      width: 1280,
      height: 50,
      fontSize: 25,
      color: '#FFFFFF',
    }"
  >
    {{ "HORIZONTAL: 向右延伸. 排列顺序从上往下, 从左往右" }}
  </div>
  <metro-widget
    name="widget1"
    :left="horizontalWidget.widgetLayout.left"
    :top="horizontalWidget.widgetLayout.top"
    :width="horizontalWidget.widgetLayout.width"
    :height="horizontalWidget.widgetLayout.height"
    :provideData="horizontalWidget.provideData"
    :measures="horizontalWidget.measures"
    :onEdge="horizontalWidget.onEdge"
    :direction="HORIZONTAL"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <div
    :style="{
      left: 50,
      top: 250,
      width: 1280,
      height: 50,
      fontSize: 25,
      color: '#FFFFFF',
    }"
  >
    {{ "VERTICAL: 向下延伸. 排列顺序从左往右, 从上往下" }}
  </div>
  <metro-widget
    name="widget2"
    :left="verticalWidget.widgetLayout.left"
    :top="verticalWidget.widgetLayout.top"
    :width="verticalWidget.widgetLayout.width"
    :height="verticalWidget.widgetLayout.height"
    :provideData="verticalWidget.provideData"
    :measures="verticalWidget.measures"
    :onEdge="verticalWidget.onEdge"
    :direction="VERTICAL"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>