<template>
  <view>
	  	  <BackButton />
    <swiper
      class="swiper"
      :current="currentIndex"
      :vertical="true"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(image, index) in swiperImages" :key="index">
        <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
          <!-- 仅在第四张图片添加子模块 -->
          <template v-if="index === 3">
            <image
              :src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${
                i + 1
              }.png`"
              v-for="i in 4"
              :key="i"
              :class="'module' + (i + 1)"
              :style="{ animationDelay: `${i * animationConfig.delay}s` }"
              @click="
                setStorage(i);
                gotoPath(`/bmzm/chapter1/index?index=${i + 1}`);
              "
            ></image>
          </template>
        </view>
      </swiper-item>
    </swiper>
    <MusicControl />
    <NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
    <AudioControl
      audioSrc="https://des.js-dyyj.com/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3"
    />
  </view>
</template>

<script>
import AudioControl from "@/components/AudioControl.vue";
import MusicControl from "@/components/MusicControl.vue";
import NavMenu from "../components/NavMenu.vue";
import BackButton from "@/components/BackButton.vue";
export default {
  components: {
    MusicControl,
    NavMenu,
    AudioControl,
	BackButton
  },
  data() {
    return {
      currentIndex: 0,
      swiperImages: [
        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif",
        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png",
        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png",
        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png",
      ],
      animationConfig: {
        delay: 0.5,
        duration: 3,
        keyframes: {
          start: 1,
          first: 0.8,
          second: 1.2,
          third: 0.9,
          end: 1.1,
        },
      },
    };
  },

  onShow() {
    uni.removeStorageSync("answerObj");
    const app = getApp();
    app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3");
    app.initBackgroundMusic(); // 初始化背景音乐
    uni.$bgMusic.play(); // 播放音乐
  },
  methods: {
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    // 存储答案，供后面使用
    setStorage(i) {
      let text = "";
      switch (i) {
        case 0:
          text = "月光白";
          break;
        case 1:
          text = "黎明青";
          break;
        case 2:
          text = "玄天黑";
          break;
        case 3:
          text = "胭脂红";
          break;
        default:
          break;
      }
      this.appendToStorage("answerObj", { answer1: text });
    },
  },
  // 微信分享配置
  // #ifdef MP-WEIXIN
  onShareAppMessage() {
    return {
      title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
      mpId: "wx9660f8c5776663e0",
      path: "/bmzm/home/home",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
    };
  },
  onShareTimeline() {
    return {
      title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
      query: "",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
    };
  },
  // #endif
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100vw;
  height: 100vh;
}

.swiper-item {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  position: relative;

  .module1 {
    position: absolute;
    width: 345.97rpx;
    height: 323.42rpx;
    top: 154rpx;
    left: 48rpx;
    animation: randomSize 3s infinite alternate;
  }
  .module2 {
    position: absolute;
    width: 271.11rpx;
    height: 293.67rpx;
    top: 276rpx;
    right: 36rpx;
    animation: randomSize 3s infinite alternate;
  }
  .module3 {
    position: absolute;
    width: 245.2rpx;
    height: 232.25rpx;
    top: 746rpx;
    left: 71rpx;
    animation: randomSize 3s infinite alternate;
  }
  .module4 {
    position: absolute;
    width: 293.19rpx;
    height: 270.15rpx;
    top: 605rpx;
    right: 115rpx;
    animation: randomSize 3s infinite alternate;
  }
}

.swiper-img {
  width: 100vw;
  height: 100vh;
}

@keyframes randomSize {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}
</style>
