<template>
  <JsvAudio
    key="AudioBg"
    :src="musicBg"
    :loop="true"
    :onRef="onRef"
    :onLoad="audioOnLoad"
  />
  <JsvRipple :width="1280" :height="720" ref="rippleViewRef">
    <jsv-focus-block autoFocus>
      <img
        :src="bg"
        :style="{ width: 1280, height: 720 }"
        :onLoad="funcBackgroundOnLoaded"
      />
      <div
        :style="{
          width: 100,
          height: 100,
          backgroundImage: title,
          left: 900,
          top: 40,
        }"
      ></div>
      <!-- 随机位置和长度的雨滴 -->
      <Rain v-for="(item, index) in 60" />
      <!-- 波纹效果 -->
    </jsv-focus-block>
  </JsvRipple>
</template>

<script setup>
import Rain from "./Rain.vue";
import { JsvRipple, JsvRippleShape, JsvAudio, JsvSoundPool } from "jsview";
import { shallowRef, onMounted, onBeforeUnmount } from "vue";
const bg =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_bg.jpg";
const title =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_title.png";
const musicBg =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_background.mp3";
let timer = { id: -1, id2: -1 };
const soundPool = new JsvSoundPool(10);
let rippleViewRef = shallowRef(null);
const genSource = () => {
  let leftOrRight = Math.random() >= 0.5 ? true : false;
  if (leftOrRight) {
    return [
      Math.floor(Math.random() * (336 - 214 + 1)) + 214,
      Math.round(Math.random() * 200 + 400),
      Math.round(Math.random() * 100 + 20),
    ];
  } else {
    return [
      Math.floor(Math.random() * (1066 - 960 + 1)) + 960,
      Math.round(Math.random() * 200 + 400),
      Math.round(Math.random() * 100 + 20),
    ];
  }
};
//背景音频ref
let _BgAudio = null;
//水波音效
const mySound =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_tiktok.mp3";
//音效ref
let mySoundControl = null;
//音效回调
soundPool.request(`url(${mySound})`, null, 1, (state, audioController) => {
  if (state === 0) {
    mySoundControl = audioController;
  }
});
//音频回调
const onRef = (ref) => {
  _BgAudio = ref;
};
const audioOnLoad = () => {
  console.log("audio on load");
  _BgAudio.play();
};

let backgrounLoaded = false;
const funcBackgroundOnLoaded = () => {
  backgrounLoaded = true;
  console.log("bg image loaded");
};

onMounted(() => {
  if (rippleViewRef.value !== null) {
    timer.id = setInterval(() => {
      if (backgrounLoaded) {
        // 图片加载完成后再追加波纹，规避绘出黑色的波圈
        const p = genSource();
        rippleViewRef.value.addSource(
          ...p,
          {
            type: JsvRippleShape.CIRCLE,
          },
          {
            timeDecay: 0.5,
            distanceDecay: 8,
            speed: 60,
            frequency: 2,
            waveNum: 2,
          }
        );

        timer.id2 = setTimeout(() => {
          mySoundControl.play();
        }, 1000);
      }
    }, 3000);
  }
});
onBeforeUnmount(() => {
  if (timer.id !== -1) {
    clearInterval(timer.id);
    timer.id = -1;
  }
  if (timer.id2 !== -1) {
    clearTimeout(timer.id2);
    timer.id2 = -1;
  }
  soundPool.destroy();
  _BgAudio?.pause();
  _BgAudio?.unload();
});
</script>

<style scoped></style>
