<template>
  <JsvPreload
    :preloadList="preload_info"
    :onPreloadDone="loadDone"
  ></JsvPreload>
  <JsvSpriteLoader
    :imageUrl="maroonResource.firecrackerPng"
    :configUrl="maroonResource.firecrackerJson"
    :onConfigReady="preloadCallback"
    :noNeedResource="false"
  >
    <slot v-if="sonFlag" />
  </JsvSpriteLoader>
</template>

<script setup>
import { shallowRef, watch, inject, provide } from "vue";
import { JsvPreload, buildPreloadInfo, JsvSpriteLoader } from "jsview";
import { _formatInfo } from "../Common/SpriteDeal";
const props = defineProps({
  top: Number,
  left: Number,
  deg: Number,
  controller: Object,
  myRef: Object,
});

const maroonResource = {
  star1:
    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/redStar.png",
  star2:
    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/yellowStar.png",
  star3:
    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/purpleStar.png",
  firecrackerPng:
    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/firecracker.png",
  firecrackerJson:
    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Banger/MaroonLoader/firecracker.json",
  firecrackerSet: {
    info: shallowRef(null),
    viewSize: shallowRef(null),
  },
};

//预加载
const preload_info = [
  buildPreloadInfo(maroonResource.start1),
  buildPreloadInfo(maroonResource.start2),
  buildPreloadInfo(maroonResource.start3),
  buildPreloadInfo(maroonResource.firecrackerPng),
];
let sonFlag = inject("sonFlag");

provide("maroonResource", maroonResource);

let readyNum = shallowRef(0);

const loadDone = (a) => {
  readyNum.value++;
};

const preloadCallback = (config_json, resolve_set) => {
  let sprite_info = _formatInfo(config_json);
  maroonResource.firecrackerSet.info.value = sprite_info.info;
  maroonResource.firecrackerSet.viewSize.value = {
    w: sprite_info.maxW,
    h: sprite_info.maxH,
  };
  resolve_set(); // 通知loader数组设置完成
  readyNum.value++;
};

//ref
watch(readyNum, (n, o) => {
  if (o != 2 && n == 2) {
    sonFlag.value = true;
  }
});
</script>

<style scoped></style>
