<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 16:15:45
 * @Description: file content
-->
<script setup>
import { MetroWidget, HORIZONTAL, 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 widget1 = {
  provideData: () => {
    const data = [];
    for (let i = 0; i < 30; i++) {
      data.push({
        width: 90,
        height: 90,
        marginRight: 10,
        marginBottom: 10,
        color: randomColor(),
        content: i,
      });
    }
    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: 500,
    height: 200,
  },
};

const widget2 = {
  provideData: () => {
    const data = [];
    for (let i = 0; i < 30; i++) {
      const p = Math.floor(i / 3);
      let left, top;
      if (i % 3 == 0) {
        left = p * 200;
        top = 50;
      } else if (i % 3 == 1) {
        left = p * 200 + 100;
        top = 0;
      } else if (i % 3 == 2) {
        left = p * 200 + 100;
        top = 100;
      }
      data.push({
        left,
        top,
        width: 90,
        height: 90,
        marginRight: 10,
        marginBottom: 10,
        color: randomColor(),
        content: i,
      });
    }
    return data;
  },
  measures: (data) => {
    return {
      left: data.left,
      top: data.top,
      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: 500,
    height: 220,
  },
};

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"
  >
    <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"
    layoutType="absolute"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>