<script setup>
import { sourceMap } from "./imageConfig";

import ChunLian, {
  initChunLianAnim,
  releaseChunLianAnim,
} from "./ChunLian.vue";
import Rain from "./Rain.vue";
import {
  LANTERN_LEFT_ANIM,
  LANTERN_RIGHT_ANIM,
  initLanternAnim,
  releaseLanternAnim,
} from "./LanternAnim";
import { buildBounce } from "./FreeMoveBuilder";

import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";

import { JsvPreload, buildPreloadInfo, JsvFreeMoveActor } from "jsview";

const sprayImageList = [
  sourceMap.particleCoin1,
  sourceMap.particleCoin2,
  sourceMap.particleCoin3,
  sourceMap.particleRedBag1,
  sourceMap.particleRedBag2,
];

const scrollImage = [sourceMap.scrollTop, sourceMap.scrollBottom];

const chunLianLeftRef = shallowRef();
const chunLianRightRef = shallowRef();
const rain1 = shallowRef();
const rain2 = shallowRef();

//初始化动画
initChunLianAnim();
initLanternAnim();

function chunLianOnAnimEnd() {
  startSnakeAnim();
}

//preload 逻辑
const keyPreloadInfo = [
  buildPreloadInfo(sourceMap.background),
  buildPreloadInfo(sourceMap.scrollTop),
  buildPreloadInfo(sourceMap.scrollBottom),
  buildPreloadInfo(sourceMap.textLeft),
  buildPreloadInfo(sourceMap.textRight),
];
let keyResourceLoaded = ref(false);
function onKeyPreloadDone() {
  keyResourceLoaded.value = true;
}

const rainPreloadInfo = [];
sprayImageList.forEach((item) => {
  rainPreloadInfo.push(buildPreloadInfo(item));
});
let rainLoaded = ref(false);
function onRainPreloadDone() {
  rainLoaded.value = true;
}

const showSnake = ref(false);
let rLeftSnakeRef = shallowRef(null);
let rRightSnakeRef = shallowRef(null);
let vLeftSnakeControl = null;
let vRightSnakeControl = null;
function startSnakeAnim() {
  showSnake.value = true;
  vLeftSnakeControl = rLeftSnakeRef.value.control;
  vLeftSnakeControl.run((cmds) => [
    ...buildBounce(cmds, 1, -400, -400, 7, 2.0, (state) => {}),
  ]);
  vRightSnakeControl = rRightSnakeRef.value.control;
  vRightSnakeControl.run((cmds) => [
    ...buildBounce(cmds, 1, 400, -400, 7, 2.0, (state) => {}),
  ]);
}
onMounted(() => {});

onBeforeUnmount(() => {
  releaseChunLianAnim();
  releaseLanternAnim();
});
</script>
<template>
  <jsv-preload
    :preloadList="keyPreloadInfo"
    :onPreloadDone="onKeyPreloadDone"
  ></jsv-preload>
  <jsv-preload
    v-if="keyResourceLoaded"
    :preloadList="rainPreloadInfo"
    :onPreloadDone="onRainPreloadDone"
  ></jsv-preload>

  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundImage: `url(${sourceMap.background})`,
    }"
  ></div>

  <div v-if="rainLoaded">
    <rain ref="rain1" :url-list="sprayImageList" />
    <div
      :style="{
        left: 1740,
      }"
    >
      <rain ref="rain2" :url-list="sprayImageList" />
    </div>
  </div>

  <div v-if="keyResourceLoaded">
    <div
      :style="{
        left: 180,
        top: 50,
      }"
    >
      <chun-lian
        ref="chunLianLeftRef"
        :is-left="true"
        :content-image="`url(${sourceMap.textLeft})`"
        :scroll-image="scrollImage"
        :onAnimEnd="chunLianOnAnimEnd"
      />
      <img
        :style="{
          left: 150,
          top: -30,
        }"
        :src="`url(${sourceMap.iconRedBag})`"
      />
    </div>
    <div
      :style="{
        left: 1475,
        top: 50,
      }"
    >
      <chun-lian
        ref="chunLianRightRef"
        :is-left="false"
        :content-image="`url(${sourceMap.textRight})`"
        :scroll-image="scrollImage"
      />
      <img
        :style="{
          left: 25,
          top: -10,
        }"
        :src="`url(${sourceMap.iconYuanBao})`"
      />
    </div>
  </div>

  <div v-if="keyResourceLoaded">
    <img
      :src="sourceMap.lanternLeft"
      :style="{
        top: 0,
        left: 0,
        width: 320,
        height: 320,
        animation: `${LANTERN_LEFT_ANIM} 12s infinite`,
      }"
    />
    <img
      :src="sourceMap.lanternRight"
      :style="{
        top: 0,
        left: 1650,
        width: 320,
        height: 320,
        animation: `${LANTERN_RIGHT_ANIM} 12s infinite`,
      }"
    />
  </div>

  <div v-show="showSnake">
    <JsvFreeMoveActor
      :top="690"
      :left="145"
      :width="320"
      :height="320"
      ref="rLeftSnakeRef"
    >
      <img
        :src="sourceMap.snakeLeft"
        :style="{
          width: 320,
          height: 320,
        }"
      />
    </JsvFreeMoveActor>
    <JsvFreeMoveActor
      :top="690"
      :left="1447"
      :width="320"
      :height="320"
      ref="rRightSnakeRef"
    >
      <img
        :src="sourceMap.snakeRight"
        :style="{
          width: 320,
          height: 320,
        }"
      />
    </JsvFreeMoveActor>
  </div>
</template>
