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

const cGenieRef = shallowRef();
const position = { x: -80, y: 600 };
const width = 1024;
const height = 576;
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) {
      cGenieRef.value.switch();
    }
    return true;
  }
  return false;
}
</script>
