<!-- pages/home/home.vue -->
<template>
  <view>
    <BackButton />
    <swiper
      class="main-swiper"
      :vertical="true"
      :current="currentIndex"
      @change="handleSwiperChange"
      :duration="300"
    >
      <!-- 首页内容 -->
      <swiper-item>
        <view class="page-container home-page">
          <!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
          <template v-if="loadedPages[0]">
            <image
              v-show="shouldShowContent(0)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/index.gif"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(0)" class="content-layer">
              <image
                class="layer-img"
                src="https://static.ticket.sz-trip.com/epicSoul/home1.png"
                :lazy-load="true"
                mode="widthFix"
              ></image>
              <view class="arrow-content">
                <image
                  class="arrow-down"
                  src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 序章 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[1]">
            <image
              v-show="shouldShowContent(1)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/prologue-bg.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(1)" class="content-layer">
              <view class="layer-text">
                <view class=""> 在此我们邀请你 </view>
                <view class=""> 以指尖触发一场直抵情绪与美学的共生实验 </view>
              </view>
              <view class="arrow-content">
                <image
                  class="arrow-down"
                  src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 第一章封面 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[2]">
            <image
              v-show="shouldShowContent(2)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/covers.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(2)" class="content-layer">
              <image
                class="layer-img2"
                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png"
                :lazy-load="true"
                mode="widthFix"
              >
              </image>
              <view class="arrow-content">
                <image
                  @click="navigateToChapter1"
                  class="btn"
                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 第二章封面 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[3]">
            <image
              v-show="shouldShowContent(3)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(3)" class="content-layer">
              <image
                class="chapter2-bg-txt"
                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/bg-txt.png"
                :lazy-load="true"
                mode=""
              ></image>
              <view class="arrow-content chapter2-btn">
                <image
                  @click="navigateToChapter2"
                  class="btn"
                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/button.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 第三章封面 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[4]">
            <image
              v-show="shouldShowContent(4)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/cover.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(4)" class="content-layer">
              <image
                class="chapter3-bg-txt"
                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/bg-txt.png"
                :lazy-load="true"
                mode=""
              ></image>
              <view class="arrow-content chapter3-btn">
                <image
                  @click="navigateToChapter3"
                  class="btn"
                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 第四章封面 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[5]">
            <image
              v-show="shouldShowContent(5)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/covers.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view v-show="shouldShowContent(5)" class="content-layer">
              <!-- <image class="chapter4-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/bg-txt.png" :lazy-load="true" mode="widthFix"></image> -->
              <view class="chapter4-btn-content">
                <image
                  @click="ShareMoments"
                  class="chapter4-btn"
                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn.png"
                  :lazy-load="true"
                  mode=""
                ></image>
                <image
                  @click="navigateToChapter4"
                  class="chapter4-btn chapter4-btn2"
                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn2.png"
                  :lazy-load="true"
                  mode=""
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>

      <!-- 页脚1 -->
      <swiper-item>
        <view class="page-container home-page">
          <template v-if="loadedPages[6]">
            <image
              v-show="shouldShowContent(6)"
              class="bg-image"
              src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <image
              v-show="shouldShowContent(6)"
              class="qrCode-image"
              src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
              :lazy-load="true"
              mode="widthFix"
              :show-menu-by-longpress="true"
            ></image>
          </template>
        </view>
      </swiper-item>
    </swiper>
    <MusicControl />
    <AudioControl
      audioSrc="https://des.js-dyyj.com/data/2025/09/05/fac61c02-6cfd-41bf-9270-0ecd69881da2.MP3"
    />
    <ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
    <NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
  </view>
</template>

