<script setup>
import { ref, shallowRef, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import img from "./assets/blackWhiteTurntable.png";
import img2 from "./assets/light.png";
import { getDataUrl } from "../CommonUtils/ResourceData";
import RotateFrame from "./utils/RotateFrame.vue";
//无网络环境下使用
const DemoResourceBase = getDataUrl();

const getRandom = (start, end) => {
  return Math.round(Math.random() * (end - start) + start);
};

const router = useRouter();
const width = ref(300);
const height = ref(200);
const left = ref(50);
const top = ref(80);

const targetBorderRadius = 35;
const targetLineWidth = 2;
const texCoord = {
  width: 400,
  height: 400,
};

/**
 * 其他回调处理
 */
const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else if (ev.keyCode == 13) {
    left.value = getRandom(50, 400);
    top.value = getRandom(80, 200);
    width.value = getRandom(100, 300);
    height.value = getRandom(100, 300);
  }
  return true;
};

onBeforeUnmount(() => {});
</script>
<template>
  <jsv-focus-block
    autoFocus
    :onKeyDown="onKeyDown"
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: 'rgba(0,0,0,0.7)',
    }"
  >
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 140,
        top: 20,
        width: 1000,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
    </div>
    <div>
      <div
        :style="{
          left: left,
          top: top,
          width: width,
          height: height,
          backgroundColor: 'rgba(0, 255, 0, 0.7)',
          borderRadius: targetBorderRadius,
          fontSize: 30,
          lineHeight: height,
          textAlign: 'center',
        }"
      >
        {{ "带光晕的焦点框" }}
      </div>
      <rotate-frame
        :imageUrl="img"
        :left="left"
        :top="top"
        :width="width"
        :height="height"
        :maxViewSize="texCoord"
        :borderRadius="targetBorderRadius"
        :lineWidth="targetLineWidth"
        :withHalo="true"
      />
    </div>
  </jsv-focus-block>
</template>
