<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="bgStyle">
      <!-- 春联效果 -->
      <div v-if="myIndex == 1">
        <MyCouplets
          :top="130"
          :left="200"
          :width="150"
          :animTime="1.5"
        ></MyCouplets>
        <!-- 素材1 滚轴图片 -->
        <div
          :style="{
            top: 100,
            left: 800,
            width: 210,
            height: 30,
            backgroundImage: scroll,
          }"
        ></div>
        <!-- 素材2 精灵图 -->
        <div
          :style="{
            top: 260,
            left: 800,
            width: 210,
            height: 120,
            backgroundImage: scrollPng,
          }"
        ></div>
        <!-- 素材3 春联图 -->
        <div
          :style="{
            top: 500,
            left: 880,
            width: 50,
            height: 200,
            backgroundImage: Couplets,
          }"
        ></div>
        <!-- 提示 -->
        <div
          class="text"
          :style="{ top: 40, left: 200, width: 150, height: 100 }"
        >
          {{ "春联效果" }}
        </div>
        <div
          class="text"
          :style="{ top: 40, left: 800, width: 210, height: 100 }"
        >
          {{ "上卷轴图片素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 200, left: 800, width: 210, height: 100 }"
        >
          {{ "下卷轴精灵图素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 440, left: 800, width: 210, height: 100 }"
        >
          {{ "主体图片素材" }}
        </div>
      </div>
      <!-- 鞭炮引线 第二页 -->
      <div v-else-if="myIndex == 2">
        <Banger
          :top="100"
          :left="200"
          :num="16"
          :leadWireTime="4"
          :width="100"
        ></Banger>
        <div
          class="text"
          :style="{ top: 40, left: 130, width: 150, height: 100 }"
        >
          {{ "炮仗效果" }}
        </div>
        <!-- 素材1 火花精灵图-->
        <div
          :style="{
            top: 100,
            left: 600,
            width: 210,
            height: 120,
            backgroundImage: sparkPng,
          }"
        ></div>
        <!-- 素材2 炮仗精灵图 -->
        <div
          :style="{
            top: 300,
            left: 600,
            width: 210,
            height: 120,
            backgroundImage: firecrackerPng,
          }"
        ></div>
        <!-- 素材3 引线图 -->
        <div
          :style="{
            top: 520,
            left: 650,
            width: 100,
            height: 150,
            backgroundImage: leadWire,
          }"
        ></div>
        <!-- 素材4 红色星星 -->
        <div
          :style="{
            top: 100,
            left: 900,
            width: 210,
            height: 120,
            backgroundImage: redStar,
          }"
        ></div>
        <!-- 素材5 黄色星星 -->
        <div
          :style="{
            top: 300,
            left: 900,
            width: 210,
            height: 120,
            backgroundImage: yellowStar,
          }"
        ></div>
        <!-- 素材6 紫色星星 -->
        <div
          :style="{
            top: 520,
            left: 900,
            width: 210,
            height: 120,
            backgroundImage: purpleStar,
          }"
        ></div>
        <!-- 说明  -->
        <div
          class="text"
          :style="{ top: 40, left: 600, width: 210, height: 100 }"
        >
          {{ "火花精灵图素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 240, left: 600, width: 210, height: 100 }"
        >
          {{ "鞭炮精灵图素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 460, left: 600, width: 210, height: 100 }"
        >
          {{ "引线图片素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 40, left: 900, width: 210, height: 100 }"
        >
          {{ "火花图片素材1" }}
        </div>
        <div
          class="text"
          :style="{ top: 240, left: 900, width: 210, height: 100 }"
        >
          {{ "火花图片素材2" }}
        </div>
        <div
          class="text"
          :style="{ top: 460, left: 900, width: 210, height: 100 }"
        >
          {{ "火花图片素材3" }}
        </div>
      </div>
      <div v-else>
        <Fireworks :top="600" :left="200" />
        <div
          class="text"
          :style="{ top: 40, left: 130, width: 150, height: 100 }"
        >
          {{ "烟花效果" }}
        </div>
        <!-- 素材1 精灵图-->
        <div
          :style="{
            top: 100,
            left: 600,
            width: 210,
            height: 120,
            backgroundImage: fireworksPng,
          }"
        ></div>
        <!-- 素材2 星星1 -->
        <div
          :style="{
            top: 100,
            left: 980,
            width: 50,
            height: 50,
            backgroundImage: star1,
          }"
        ></div>
        <!-- 素材3 星星2 -->
        <div
          :style="{
            top: 260,
            left: 980,
            width: 50,
            height: 50,
            backgroundImage: star2,
          }"
        ></div>
        <!-- 素材4 星星3 -->
        <div
          :style="{
            top: 420,
            left: 980,
            width: 50,
            height: 50,
            backgroundImage: star3,
          }"
        ></div>
        <!-- 素材5 星星4 -->
        <div
          :style="{
            top: 580,
            left: 980,
            width: 50,
            height: 50,
            backgroundImage: star4,
          }"
        ></div>
         <!-- 素材6 弹药素材-->
         <div
          :style="{
            top: 360,
            left: 680,
            width: 50,
            height: 50,
            backgroundImage: ammo,
          }"
        ></div>
        <!-- 文字说明 -->
        <div
          class="text"
          :style="{ top: 40, left: 600, width: 210, height: 100 }"
        >
          {{ "烟花精灵图素材" }}
        </div>
        <div
          class="text"
          :style="{ top: 40, left: 900, width: 210, height: 100 }"
        >
          {{ "火星图片素材1" }}
        </div>
        <div
          class="text"
          :style="{ top: 200, left: 900, width: 210, height: 100 }"
        >
          {{ "火星图片素材2" }}
        </div>
        <div
          class="text"
          :style="{ top: 360, left: 900, width: 210, height: 100 }"
        >
          {{ "火星图片素材3" }}
        </div>
        <div
          class="text"
          :style="{ top: 520, left: 900, width: 210, height: 100 }"
        >
          {{ "火星图片素材4" }}
        </div>
         <div
          class="text"
          :style="{top: 300, left: 600, width: 210, height: 100 }"
        >
          {{ "弹药图片素材" }}
        </div>
      </div>
      <!-- 翻页提示 -->
      <div
        class="text"
        :style="{ top: 680, left: 980, width: 300, height: 60 }"
      >
        {{ `当前 ${myIndex}/3 页` }}
      </div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { shallowRef } from "vue";
