<script setup>
import { defineProps } from "vue";
import { JsvTextureAnim, DECORATE_NINEPATCH_ALPHA_MIX } from "jsview";
import { BuildFrame } from "./FrameCanvasStore";
import mask from "./circleHaloMask.png";

const rProps = defineProps({
  // 旋转圈内的url，可以是import内容，也可以是https内容
  imageUrl: {
    type: String,
    require: true,
  },

  // 所包含区域的left, top, width, height
  left: {
    type: Number,
    default: 0,
  },
  top: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    require: true,
  },
  height: {
    type: Number,
    require: true,
  },

  // 所包含区域的圆角值borderRadius
  borderRadius: {
    type: Number,
    require: true,
  },

  // 焦点框的线宽
  lineWidth: {
    type: Number,
    require: true,
  },

  // 焦点框旋转一圈所用的时间
  oneCircleTime: {
    type: Number,
    default: 0.5, // 转一圈0.5秒
  },

  // 是否需要外发光光晕
  withHalo: {
    type: Boolean,
    default: false,
  },

  /**
   * 设置转盘的绘制覆盖区域
   * 注意texture的尺寸需要兼顾最大的view即可
   */
  maxViewSize: {
    type: Object, // { width: Number, height: Number },
    default: {
      width: 400,
      height: 400,
    },
  },
});

// 基础旋转动画
const cRotateAnimation =
  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";

/**
 * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
 */
// 设置设定模拟绘制.9图
const cFrameInfo = BuildFrame(rProps.borderRadius, rProps.lineWidth);

// 创建内边框(实心不发光部分)
const ninePatchDecorator1 = {
  type: DECORATE_NINEPATCH_ALPHA_MIX,
  url: `jsvtexturestore://${cFrameInfo.canvasSourceId}`,
  imageWidth: cFrameInfo.canvasWidth, // 等同于画布宽
  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
  borderOutset: cFrameInfo.borderOutset, // (画布 - 圆环内直径) / 2
  animTime: rProps.oneCircleTime,
};

/**
 * 导入右图的边缘光晕部分的遮罩
 */
// 外发光的圈的图片信息, 完全按照 circleHaloMask来配置
const cOriginPngInfo = {
  size: 160, // 图片尺寸
  radius: 56, // 图片中的圆的圆内半径
};
const cRectRadius = Math.floor(rProps.borderRadius + rProps.lineWidth); // 光环在描边之外，留出描边的宽度
const ninePatchDecorator2 = {
  type: DECORATE_NINEPATCH_ALPHA_MIX,
  url: `url(${mask})`,
  imageWidth: cOriginPngInfo.size,
  imageDspWidth: Math.floor(
    (cRectRadius / cOriginPngInfo.radius) * cOriginPngInfo.size
  ),
  centerWidth: 2,
  borderOutset: Math.floor(cOriginPngInfo.size / 2 - cOriginPngInfo.radius),
  animTime: rProps.oneCircleTime,
};

const texCoord = {
  width: rProps.maxViewSize.width,
  height: rProps.maxViewSize.height,
};
</script>
<template>
  <div>
    <!-- 光晕(halo)在下，实心区域在上 -->
    <jsv-texture-anim
      v-if="rProps.withHalo"
      :src="rProps.imageUrl"
      :left="rProps.left"
      :top="rProps.top"
      :width="rProps.width"
      :height="rProps.height"
      :texCoord="texCoord"
      :animation="cRotateAnimation"
      :duration="5000"
      :repeat="-1"
      :autoStart="true"
      :decorate="ninePatchDecorator2"
    ></jsv-texture-anim>
    <jsv-texture-anim
      :src="rProps.imageUrl"
      :left="rProps.left"
      :top="rProps.top"
      :width="rProps.width"
      :height="rProps.height"
      :texCoord="texCoord"
      :animation="cRotateAnimation"
      :duration="5000"
      :repeat="-1"
      :autoStart="true"
      :decorate="ninePatchDecorator1"
    ></jsv-texture-anim>
  </div>
</template>
