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

const controller = ref(null);
const widget = ref(null);
const handler = {
  widget,
};
window.testWidget = widget;

const slideObj = {
  headRange: 0.5,
  tailRange: 0.5,
};
const defaultSlide = new SeamlessSlide(slideObj);

const slide1 = new SeamlessSlide({
  ...slideObj,
  boundaryProtect: SlideSetting.START_PROTECT,
});

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 dataNumber = 35;
const provideData = () => {
  const data = [];

  for (let i = 0; i < dataNumber; i++) {
    data.push({
      width: 90,
      height: 50,
      marginRight: 10,
      color: randomColor(),
      content: i,
    });
  }
  return data;
};

const measures = (data) => {
  return {
    width: data.width,
    height: data.height,
    marginRight: data.marginRight,
    marginBottom: data.marginBottom,
  };
};

// callbacks
const onEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.bottom) {
    controller.value?.setFocusId(widget.value?.getCurrentFocusIndex());
    focusHub.setFocus("myController");
  }
};

const onBlur = () => {
  widget.value?.setSlideSetting(slide1);
};

const onFocus = () => {
  widget.value?.setSlideSetting(null);
};

const widgetLayout = {
  left: 50,
  top: 100,
  width: 1000,
  height: 50,
};

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

<template>
  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  />
  <div
    :style="{
      top: 20,
      left: widgetLayout.left,
      width: widgetLayout.width * slideObj.headRange,
      height: 50,
      backgroundColor: '#FF0000AA',
      fontSize: 25,
      color: '#ffffff',
    }"
  >
    左键滚动区域
  </div>
  <div
    :style="{
      top: 20,
      left: widgetLayout.left + widgetLayout.width * slideObj.tailRange,
      width: widgetLayout.width * (1 - slideObj.tailRange),
      height: 50,
      backgroundColor: '#00FF00AA',
      fontSize: 25,
      color: '#ffffff',
    }"
  >
    右键滚动区域
  </div>
  <metro-widget
    ref="widget"
    name="mainMw"
    :left="widgetLayout.left"
    :top="widgetLayout.top"
    :width="widgetLayout.width"
    :height="widgetLayout.height"
    :provideData="provideData"
    :direction="HORIZONTAL"
    :measures="measures"
    :onEdge="onEdge"
    :onBlur="onBlur"
    :onFocus="onFocus"
    :slideSetting="defaultSlide"
  >
    <template #renderItem="{ data, onAction }">
      <item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <controller ref="controller" :number="dataNumber" :widgetHandler="handler" />
</template>
