<template>
  <JsvPreload
    :preloadList="preload_info"
    :onPreloadDone="loadDone"
  ></JsvPreload>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="bgStyle">
      <div :style="{ width: 640, height: 360, backgroundImage: bg, top: 100 }">
        <JsvSceneTransition
          ref="control"
          v-show="isShow"
          :imageUrl="fly1"
          :ArraySet="SelectArray"
          :displayWidth="640"
          :style="style"
          :onOff="onOff"
        ></JsvSceneTransition>
      </div>
      <!-- 文字说明 -->
      <div class="textLong" :style="{ left: 20, top: 20 }">
        {{
          "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。"
        }}
      </div>
      <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
      <div class="text" :style="{ left: 400, top: 500 }">
        {{ "按需采用碎片式的图片来进行遮罩，此例只展示当前随机这组遮罩素材。" }}
      </div>
      <!-- 报错小框 -->
      <div v-if="boxSwitch" class="smallBox">
        <div class="text" :style="{ left: 50, top: 40 }">
          {{ "图片没预加载完成！" }}
        </div>
      </div>
      <!-- 素材展示 -->
      <div
        :style="{
          width: 320,
          height: 180,
          backgroundImage: fly1,
          top: 80,
          left: 700,
        }"
      ></div>
      <div
        :style="{
          width: 320,
          height: 180,
          backgroundImage: fly2,
          top: 280,
          left: 700,
        }"
      ></div>
      <div
        v-for="(item, index) in SelectArray"
        :style="{
          width: Math.round((item.width / 1280) * 320),
          height: Math.round((item.height / 720) * 180),
          backgroundImage: item.url,
          top: 500 + Math.round(((item.top * 1.05) / 720) * 180),
          left: 700 + Math.round(((item.left * 1.05) / 1280) * 320),
        }"
      ></div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { shallowRef, onBeforeUnmount } from "vue";
import { JsvPreload, buildPreloadInfo } from "jsview";
import JsvSceneTransition from "./JsvSceneTransition.vue";
import { ArraySet1 } from "./maskConfig/config1";
import { ArraySet2 } from "./maskConfig/config2";
import { ArraySet3 } from "./maskConfig/config3";

const fly1 =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/App/fly1.jpg";
const fly2 =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/App/fly2.jpg";
//预加载数组
const preload_info = [buildPreloadInfo(fly1), buildPreloadInfo(fly2)];

//三个配置数组分别添加自己的图片地址进行预加载
ArraySet1.forEach((item, index) => {
  preload_info.push(buildPreloadInfo(item.url));
});
ArraySet2.forEach((item, index) => {
  preload_info.push(buildPreloadInfo(item.url));
});
ArraySet3.forEach((item, index) => {
  preload_info.push(buildPreloadInfo(item.url));
});

//预加载完成标志
let isDone = shallowRef(false);
//小框显示标志
let boxSwitch = shallowRef(false);
//计时器
let timer = { id: -1 };
//预加载完成回调
const loadDone = () => {
  isDone.value = true;
};
const style = { width: 1280, height: 720 };
let isShow = shallowRef(false);
let bg = shallowRef(fly1);
let onOff = shallowRef(false);

//随机选择数组
const randomSelect = () => {
  let randomNum = Math.random();
  if (randomNum <= 0.33) {
    return ArraySet1;
  } else if (randomNum <= 0.66) {
    return ArraySet2;
  } else {
    return ArraySet3;
  }
};
const SelectArray = randomSelect();
let control = shallowRef(null);
let down = shallowRef(false);
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    //按方向键下，开始调用下垂运动状态的函数
    case 40:
      if (isDone.value == true && down.value == false) {
        bg.value = fly2;
        isShow.value = true;
        control.value.sag();
        down.value = true;
      } else if (isDone.value == false) {
        boxSwitch.value = true;
        timer.id = setTimeout(() => {
          boxSwitch.value = false;
        }, 1000);
      }
      return true;

    //按方向键上调用组件的恢复函数
    case 38:
      if (down.value == true) {
        control.value.fireNeEvent();
        down.value = false;
      }
      return true;
    default:
      break;
  }
};
//卸载时清除定时器
onBeforeUnmount(() => {
  if (timer.id) {
    clearTimeout(timer.id);
    timer.id = -1;
  }
});
</script>

<style scoped>
.text {
  width: 300;
  height: 80;
  color: #ffffff;
  font-weight: bold;
  line-height: 26;
  font-size: 24;
}
.textLong {
  width: 560;
  height: 80;
  color: #ffffff;
  font-weight: bold;
  line-height: 26;
  font-size: 24;
}
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.smallBox {
  width: 300;
  height: 100;
  left: 170;
  top: 230;
  border-radius: 20;
  background-color: #006400;
}
</style>
