<!--
 * 【模块 export 内容】
 * Fireworks：放烟花组件
 *      props说明:
 *          left          {Number}   烟花Left位置
 *          top           {Number}   烟花Top位置 
 * 
-->
<template>
  <JsvPreload
    :preloadList="preload_info"
    :onPreloadDone="loadDone"
  ></JsvPreload>

  <JsvSpriteLoader
    :imageUrl="fireworksPng"
    :configUrl="fireworksJson"
    :onConfigReady="preloadCallback"
    :noNeedResource="false"
  >
    <div
      v-show="myShow"
      :style="{
        top: props.top,
        left: props.left,
        transform: `scale3d(${80 / view_size.w},${160 / view_size.h},1)`,
      }"
    >
      <div
        :style="{
          top: -170,
          left: -45,
        }"
      >
        <JsvSpriteAnim
          :spriteInfo="sprite_info.info"
          :loop="1"
          :duration="1"
          :imageUrl="fireworksPng"
          ref="myRef"
        >
        </JsvSpriteAnim>
      </div>
    </div>
  </JsvSpriteLoader>
  <!-- FreeMove -->
  <jsv-free-move-actor
    v-if="isShow"
    :top="props.top + 40"
    :left="props.left + 15"
    ref="actorRef"
    :width="8"
    :height="8"
  >
    <div
      :style="{
        width: 8,
        height: 8,
        backgroundImage: ammo,
      }"
    ></div>
  </jsv-free-move-actor>
  <!-- 粒子效果 -->
  <div
    v-if="isSpray"
    :style="{
      top: props.top - moveDistance + 20,
      left: props.left,
      width: 50,
      height: 50,
    }"
  >
    <jsv-spray
      v-for="item in ImgData1"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk"
      :ignoreClip="true"
    />
  </div>
  <div
    v-if="isSpray1"
    :style="{
      top: props.top - moveDistance + 80,
      left: props.left - 100,
      width: 50,
      height: 50,
    }"
  >
    <jsv-spray
      v-for="item in ImgData2"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk1"
      :ignoreClip="true"
    />
  </div>
  <div
    v-if="isSpray2"
    :style="{
      top: props.top - moveDistance + 80,
      left: props.left + 100,
      width: 50,
      height: 50,
    }"
  >
    <jsv-spray
      v-for="item in ImgData3"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk1"
      :ignoreClip="true"
    />
  </div>
  <div
    v-if="isSpray3"
    :style="{
      top: props.top - moveDistance - 80,
      left: props.left - 100,
      width: 50,
      height: 50,
    }"
  >
    <jsv-spray
      v-for="item in ImgData4"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk1"
      :ignoreClip="true"
    />
  </div>
  <div
    v-if="isSpray4"
    :style="{
      top: props.top - moveDistance - 80,
      left: props.left + 100,
      width: 50,
      height: 50,
    }"
  >
    <jsv-spray
      v-for="item in ImgData5"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk1"
      :ignoreClip="true"
    />
  </div>
</template>

