<template>
  <div :style="{ width: 1920, height: 1080, backgroundColor: '#F5F5DC' }"></div>
  <div
    :style="{
      left: (1280 - 600) / 2,
    }"
  >
    <bounce-page v-if="pageId == 0" :onEdge="pageOnEdge" />
    <shake-page v-else-if="pageId == 1" :onEdge="pageOnEdge" />
    <scale-page v-else-if="pageId == 2" :onEdge="pageOnEdge" />
    <breath-page v-else-if="pageId == 3" :onEdge="pageOnEdge" />
  </div>

  <div
    :style="{
      left: (1280 - 240) / 2,
      top: 400,
    }"
  >
    <metro-widget
      name="btn"
      :width="widgetLayout.width"
      :height="widgetLayout.height"
      :provideData="provideData"
      :direction="HORIZONTAL"
      :measures="measures"
      :onEdge="onEdge"
    >
      <template #renderItem="{ data, onAction, query }">
        <item
          :data="data"
          :onAction="onAction"
          :onItemFocus="onItemFocus"
          :query="query"
        />
      </template>
    </metro-widget>
    <div
      :style="{
        top: 60,
        fontSize: 25,
        color: '#000000',
      }"
    >
      切换动画
    </div>
  </div>
</template>

<script setup>
import BouncePage from "./Bounce/BouncePage.vue";
import ShakePage from "./Shake/ShakePage.vue";
import ScalePage from "./Scale/ScalePage.vue";
import BreathPage from "./Breath/BreathPage.vue";

import Item from "./Item.vue";
import { useFocusHub, MetroWidget, HORIZONTAL, EdgeDirection } from "jsview";
import { onMounted, ref } from "vue";

const focusHub = useFocusHub();

const pageId = ref(0);

const provideData = () => {
  const data = [];
  for (let i = 0; i < 4; ++i) {
    data.push({
      width: 50,
      height: 50,
      marginRight: 10,
      content: i,
    });
  }
  return data;
};

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

const pageOnEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.bottom) {
    focusHub.setFocus("btn");
  }
};
// callbacks
const onEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.top) {
    let name = null;
    switch (pageId.value) {
      case 0:
        name = "bounce";
        break;
      case 1:
        name = "shake";
        break;
      case 2:
        name = "scale";
        break;
      case 3:
        name = "breath";
        break;
    }
    if (name) focusHub.setFocus(name);
  }
};
const onItemFocus = (index) => {
  pageId.value = index;
};

const widgetLayout = {
  width: 500,
  height: 50,
};

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