<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
  >
    <FlipPage
      ref="flipRef"
      :layout="{
        width: width,
        height: height,
      }"
      :time="1"
      :onAnimEnd="onAnimEnd"
      :initShow="true"
    >
      <img
        :src="`url(${imageUrl})`"
        :style="{
          width: width,
          height: height,
        }"
        @load="onImgLoaded"
      />
      <div
        :style="{
          width: 1280,
          height: 100,
          backgroundColor: '#ffffff44',
        }"
      ></div>
      <div
        :style="{
          width: width,
          height: height,
          fontSize: 50,
          color: '#fff',
          textAlign: 'center',
        }"
      >
        按OK键出场/入场
      </div>
    </FlipPage>
  </jsv-focus-block>
</template>
<script setup>
import FlipPage from "./FlipPage/FlipPage.vue";
import { shallowRef } from "vue";

const flipRef = shallowRef();
const width = 1280;
const height = 720;
const imageUrl =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";

let imgLoaded = false;
function onImgLoaded() {
  imgLoaded = true;
}
const onAnimEnd = () => {
  console.log("anim end");
};

function onKeyDown(ev) {
  if (ev.keyCode == 13) {
    if (imgLoaded) {
      flipRef.value.switch();
    }
    return true;
  }
  return false;
}
</script>
