<template>
  <jsv-free-move-actor
    :top="props.top"
    :left="props.left"
    :width="30"
    :height="60"
    ref="actorRef"
  >
    <div
      :style="{
        width: 30,
        height: 60,
      }"
    >
      <div
        :style="{
          width: 30,
          height: 40,
          transform: `rotate3d(0,0,1,${deg}deg) scale3d(${40 / view_size.w},${
            40 / view_size.w
          },1)`,
          transformOrigin: 'center center',
        }"
      >
        <!-- 炮仗图 -->
        <JsvSpriteAnim
          :spriteInfo="maroonResource.firecrackerSet.info.value"
          :loop="1"
          :duration="0.8"
          :imageUrl="maroonResource.firecrackerPng"
          :onAnimEnd="onAnimEnd"
          :ref="props.myRef"
        >
        </JsvSpriteAnim>
        <!-- 喷射粒子 -->
        <div
          v-if="isSpray"
          :style="{
            top: view_size.h / 2,
            left: view_size.w / 2,
            width: view_size.w,
            height: view_size.h,
          }"
        >
          <jsv-spray
            v-for="item in ImgData"
            :pointRes="`url(${item})`"
            :sprayStyle="sprayOk"
            :ignoreClip="true"
          />
        </div>
      </div>
    </div>
  </jsv-free-move-actor>
</template>

<script setup>
import { shallowRef, watch, inject, onMounted } from "vue";
import { JsvSpriteAnim, JsvSpray, JsvFreeMoveActor } from "jsview";
import { _formatInfo } from "../Common/SpriteDeal";
const props = defineProps({
  top: Number,
  left: Number,
  deg: Number,
  controller: Object,
  myRef: Object,
});

let maroonResource = inject("maroonResource");

let view_size = maroonResource.firecrackerSet.viewSize;

//FreeMove
let actorRef = shallowRef(null);
let actorControl;

let isShow = shallowRef(true);
let isSpray = shallowRef(false);
let deg = shallowRef(props.deg);

//动画处理
const fire = () => {
  props.myRef.value.start();
  actorControl.run((cmds) => [
    cmds.action().setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
    cmds
      .condition()
      .reachPosition(undefined, 280)
      .then([cmds.action().stopMoving()]),
  ]);
};

//粒子效果
const ImgData = [
  maroonResource.star1,
  maroonResource.star2,
  maroonResource.star3,
];
const sprayOk = {
  type: 0,
  particleNum: 100,
  deltaAngle: 360,
  deltaWidth: 20,
  deltaHeight: 20,
  pointSizeMin: 20,
  pointSizeMax: 30,
  speedMin: 1,
  speedMax: 7,
  lifeMin: 1000,
  lifeMax: 2000,
  accelerateX: 0,
  accelerateY: 0,
  enableFade: true,
  enableShrink: true,
};
//动画结束播放粒子效果
const onAnimEnd = () => {
  isShow.value = false;
  isSpray.value = true;
};
onMounted(() => {
  actorControl = actorRef.value.control;
});
defineExpose({ fire });
</script>

<style scoped></style>
