<script setup>
import { onMounted, onUnmounted, ref, computed, shallowRef } from "vue";
import Vortex from "./tools/vortexPacker/Vortex.vue";
import Genie from "./tools/geniePakcer/Genie.vue";
import particlePacker from "./tools/particlePacker/Particle.vue";
import orange from "./images/orange.png";
import pink from "./images/pink.png";
import red from "./images/red.png";
import yellowGreen from "./images/yellowGreen.png";
import blue from "./images/blue.png";
import darkGreen from "./images/darkGreen.png";
import purple from "./images/purple.png";
//particle特效图片素材
const ImgData = [orange, pink, red, yellowGreen, blue, darkGreen, purple];

const ImageChinChilla =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/BackgroundLongmao.jpg";
const ImageLandscape = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/landscape.jpeg";
const ImageOwl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/owl.jpeg";
//旋涡子组件的引用
const cChildRef1 = ref(null);
//genie子组件的引用
const cChildRef2 = ref(null);
const cShaderSettings = [
  {
    name: "vortex",
    text: "左右键切换效果，【OK】键随机焦点开始",
  },
  {
    name: "genie",
    text: "【OK】键进行收或放。上下键切换样例点",
  },
  {
    name: "particle",
    text: "左右键切换效果 遮罩粒子组件",
  },
];

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

//genie组件测试数组（14个）
//index
let rPositionIndex = shallowRef(0);
//key值
let rKey = shallowRef(1);
//数组
const cPositionArray = [
  { x: -80, y: -60, direction: "horizontal" }, //左上横向
  { x: -80, y: -60, direction: "vertical" }, //左上纵向
  { x: 280, y: -60, direction: "vertical" }, //正上
  { x: 1080, y: -60, direction: "horizontal" }, //右上横向
  { x: 1080, y: -60, direction: "vertical" }, //右上纵向
  { x: -80, y: 270, direction: "horizontal" }, //正左
  { x: 1080, y: 270, direction: "horizontal" }, //正右
  { x: -80, y: 600, direction: "horizontal" }, //左下横向
  { x: -80, y: 600, direction: "vertical" }, //左下纵向
  { x: 280, y: 600, direction: "vertical" }, //正下
  { x: 1080, y: 600, direction: "horizontal" }, //右下横向
  { x: 1080, y: 600, direction: "vertical" }, //右下纵向
  { x: 200, y: 200, direction: "vertical" }, //内部纵向
  { x: 700, y: 500, direction: "horizontal" }, //内部横向
];
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37: {
      rKeyCount.value =
        rKeyCount.value > 1 ? rKeyCount.value - 1 : rKeyCount.value;
      return true;
    }
    case 39: {
      rKeyCount.value =
        rKeyCount.value < cShaderSettings.length - 1
          ? rKeyCount.value + 1
          : rKeyCount.value;
      return true;
    }
    case 13: {
      if (rKeyCount.value == 0) {
        cChildRef1.value.getRandomDecimal();
      } else {
        cChildRef2.value.switcher();
      }

      return true;
    }
    case 38: {
      if (rKeyCount.value == 1) {
        rPositionIndex.value =
          rPositionIndex.value == 0 ? 0 : (rPositionIndex.value -= 1);
        rKey.value += 1;
        console.log(rPositionIndex.value);
      }
      return true;
    }
    case 40: {
      if (rKeyCount.value == 1) {
        rPositionIndex.value =
          rPositionIndex.value == cPositionArray.length - 1
            ? cPositionArray.length - 1
            : (rPositionIndex.value += 1);
        rKey.value += 1;
        console.log(rPositionIndex.value);
      }
      return true;
    }
    default:
      return false;
  }
};
const myEnd = () => {
  console.log("动画结束");
};
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>
  <Vortex
    v-if="rKeyCount == 0"
    ref="cChildRef1"
    :width="640"
    :height="360"
  ></Vortex>
  <Genie
    :key="rKey"
    v-else-if="rKeyCount == 1"
    ref="cChildRef2"
    :width="1024"
    :height="576"
    :left="128"
    :top="72"
    :direction="cPositionArray[rPositionIndex].direction"
    :position="cPositionArray[rPositionIndex]"
    :time="1"
    :imgUrl="ImageLandscape"
    :aniEnd="myEnd"
    :initShow="true"
  ></Genie>
  <div v-else>
    <div
      :style="{
        width: 600,
        height: 300,
        top: 210,
        left: 340,
        backgroundImage: ImageOwl,
      }"
    ></div>
    <particlePacker
      :style="{
        width: 600,
        height: 300,
        top: 210,
        left: 340,
      }"
      :imgArray="ImgData"
    >
    </particlePacker>
  </div>

  <div
    :key="rKeyCount"
    :style="{
      top: 100,
      left: 20,
      width: 560,
      height: 50,
      fontSize: 30,
      backgroundColor: '#00000055',
      color: '#ffffff',
    }"
  >
    {{ `${rShaderInfo.name}(${rPositionIndex})` }}
  </div>
  <div
    :style="{
      top: 150,
      left: 20,
      width: 560,
      height: 50,
      fontSize: 30,
      backgroundColor: '#00000055',
      color: '#ffffff',
    }"
  >
    {{ rShaderInfo.text }}
  </div>
</template>
