<script setup>
import { onMounted, onUnmounted, ref, computed } from "vue";
import { JsvFragShaderView } from "jsview";
import vortexShader from "./vortex.glsl?raw";
import pageFlipShader from "./pageFlip.glsl?raw";
import sdfShader from "./sdf.glsl?raw";
import gaussianBlurShader from "./gaussianBlur.glsl?raw";
// import testShader from "./test.glsl?raw";

const ImageChinChilla =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/BackgroundLongmao.jpg";
const ImageLandscape = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/landscape.jpeg";
const ImagePanda = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
const ImageOwl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";

const cShaderSettings = [
  {
    name: "vortex",
    shader: vortexShader,
    uniforms: [],
    textures: [
      {
        name: "iChannel0",
        resource: ImageOwl,
      },
    ],
    duration: 100000,
  },
  {
    name: "pageFlip",
    shader: pageFlipShader,
    uniforms: [],
    textures: [
      {
        name: "iChannel0",
        resource: ImageOwl,
      },
    ],
    duration: 500,
    onEnd: (id, status) => {
      if (status) {
        // 动画正常结束，而非cancel打断
        console.log("flip anim end");
        rShowShaderView.value = false;
      } else {
        console.log("flip anim cancel");
      }
    },
  },
  {
    name: "sdf",
    shader: sdfShader,
    uniforms: [],
    textures: [
      {
        name: "iChannel0",
        resource: ImageOwl,
      },
    ],
    duration: 100000,
  },
  // 高斯模糊性能太差，先不做推广
  {
    name: "gaussianBlur",
    shader: gaussianBlurShader,
    uniforms: [],
    textures: [
      {
        name: "iChannel0",
        resource: ImageOwl,
      },
    ],
    duration: 0,
  },
];

const rShowShaderView = ref(true);
const rKeyCount = ref(0);
const rShaderInfo = computed(() => {
  return cShaderSettings[rKeyCount.value];
});

const rAutoplay = computed(() => {
  return true;
});

const rWidgetRef = ref();
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37: {
      rShowShaderView.value = true;
      rKeyCount.value =
        rKeyCount.value > 0 ? rKeyCount.value - 1 : rKeyCount.value;
      return true;
    }
    case 39: {
      rShowShaderView.value = true;
      rKeyCount.value =
        rKeyCount.value < cShaderSettings.length - 1
          ? rKeyCount.value + 1
          : rKeyCount.value;
      return true;
    }
    case 13: {
      rShowShaderView.value = true;
      rWidgetRef.value?.startAnim();
      return true;
    }
    default:
      return false;
  }
};

onMounted(() => {
  window.JsvCoreApi.enableFpsDisplay(true);
});

onUnmounted(() => {
  window.JsvCoreApi.enableFpsDisplay(false);
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
    :style="{
      width: 1280,
      height: 720,
      backgroundImage: `url(${ImageChinChilla})`,
    }"
  ></jsv-focus-block>

  <jsv-frag-shader-view
    v-if="rShowShaderView"
    :key="rKeyCount"
    ref="rWidgetRef"
    :style="{ left: 0, top: 0, width: 1280, height: 720 }"
    :duration="rShaderInfo.duration"
    :shaderStr="rShaderInfo.shader"
    :autoplay="rAutoplay"
    :textures="rShaderInfo.textures"
    :onEnd="rShaderInfo.onEnd"
  ></jsv-frag-shader-view>
  <div
    :key="rKeyCount"
    :style="{
      top: 100,
      left: 20,
      width: 500,
      height: 50,
      fontSize: 30,
      backgroundColor: '#00000055',
      color: '#ffffff',
    }"
  >
    {{ rShaderInfo.name }}
  </div>
  <div
    :style="{
      top: 150,
      left: 20,
      width: 500,
      height: 50,
      fontSize: 30,
      backgroundColor: '#00000055',
      color: '#ffffff',
    }"
  >
    左右键切换效果, OK键重新播放
  </div>
</template>
