<script setup>
/**
 * @file  Particle组件说明
 *   Particle：粒子装饰组件
 *       props说明:
 *           @prop {Object}         style      (必填)    组件的基础样式
 *           @prop {Array<String>}  imgArray   (必填)    传入的粒子数组,每个item是图片的url
 *
 */
import { JsvSpray } from "jsview";

const props = defineProps({
  style: { type: Object, require: true },
  imgArray: { type: Array,require: true},
});
//粒子图片数组
const ImgData = [];
//检查传入的imgArray格式
if (props.imgArray !== undefined) {
  if (Array.isArray(props.imgArray)) {
    props.imgArray.forEach((item, index) => {
      ImgData.push(item);
    });
  } else {
    console.warn("请传入正确的数组格式");
  }
} else {
  console.error("请传入图片数组");
}
//粒子特效配置
const sprayOk = {
  type: 1,
  particleNum: 5,
  deltaAngle: 0,
  deltaWidth: props.style.width / 2,
  deltaHeight: 1,
  pointSizeMin: 20,
  pointSizeMax: 30,
  speedMin: -3,
  speedMax: -5,
  lifeMin: 1500,
  lifeMax: 3000,
  accelerateX: 0,
  accelerateY: 0,
  particleAddSpeed: 0.002,
  angularVelocityMin: 10,
  angularVelocityMax: 15,
  enableFade: false,
  enableShrink: false,
};
</script>
<template>
  <div
    :style="{
      width: props.style.width,
      height: props.style.height,
      left: props.style.left,
      top: props.style.top,
      overflow: 'hidden',
    }"
  >
    <jsv-spray
      v-for="item in ImgData"
      :key="`item_${item}`"
      :pointRes="`url(${item})`"
      :sprayStyle="sprayOk"
      :ignoreClip="false"
    />
  </div>
</template>
<style scoped></style>
