<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { HORIZONTAL, MetroWidget } from "jsview";
import FlipCard from "./FlipCard.vue";
import { data } from "./data.js";
import redEgg from "./assets/red_egg.png";
import blueEgg from "./assets/blue_egg.png";
import { useFocusHub } from "jsview";

const name = "/flipCard";
const focusNode = ref(null);
const router = useRouter();
const focusHub = useFocusHub();

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }

  return false;
};
const measures = (item) => {
  return {
    width: item.blocks.w,
    height: item.blocks.h,
    focusable: item.focusable,
    hasSub: item.hasSub,
  };
};
const onFocus = () => {
  focusHub.setFocus(name);
};
</script>

<template>
  <jsv-focus-block
    ref="focusNode"
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
      onFocus: onFocus,
    }"
  >
    <metro-widget
      :name="name"
      :width="1280"
      :height="720"
      :padding="{ left: 50, top: 100, right: 20, bottom: 20 }"
      :data="data"
      :direction="HORIZONTAL"
      :measures="measures"
    >
      <template #renderItem="{ data, query, onEdge, onAction }">
        <FlipCard
          :data="data"
          :query="query"
          :onEdge="onEdge"
          :onAction="onAction"
          :width="191"
          :height="252"
          :backImg="redEgg"
          :foreImg="blueEgg"
          :perspective="300"
          :initFlipped="false"
          :name="name + '/' + data.id"
        />
      </template>
    </metro-widget>
  </jsv-focus-block>
</template>
