<template>
  <div :key="keyNum">
    <jsv-frag-shader-view
      ref="rWidgetRef"
      :style="{ left: 100, top: 200, width: props.width, height: props.height }"
      :duration="rShaderInfo.duration"
      :shaderStr="rShaderInfo.shader.value"
      :autoplay="true"
      :textures="rShaderInfo.textures"
      :onEnd="rShaderInfo.onEnd"
    >
    </jsv-frag-shader-view>
    <div
      :style="{
        width: props.width,
        height: props.height,
        left: 100,
        top: 200,
      }"
    >
      <div
        :style="{
          width: 50,
          height: 50,
          left: myX * props.width - 25,
          top: props.height - (myY * props.height + 25),
          backgroundColor: '#FF1213',
        }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import vortexShader from "./vortex.glsl?raw";
import { shallowRef, computed, onMounted, onUnmounted } from "vue";
import { JsvFragShaderView } from "jsview";
const props = defineProps({
  width: { type: Number, require: true },
  height: { type: Number, require: true },
  imgUrl: { type: String, require: true },
  left: { type: Number, default: 0 },
  top: { type: Number, default: 0 },
});
//图片
const ImagePanda = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/tools/vortexPacker/Vortex/panda.jpeg";
//0-1的x和y的坐标值（初始为x和y的中心点）
let myX = 0.5;
let myY = 0.5;
let keyNum = shallowRef(0);
//ref
const rWidgetRef = shallowRef();
let vSTRENGTH = "10.";
//替换
let replacedShader = shallowRef(
  vortexShader
    .replace(/\$\{myCustomCenterX\}/g, myX)
    .replace(/\$\{myCustomCenterY\}/g, myY)
    .replace(/\$\{STRENGTH\}/g, vSTRENGTH)
);
console.log(9998, vortexShader);

//随机替换
const getRandomDecimal = () => {
  myX = 0.9;
  myY = 0.1;
  //根据x轴的位置确定转数
  if (myX >= 0.8 || myX <= 0.2) {
    console.log("很小或很大");
    vSTRENGTH = "40.";
  } else if (myX > 0.2 <= 0.4) {
    vSTRENGTH = "30.";
  } else if (myX >= 0.6 && myX < 0.8) {
    vSTRENGTH = "30.";
  } else if (myX > 0.4 && myX < 0.6) {
    vSTRENGTH = "10.";
  }

  replacedShader.value = vortexShader
    .replace(/\$\{myCustomCenterX\}/g, myX)
    .replace(/\$\{myCustomCenterY\}/g, myY)
    .replace(/\$\{STRENGTH\}/g, vSTRENGTH);
  keyNum.value += 1;
};
//接收外部设定中心点
const SetCenter = (x, y) => {
  myX = x;
  myY = y;
  replacedShader.value = vortexShader
    .replace(/\$\{myCustomCenterX\}/g, myX)
    .replace(/\$\{myCustomCenterY\}/g, myY);
  keyNum.value += 1;
};
//重新加载动画
const reloading1 = () => {
  rWidgetRef.value?.startAnim();
};
const rShowShaderView = shallowRef(true);
//配置
const cShaderSettings = {
  name: "vortex",
  shader: replacedShader,
  uniforms: [],
  textures: [
    {
      name: "iChannel0",
      resource: ImagePanda,
    },
  ],
  duration: 3000,
  onEnd: () => {
    console.log("flip anim end");
    rShowShaderView.value = false;
  },
};

const rShaderInfo = computed(() => {
  return cShaderSettings;
});
onMounted(() => {
  window.JsvCoreApi.enableFpsDisplay(true);
});

onUnmounted(() => {
  window.JsvCoreApi.enableFpsDisplay(false);
});
//向父组件暴露方法
defineExpose({
  getRandomDecimal,
  reloading1,
  SetCenter,
});
</script>

<style lang="scss" scoped></style>
