<script setup>
import { ref, shallowRef, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import {
  JsvTextureAnim,
  DECORATE_NINEPATCH_ALPHA_MIX,
  JsvTextureStoreApi,
} from "jsview";
import img from "./assets/blackWhiteTurntable.png";
import img2 from "./assets/light.png";
import mask from "./assets/circleHaloMask.png";
import { getDataUrl } from "../CommonUtils/ResourceData";
//无网络环境下使用
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 rotateAnimation =
  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";

/**
 * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
 */
// 设置设定模拟绘制.9图
let canvasRef;
let sourceId = shallowRef("");
let sampleImageWidth = 150;
canvasRef = JsvTextureStoreApi.canvasTexture(
  sampleImageWidth,
  sampleImageWidth
); // 创建画布

let circleInnerDiameter = 70; // 环形内直径, 为所要包括图形的borderRadius的一倍
let circleLineWidth = 2; // 线宽
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, "#000000FF"); // 以给定线宽绘制圆环
sourceId = canvasRef.commit(); // texture和div的textureStore绑定

// 通过canvas创建出来的 texture 创建NinePatch方式的蒙版
const ninePatchDecorator1 = {
  type: DECORATE_NINEPATCH_ALPHA_MIX,
  url: `jsvtexturestore://${sourceId}`,
  imageWidth: sampleImageWidth, // 等同于画布宽
  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
  borderOutset: Math.floor((sampleImageWidth - circleInnerDiameter) / 2), // (画布 - 圆环内直径) / 2
  animTime: 0.5,
};

/**
 * 导入右图的边缘光晕部分的遮罩
 */
// 外发光的圈的图片信息
const originPngInfo = {
  size: 160, // 图片尺寸
  radius: 56, // 图片中的圆的圆内半径
};
const rectRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 光环在描边之外，留出描边的宽度
const ninePatchDecorator2 = {
  type: DECORATE_NINEPATCH_ALPHA_MIX,
  url: `url(${mask})`,
  imageWidth: originPngInfo.size,
  imageDspWidth: Math.floor(
    (rectRadius / originPngInfo.radius) * originPngInfo.size
  ),
  centerWidth: 2,
  borderOutset: Math.floor(originPngInfo.size / 2 - originPngInfo.radius),
  animTime: 0.5,
};

/**
 * 设置敏感转盘的绘制覆盖区域
 */
//注意texture的尺寸需要兼顾最大的view
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(() => {
  JsvTextureStoreApi.deleteTexture(sourceId);
});
</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: Math.floor(circleInnerDiameter / 2),
          fontSize: 30,
          lineHeight: height,
          textAlign: 'center',
        }"
      >
        {{ "带光晕的焦点框" }}
      </div>
      <jsv-texture-anim
        :src="img"
        :left="left"
        :top="top"
        :width="width"
        :height="height"
        :texCoord="texCoord"
        :animation="rotateAnimation"
        :duration="5000"
        :repeat="-1"
        :autoStart="true"
        :decorate="ninePatchDecorator2"
      ></jsv-texture-anim>
      <jsv-texture-anim
        :src="img"
        :left="left"
        :top="top"
        :width="width"
        :height="height"
        :texCoord="texCoord"
        :animation="rotateAnimation"
        :duration="5000"
        :repeat="-1"
        :autoStart="true"
        :decorate="ninePatchDecorator1"
      ></jsv-texture-anim>
    </div>
    <div>
      <!-- <div
        :style="{
          left: left + 500,
          top: top,
          width: width,
          height: height,
          backgroundColor: 'rgba(0, 255, 0, 0.7)',
          borderRadius: rectRadius,
        }"
      /> -->
      <jsv-texture-anim
        :src="img2"
        :left="left + 500"
        :top="top"
        :width="width"
        :height="height"
        :texCoord="texCoord"
        :animation="rotateAnimation"
        :duration="3000"
        :repeat="-1"
        :autoStart="true"
        :decorate="ninePatchDecorator1"
      ></jsv-texture-anim>
    </div>
  </jsv-focus-block>
</template>
