<template>
  <div
    v-if="show"
    :style="{
      left: layout.left,
      top: layout.top,
      width: layout.width,
      height: layout.height,
      overflow: 'hidden',
    }"
  >
    <div
      v-for="(item, index) in list1"
      :key="`item_${index}`"
      :style="{
        top: item.pos,
      }"
    >
      <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
    </div>
    <div v-if="showSceond">
      <div
        v-for="(item, index) in list2"
        :key="`item_${index}`"
        :style="{
          top: item.pos,
        }"
      >
        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
      </div>
    </div>
    <div v-if="showThird">
      <div
        v-for="(item, index) in list3"
        :key="`item_${index}`"
        :style="{
          top: item.pos,
        }"
      >
        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { JsvSpray } from "jsview";
import { ref, onBeforeUnmount, onMounted } from "vue";

const props = defineProps({
  urlList: {
    type: Array,
    required: true,
  },
  autoStart: {
    type: Boolean,
    default: true,
  },
  layout: {
    type: Object,
    required: true,
  },
  // low, middle, high
  numLevel: {
    type: String,
    default: "middle",
  },
  sprayLevel: {
    type: String,
    default: "middle",
  },
});

//获取一个随机顺序
function getRandomOrder(numbers) {
  let currentIndex = numbers.length,
    temporaryValue,
    randomIndex;
  // 从数组的最后一个元素开始，向前遍历
  while (currentIndex !== 0) {
    // 选取一个随机索引
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // 交换当前索引和随机索引处的元素
    temporaryValue = numbers[currentIndex];
    numbers[currentIndex] = numbers[randomIndex];
    numbers[randomIndex] = temporaryValue;
  }

  return numbers;
}

const levelToIndex = (level) => {
  switch (level) {
    case "low":
      return 0;
    case "high":
      return 2;
    default:
      return 1;
  }
};
const levelConfig = {
  addSpeed: [0.001, 0.01, 0.1],
  number: [10, 50, 100],
};

//目前版本的粒子生成有问题, 会在一开始就集中出现, 所以要随机拉开几个JsvSpray的位置
const positionRange = [-50, -100];
const step = (positionRange[1] - positionRange[0]) / props.urlList.length;
const urls = getRandomOrder(props.urlList);
const sprayInfos = [];
for (let i = 0; i < urls.length; ++i) {
  sprayInfos.push({
    url: urls[i],
    pos: positionRange[0] + step * i,
    config: {
      type: 1,
      particleNum: Math.round(
        levelConfig.number[levelToIndex(props.numLevel)] / props.urlList.length
      ),
      deltaAngle: 0,
      deltaWidth: Math.round(props.layout.width / 2),
      deltaHeight: 1,
      pointSizeMin: 90,
      pointSizeMax: 120,
      speedMin: -10,
      speedMax: -15,
      lifeMin: 3500 + i * 200,
      lifeMax: 4000 + i * 200,
      accelerateX: 0,
      accelerateY: 0,
      particleAddSpeed: levelConfig.addSpeed[levelToIndex(props.sprayLevel)],
      angularVelocityMin: 10,
      angularVelocityMax: 15,
      enableFade: false,
      enableShrink: false,
    },
  });
}

//粒子数量少的时候, 添加有bug, 为了规避此处分成三拨开始
let showSceond = ref(false);
let showThird = ref(false);

let list1 = sprayInfos.slice(0, 1);
let list2 = sprayInfos.slice(1, 3);
let list3 = sprayInfos.slice(3);

let show = ref(false);
let timeoutHandler = -1;
function start() {
  show.value = true;
  timeoutHandler = setTimeout(() => {
    showSceond.value = true;
    timeoutHandler = setTimeout(() => {
      showThird.value = true;
    }, 700);
  }, 700);
}

onMounted(() => {
  if (props.autoStart) {
    start();
  }
});

onBeforeUnmount(() => {
  clearTimeout(timeoutHandler);
});

defineExpose({
  start,
});
</script>
