<script setup>
import { ref, shallowRef, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { JsvDriftScope, JsvNinePatch, JsvTextureStoreApi } from "jsview";

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);

// 设置设定模拟绘制.9图
let canvasRef;
let sourceId = null;
let sampleImageWidth = 90;
canvasRef = JsvTextureStoreApi.canvasTexture(
  sampleImageWidth,
  sampleImageWidth
); // 创建画布

let circleInnerDiameter = 70; // 环形内直径, 为所要包括图形的borderRadius的一倍
let circleLineWidth = 6; // 线宽
let circleRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 绘制线是圆圈的轨迹中线
let customPath = canvasRef.circlePath(
  Math.floor(sampleImageWidth / 2),
  Math.floor(sampleImageWidth / 2),
  circleRadius
); // 创建圆环绘制路径，圆形在画布的中心点位置
canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
sourceId = canvasRef.commit(); // texture和div的textureStore绑定

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(() => {
  JsvTextureStoreApi.deleteTexture(sourceId);
});
</script>
<template>
  <jsv-focus-block
    autoFocus
    :onKeyDown="onKeyDown"
    :style="{
      width: 1280,
      height: 720,
    }"
  >
    <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)',
      }"
    >
      透视镜效果,OK键进行随机位置+尺寸变换
    </div>

    <jsv-drift-scope
      :frameStyle="{
        left: left,
        top: top,
        transition: 'top 0.5s, left 0.5s',
        transfrom: 'rotate3d(0deg, 0deg, 30deg)',
      }"
      :scopeStyle="{
        width: width,
        height: height,
        transition: 'width 0.5s, height 0.5s',
      }"
    >
      <template #Frame>
        <div
          :style="{
            width: width,
            height: height,
            backgroundColor: 'rgba(0, 128, 128, 0.7)',
            transition: 'width 0.5s, height 0.5s',
          }"
        />
      </template>

      <template #Scene>
        <div
          :style="{
            width: 1280,
            height: 720,
            backgroundImage:
              'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DriftScopeTest/App/fly2.jpg',
          }"
        />
      </template>
    </jsv-drift-scope>
    <jsv-nine-patch
      :style="{
        left: left,
        top: top,
        width: width,
        height: height,
      }"
      :imageUrl="`jsvtexturestore://${sourceId}`"
      :imageWidth="sampleImageWidth"
      :centerWidth="2"
      :borderOutset="Math.floor((sampleImageWidth - circleInnerDiameter) / 2)"
      :animTime="500"
    />
  </jsv-focus-block>
</template>
