<template>
  <jsv-focus-block autoFocus :onAction="{ onKeyDown }">
    <Ripple
      ref="rippleRef"
      :layout="{
        left: 320,
        top: 200,
        width: 640,
        height: 360,
      }"
    >
      <div
        :style="{ width: 640, height: 360, backgroundImage: `url(${bg})` }"
      ></div>
    </Ripple>
    <div
      :style="{
        width: 640,
        height: 50,
        left: 320,
        top: 100,
        fontSize: 30,
        backgroundColor: '#ffffff77',
        textAlign: 'center',
      }"
    >
      按OK键生成波纹
    </div>
  </jsv-focus-block>
</template>

<script setup>
import Ripple from "./Ripple.vue";
import { shallowRef } from "vue";
const bg =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_bg.jpg";

const rippleRef = shallowRef();
const onKeyDown = (ev) => {
  if (ev.keyCode == 13) {
    const left = Math.round(Math.random() * 500 + 70);
    const top = Math.round(Math.random() * 300 + 30);
    rippleRef.value?.addRipple(
      {
        left,
        top,
      },
      4000
    );
    return true;
  }
  return false;
};
</script>
