<template>
  <div
    v-if="token > 0"
    :key="token"
    :style="{
      left: layout.left,
      top: layout.top,
      // width: layout.width,
      // height: layout.height,
      // backgroundColor: '#99000099'
    }"
  >
    <jsv-spray
      v-for="(url, index) in urlList"
      :key="index"
      :pointRes="`url(${url})`"
      :sprayStyle="sprayStyle"
      :ignoreClip="true"
    />
  </div>
</template>

<script setup>
import { JsvSpray } from "jsview";
import { shallowRef, computed } from "vue";

const props = defineProps({
  layout: {
    type: Object,
    requreid: true,
  },
  urlList: {
    type: Array,
    required: true,
  },
  numLevel: {
    type: String,
    default: "middle",
  },
});

const token = shallowRef(0);

/* 三个级别的粒子总个数:
    low: 50个
    middle: 150个,
    high: 400个
*/
function getTotalParticleNum() {
  switch (props.numLevel) {
    case "low":
      return 50;
    case "high":
      return 150;
    default:
      400;
  }
}

const particleNum = computed(() => {
  let totalNum;
  switch (props.numLevel) {
    case "low":
      totalNum = 50;
      break;
    case "high":
      totalNum = 400;
      break;
    default:
      totalNum = 150;
      break;
  }
  return Math.round(totalNum / props.urlList.length);
});

let sprayStyle = {
  type: 0,
  particleNum: particleNum.value,
  deltaAngle: 180,
  deltaWidth: Math.round(props.layout.width / 2),
  deltaHeight: Math.round(props.layout.height / 2),
  pointSizeMin: 50,
  pointSizeMax: 100,
  speedMin: 4,
  speedMax: 10,
  lifeMin: 1000,
  lifeMax: 2000,
  accelerateX: 0,
  accelerateY: 0,
  enableFade: true,
  enableShrink: true,
};

defineExpose({
  start() {
    ++token.value;
  },
});
</script>