<script setup>
import {
  JsvFreeMoveActor,
  JsvSpriteAnim,
  JsvSpray,
  JsvPreload,
  buildPreloadInfo,
  JsvSpriteLoader,
} from "jsview";
import { _formatInfo } from "./SpriteDeal";
import { shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
const props = defineProps({
  top: { type: Number, require: true },
  left: { type: Number, require: true },
  srcConfig: { type: Object, require: true },
});

//火花图片素材
const group1_1 = props.srcConfig.group1_1;
const group1_2 = props.srcConfig.group1_2;
const group2_1 = props.srcConfig.group2_1;
const group2_2 = props.srcConfig.group2_2;
const group3_1 = props.srcConfig.group3_1;
const group3_2 = props.srcConfig.group3_2;
const group4_1 = props.srcConfig.group4_1;
const group4_2 = props.srcConfig.group4_2;
const group5_1 = props.srcConfig.group5_1;
const group5_2 = props.srcConfig.group5_2;
//弹药图片素材(请按需修改)
const ammo = props.srcConfig.ammo;
//精灵图素材
const fireworksPng = props.srcConfig.fireworkSpriteSrc;
const fireworksJson = props.srcConfig.fireworkSpriteSrc + ".json";

//运动距离
let moveDistance = 260;
let sprite_info = shallowRef(null);
let view_size = shallowRef(null);
let isSpray = shallowRef(false);
let isSpray1 = shallowRef(false);
let isSpray2 = shallowRef(false);
let isSpray3 = shallowRef(false);
let isSpray4 = shallowRef(false);
//集中管理
const sprayArray = [isSpray1, isSpray2, isSpray3, isSpray4];
let isShow = shallowRef(true);
let actorRef = shallowRef(null);
let myShow = shallowRef(false);
let actorControl;
//随机顺序绽放函数
const spray = () => {
  timer.id2 = setTimeout(() => {
    let randomIndex = Math.floor(Math.random() * sprayArray.length);
    sprayArray[randomIndex].value = true;
    timer.id = setInterval(() => {
      let remainingItems = sprayArray.filter((item) => !item.value);
      if (remainingItems.length === 0) {
        clearInterval(timer.id);
        timer.id = -1;
      } else {
        randomIndex = Math.floor(Math.random() * remainingItems.length);
        remainingItems[randomIndex].value = true;
      }
    }, 100);
  }, 500);
};

//预加载
const preload_info = [
  buildPreloadInfo(group1_1),
  buildPreloadInfo(group1_2),
  buildPreloadInfo(group2_1),
  buildPreloadInfo(group2_2),
  buildPreloadInfo(group3_1),
  buildPreloadInfo(group3_2),
  buildPreloadInfo(group4_1),
  buildPreloadInfo(group4_2),
  buildPreloadInfo(group5_1),
  buildPreloadInfo(group5_2),
  buildPreloadInfo(fireworksPng),
  buildPreloadInfo(ammo),
];
let readyNum = shallowRef(0);
const loadDone = (a) => {
  readyNum.value++;
};
const preloadCallback = (config_json, resolve_set) => {
  sprite_info.value = _formatInfo(config_json);
  view_size.value = {
    w: sprite_info.value.maxW,
    h: sprite_info.value.maxH,
  };
  resolve_set(); // 通知loader数组设置完成
  readyNum.value++;
};
//定时器
let timer = { id: -1, id2: -1 };
//ref
let myRef = shallowRef(null);

// 建议：做粒子效果的图的像素尽量不超过 40 * 40
const sprayOk = {
  type: 0,
  particleNum: 60,
  deltaAngle: 180,
  deltaWidth: 20,
  deltaHeight: 40,
  pointSizeMin: 30,
  pointSizeMax: 50,
  speedMin: 1,
  speedMax: 7,
  lifeMin: 500,
  lifeMax: 800,
  accelerateX: 0,
  accelerateY: 0,
  enableFade: false,
  enableShrink: true,
};
const sprayOk1 = {
  type: 0,
  particleNum: 30,
  deltaAngle: 180,
  deltaWidth: 20,
  deltaHeight: 40,
  pointSizeMin: 30,
  pointSizeMax: 50,
  speedMin: 1,
  speedMax: 7,
  lifeMin: 1000,
  lifeMax: 2000,
  accelerateX: 0,
  accelerateY: -40,
  enableFade: false,
  enableShrink: false,
};
//颜色搭配
const group1 = [group1_1, group1_2];
const group2 = [group2_1, group2_2];
const group3 = [group3_1, group3_2];
const group4 = [group4_1, group4_2];
const group5 = [group5_1, group5_2];
let ImgData1;
let ImgData2;
let ImgData3;
let ImgData4;
let ImgData5;
const allGroup = [group1, group2, group3, group4, group5];
//随机烟花颜色设定
const remainingGroups = [...allGroup];
for (let i = 1; i <= 5; i++) {
  const randomIndex = Math.floor(Math.random() * remainingGroups.length);
  const selectedGroup = remainingGroups[randomIndex];
  switch (i) {
    case 1:
      ImgData1 = selectedGroup;
      break;
    case 2:
      ImgData2 = selectedGroup;
      break;
    case 3:
      ImgData3 = selectedGroup;
      break;
    case 4:
      ImgData4 = selectedGroup;
      break;
    case 5:
      ImgData5 = selectedGroup;
      break;
  }

  remainingGroups.splice(randomIndex, 1);
}

watch(readyNum, (n, o) => {
  if (o != 2 && n == 2) {
    myShow.value = true;
    timer.id2 = setTimeout(() => {
      myRef.value.start();

      actorControl.run((cmds) => [
        cmds
          .condition()
          .onNextTick(2)
          .then([
            cmds.action().setSpeed(undefined, -9),
            cmds.action(3).setAccel(undefined, 0.13),
          ]),
        cmds
          .condition()
          .reachPosition(undefined, -moveDistance)
          .then([
            cmds.action().stopMoving(),
            () => {
              isSpray.value = true;
              isShow.value = false;
              spray();
            },
          ]),
      ]);
    }, 0);
  }
});

onMounted(() => {
  actorControl = actorRef.value.control;
});
onBeforeUnmount(() => {
  clearTimeout(timer.id2);
  timer.id2 = -1;
});
</script>

<style scoped></style>