<script>
import AudioControl from "@/components/AudioControl.vue";
import ShareGuide from "@/components/ShareGuide.vue";
import MusicControl from "@/components/MusicControl.vue";
import NavMenu from "../components/NavMenu.vue";
export default {
  components: {
    ShareGuide,
    MusicControl,
    NavMenu,
    AudioControl,
  },
  onShareGuideClose() {
    console.log("分享引导已关闭");
  },
  shouldShowContent(index) {
    return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
  },
  handleSwiperChange(e) {
    this.currentIndex = e.detail.current;
  },
  navigateToChapter1() {
    uni.navigateTo({
      url: "/xxdf/chapter1/cover1",
    });
  },
  navigateToChapter2() {
    uni.navigateTo({
      url: "/xxdf/chapter2/cover",
    });
  },
  navigateToChapter3() {
    uni.navigateTo({
      url: "/xxdf/chapter3/cover",
    });
  },
  navigateToChapter4() {
    uni.navigateTo({
      url: "/xxdf/chapter4/cover",
    });
  },
  watch: {
    currentIndex(newIndex) {
      for (
        let i = Math.max(0, newIndex - this.preloadBuffer);
        i <= Math.min(6, newIndex + this.preloadBuffer);
        i++
      ) {
        this.loadedPages[i] = true;
      }
    },
  },
  mounted() {
    const app = getApp();
    app.updateMusicSrc(
      "https://static.ticket.sz-trip.com/epicSoul/comfort.mp3"
    );
    app.initBackgroundMusic(); // 初始化背景音乐
    uni.$bgMusic.play(); // 播放音乐
    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
      this.loadedPages[i] = true;
    }
  },
  onUnload() {
    uni.$bgMusic.pause(); // 停止音乐
  },
  onShow() {
    try {
      const app = getApp();
      if (
        app.globalData &&
        app.globalData.mainSliderIndex !== undefined &&
        app.globalData.mainSliderIndex !== 0
      ) {
        const newIndex = app.globalData.mainSliderIndex;
        setTimeout(() => {
          this.currentIndex = newIndex;
          app.globalData.mainSliderIndex = 0; // 重置
        }, 100);
      }
    } catch (error) {
      console.error("获取globalData失败:", error);
    }
  },
  // 微信分享配置
  // #ifdef MP-WEIXIN
  onShareAppMessage() {
    return {
      title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
      mpId: "wx8954209bb3ad489e",
      path: "/xxdf/home/home",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
    };
  },
  onShareTimeline() {
    return {
      title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
      query: "",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
    };
  },
  // #endif
};
</script>

<style scoped>
.main-swiper {
  width: 100%;
  height: 100vh;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.home-page {
  position: relative;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.qrCode-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 192rpx;
  margin: 0 auto;
  z-index: 2;
  width: 30vw;
}

/* 内容层样式 */
.content-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.layer-img {
  width: 100%;
  /* height: 80%; */
}

.layer-img2 {
  width: 90%;
  /* height: 88%; */
  margin-top: 18%;
}

.chapter2-bg-txt {
  width: 85%;
  height: 70%;
  margin-top: 24%;
}

.chapter3-bg-txt {
  width: 88%;
  height: 88%;
  margin-top: 16%;
}

.chapter4-bg-txt {
  width: 75%;
  /* height: 25%; */
  margin-top: 18%;
}

.layer-text {
  width: 100%;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 30rpx;
  color: #ffffff;
}

.layer-text view:last-child {
  margin-top: 20rpx;
}

.prologue-page {
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.chapter-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  text-align: center;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 80rpx;
  text-align: center;
}

.chapter-num {
  font-size: 36rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.chapter-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
  text-align: center;
}

.content {
  font-size: 32rpx;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 60rpx;
  max-width: 80%;
}

.btn-container {
  margin-bottom: 60rpx;
}

.enter-btn {
  background-color: #007aff;
  color: #ffffff;
  padding: 20rpx 60rpx;
  border-radius: 100rpx;
  font-size: 32rpx;
}

.arrow-content {
  width: 100%;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter2-btn {
  top: 75% !important;
}

.chapter3-btn {
  top: 48% !important;
}

.chapter4-btn-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0);
}

.chapter4-btn {
  width: 280rpx;
  height: 60rpx;
}

.chapter4-btn2 {
  margin-top: 20rpx;
}

.btn {
  width: 280rpx;
  height: 60rpx;
}

.arrow-down {
  width: 200rpx;
  height: 40rpx;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20rpx);
  }

  60% {
    transform: translateY(-10rpx);
  }
}
</style>
