<script setup>
/**
 * @file  SprayMove组件说明
 *   prayMove: 烟花行进组件
 *       props说明:
 *           @prop {Object}         center       (必填)    中心点
 *           @prop {String}         color        (必填)    烟花颜色
 *           @prop {Number}         num          (必填)   烟花数量
 *
 */
import {
  JsvSpray,
  JsvFreeMoveActor,
  JsvTextureStoreApi,
  FreeMoveDef,
  FreeMoveFunc,
} from "jsview";
import { shallowRef, onMounted } from "vue";
const props = defineProps({
  color: { type: String, default: "#FFFFFF" },
  center: { type: Object, require: true },
  num: { type: Number, default: 12 },
});
console.log("props.num", props.num);

//画圆形
let canvasRef;
let sourceId = shallowRef("");
const bitmap = {
  width: 10,
  height: 10,
};
canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
let customPath = canvasRef.circlePath(5, 5, 4);
customPath.fill(props.color);
sourceId.value = canvasRef.commit();

//FreeMove
let actorRef = [];
const actEvents = FreeMoveDef.ActEventDefine;
let interactNexus = FreeMoveFunc.newNexus();
//粒子效果
const ImgData = [`jsvtexturestore://${sourceId.value}`];
const sprayBoom = {
  type: 0,
  particleNum: 500,
  deltaAngle: 180,
  deltaWidth: 10,
  deltaHeight: 10,
  pointSizeMin: 2,
  pointSizeMax: 5,
  speedMin: 0.5,
  speedMax: 3,
  lifeMin: 1000,
  lifeMax: 2000,
  accelerateX: 0,
  accelerateY: 0,
  enableFade: true,
  enableShrink: true,
};
const spraySet = {
  type: 1,
  particleNum: 50,
  deltaAngle: 20,
  deltaWidth: 5,
  deltaHeight: 5,
  pointSizeMin: 2,
  pointSizeMax: 5,
  speedMin: 0,
  speedMax: 0,
  lifeMin: 1000,
  lifeMax: 1500,
  accelerateX: 0,
  accelerateY: 0,
  particleAddSpeed: 0.05,
  enableFade: true,
  enableShrink: false,
  angularVelocityMin: 360,
  angularVelocityMax: 1440,
  alphaMin: 0.5,
  alphaMax: 1,
};
//控制整个组件的关闭
let show = shallowRef(true);
//动画处理
const move = () => {
  actorRef.forEach((item, index) => {
    item.control.run((cmds) => [
      cmds
        .action(0, 0, interactNexus)
        .setSpdAndAccel(2, undefined, -0.02, undefined, () => {}, null),
      cmds
        .condition()
        .onNexusEvent(interactNexus, actEvents.SpeedRevertX)
        .then([
          cmds.action().stopMoving(),
          () => {
            show.value = false;
          },
        ]),
    ]);
  });
};
onMounted(() => {
  move();
});
</script>
<template>
  <div v-if="show">
    <div
      :style="{
        top: props.center.y + 10,
        left: props.center.x + 10,
        width: 10,
        height: 10,
      }"
    >
      <jsv-spray
        v-for="item in ImgData"
        :pointRes="item"
        :sprayStyle="sprayBoom"
        :ignoreClip="true"
      />
    </div>
    <div
      v-for="(item, index) in props.num"
      :style="{
        top: props.center.y,
        left: props.center.x,
        width: 45,
        height: 45,
        transform: `rotate3d(0, 0, 1, ${(index * 360) / props.num}deg)`,
      }"
    >
      <jsv-free-move-actor
        :top="0"
        :left="0"
        :width="10"
        :height="10"
        :ref="(el) => (actorRef[index] = el)"
      >
        <div
          :style="{
            width: 10,
            height: 10,
            backgroundImage: `jsvtexturestore://${sourceId}`,
          }"
        >
          <div>
            <!-- 粒子效果 -->
            <div
              :style="{
                top: 0,
                left: -8,
                width: 10,
                height: 10,
              }"
            >
              <jsv-spray
                v-for="item in ImgData"
                :pointRes="item"
                :sprayStyle="spraySet"
                :ignoreClip="true"
              />
            </div>
          </div>
        </div>
      </jsv-free-move-actor>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