import Couplets from "./widget/images/Couplets.png";
import scrollPng from "./widget/Sprite/scroll.png";
import { _formatInfo } from "./widget/Common/SpriteDeal";
import scroll from "./widget/images/scroll1.png";
import MyCouplets from "./widget/Couplets/Couplets.vue";
import Fireworks from "./widget/Fireworks/Fireworks.vue";
import Banger from "./widget/Banger/Banger.vue";
import star1 from "./widget/images/star1.png";
import star2 from "./widget/images/star2.png";
import star3 from "./widget/images/star3.png";
import star4 from "./widget/images/star4.png";
import fireworksPng from "./widget/Sprite/fireworks.png";
import redStar from "./widget/images/redStar.png";
import yellowStar from "./widget/images/yellowStar.png";
import purpleStar from "./widget/images/purpleStar.png";
import firecrackerPng from "./widget/Sprite/firecracker.png";
import leadWire from "./widget/images/leadWire.png";
import sparkPng from "./widget/Sprite/spark.png";

const ammo =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/App/star2.png";
//页码
let myIndex = shallowRef(1);

//按键事件
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37:
      myIndex.value--;
      if (myIndex.value <= 1) {
        myIndex.value = 1;
      }
      break;
    case 39:
      myIndex.value++;
      if (myIndex.value >= 3) {
        myIndex.value = 3;
      }
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.text {
  font-size: 24;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  line-height: 32;
}
</style>
