<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#000000aa',
    }"
  ></div>
  <div
    :style="{
      top: 50,
      width: 1280,
      height: 100,
      fontSize: 30,
      color: '#ffffff',
      textAlign: 'center',
    }"
  >
    按OK键爆炸效果
  </div>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
  ></jsv-focus-block>
  <DropParticle
    :urlList="urlList"
    :layout="{
      width: 300,
      height: 720,
    }"
    numLevel="high"
    sprayLevel="middle"
  />

  <ExplodeParticle
    ref="explodeRef"
    :layout="{
      left: 615,
      top: 300,
      width: 10,
      height: 10,
    }"
    :urlList="urlList"
    numLevel="high"
  />
</template>

<script setup>
import DropParticle from "./Drop/DropParticle.vue";
import ExplodeParticle from "./Explode/ExplodeParticle.vue";
import { shallowRef } from "vue";

const star1 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/redStar.png";
const star2 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/yellowStar.png";
const star3 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/purpleStar.png";
const urlList = [star1, star2, star3];

const explodeRef = shallowRef();

function onKeyDown(ev) {
  if (ev.keyCode == 13) {
    explodeRef.value?.start();
    return true;
  }
  return false;
}
</script>
