<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#0000FF' }">
    <div v-for="(item, index) in CenterSet">
      <SprayMove
        v-if="showArray[index]"
        :center="item.center"
        :color="item.color"
        :num="item.num"
      ></SprayMove>
    </div>
  </div>
</template>

<script setup>
import SprayMove from "./SprayMove.vue";
import { onMounted, reactive } from "vue";

//随机数(6-12)
const getRandomNumber = (min = 6, max = 12) => {
  const result = Math.floor(Math.random() * (max - min + 1)) + min;
  return result;
};
//组件配置
const CenterSet = [
  {
    center: { x: 100, y: 100 },
    num: getRandomNumber(),
    color: "#FFFF00",
  },
  {
    center: { x: 200, y: 500 },
    num: getRandomNumber(),
    color: "#00FF00",
  },
  {
    center: { x: 820, y: 200 },
    num: getRandomNumber(),
    color: "#FFA500",
  },
  {
    center: { x: 900, y: 500 },
    num: getRandomNumber(),
    color: "#FF0000",
  },
  {
    center: { x: 500, y: 320 },
    num: getRandomNumber(),
    color: "#FFFFFF",
  },
];
//定时器控制实现烟花绚烂效果
const showArray = reactive([]);
CenterSet.forEach((item, index) => {
  showArray.push(false);
});
showArray[0] = true;
console.log(showArray);

const timer = { id: -1 };

onMounted(() => {
  timer.id = setInterval(() => {
    const index = showArray.indexOf(false); // 找到第一个 false 的索引
    if (index !== -1) {
      showArray[index] = true; // 将第一个 false 改为 true
      console.log(showArray);
    } else {
      // 如果数组内所有的 false 都变为 true，清除定时器
      clearInterval(timer.id);
    }
  }, 1000); // 每 1.5 秒执行一次
});
</script>

<style lang="scss" scoped></style>
