<!--
 * 【模块 export 内容】
 * JsvFilterView：黑白滤镜组件
 *      props说明:
 *          width   {int}   宽
 *          height  {int}   高
 *          left    {int}   left位置
 *          top     {int}   top位置
 *          filterType  {String}  滤镜设置:
 *                                null: 无滤镜
 *                                "gray-down": 黑白滤镜(公祭日滤镜)
-->
<script setup>
import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
import { shallowRef, ref } from "vue";
import { JsvRipple, JsvRippleShape } from "jsview";

import img from "../assets/jpegDemo.jpeg";

const rippleViewRef = shallowRef(null);

const imgUrl =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Ripple/App/colorful-blocks.jpg";

const genSource = () => {
  return [
    Math.round(Math.random() * 800),
    Math.round(Math.random() * 300),
    Math.round(Math.random() * 60 + 20),
  ];
};

const foucsIndex = ref(0);

const button1 = {
  left: 300,
  top: 300,
  width: 200,
  height: 100,
};
const button2 = {
  left: 600,
  top: 300,
  width: 200,
  height: 100,
};
const clamp = (min, max, num) => Math.min(Math.max(num, min), max);

let waveToken = -1;
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 13:
      const b = foucsIndex.value == 0 ? button1 : button2;
      rippleViewRef.value.addSource(
        Math.round(b.left + b.width / 2), //波中心的x
        Math.round(b.top + b.height / 2), // 波中心的y
        40, // 波的振幅
        {
          type: JsvRippleShape.RECTANGLE, // 波的类型, 圆角矩形波
          width: 200, // 矩形宽
          height: 100, //矩形高
          radius: 45, // 圆角半径
        },
        {
          timeDecay: 10, //时间衰减因子
          distanceDecay: 50, // 距离衰减因子
          speed: 100, // 波速 px/s
          frequency: 8, // 频率 次/s
          waveNum: 2, // 波的个数
        }
      );
      break;
    case 38:
      const p = genSource();
      rippleViewRef.value.addSource(
        ...p,
        {
          type: JsvRippleShape.CIRCLE,
        },
        {
          timeDecay: 3,
          distanceDecay: 8,
          speed: 100,
          frequency: 8,
          waveNum: 2,
        }
      );
      break;
    case 37:
      foucsIndex.value = clamp(0, 1, foucsIndex.value - 1);
      break;
    case 39:
      foucsIndex.value = clamp(0, 1, foucsIndex.value + 1);
      break;
    default:
      break;
  }
};
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
  ></jsv-focus-block>
  <jsv-ripple ref="rippleViewRef" :width="1280" :height="720">
    <div
      :style="{
        width: 1280,
        height: 720,
        backgroundImage: `url(${imgUrl})`,
      }"
    ></div>
    <div
      :style="{
        left: 50,
        top: 250,
        width: 200,
        height: 200,
        backgroundImage: `url(${imgUrl})`,
        animation: 'test-anim 1s infinite',
      }"
    ></div>

    <div
      :style="{
        left: 50,
        top: 50,
        width: 800,
        height: 50,
        backgroundColor: '#007788',
        fontSize: 27,
        lineHeight: 50,
        color: '#FFFFFF',
        textAlign: 'center',
      }"
    >
      按上键添加随机波纹, 最多同时存在5个
    </div>

    <div
      :style="{
        ...button1,
        backgroundColor: '#007788',
        borderRadius: 45,
        fontSize: 23,
        lineHeight: 50,
        textAlign: 'center',
        color: foucsIndex == 0 ? '#FF0000' : '#FFFFFF',
      }"
    >
      按键1
    </div>

    <div
      :style="{
        ...button2,
        backgroundColor: '#007788',
        borderRadius: 45,
        fontSize: 23,
        lineHeight: 50,
        textAlign: 'center',
        color: foucsIndex == 1 ? '#FF0000' : '#FFFFFF',
      }"
    >
      按键2
    </div>
  </jsv-ripple>
</template>

<style scoped>
@keyframes test-anim {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>
