<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 15:54:16
 * @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 data = [];
for (let i = 0; i < 30; i++) {
  data.push({
    width: 90,
    height: 90,
    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: 500,
    height: 200,
  },
};

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: 500,
    height: 220,
  },
  padding: {
    left: 10,
    top: 10,
    right: 10,
    bottom: 10,
  },
};

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: 500,
    height: 200,
  },
  padding: {
    left: 10,
    top: 10,
    right: 10,
    bottom: 10,
  },
};

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

<template>
  <div>
    <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',
      }"
    >
      {{ "未设置padding, 导致边缘放大的item显示不全. height为200" }}
    </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: 18,
        lineHeight: 22,
        color: '#FFFFFF',
      }"
    >
      {{
        "设置padding, 注意排布范围是height减去padding占用的范围,\n因此还需要排两行需要调大height, height=220"
      }}
    </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"
      :padding="widget2.padding"
    >
      <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',
      }"
    >
      {{ "设置padding, 但未调整组件尺寸, 导致只能排一行. height=200" }}
    </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"
      :padding="widget3.padding"
    >
      <template #renderItem="{ data, onAction }">
        <item :data="data" :onAction="onAction" />
      </template>
    </metro-widget>
  </div>
</template>