<template>
  <view>
    <swiper
      class="main-swiper"
      :vertical="true"
      :current="currentIndex"
      @change="handleSwiperChange"
      :duration="300"
      :style="{ height: '100vh' }"
    >
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[0]">
            <image
              v-show="shouldShowContent(0)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/62434ca7ee6b6457ea158b1860527085.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
			<!-- 勇敢 -->
			<view class="content-layer" v-show="shouldShowContent(0)">
			  <image
			    @click="navigateToTag('brave')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
				style="width: 84rpx;height: 125rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/053baeec3ce0c8e9908571b0fc890348.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			  <!-- 神圣 -->
			  <image
			    @click="navigateToTag('sacred')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
			  								style="width: 84rpx;height: 125rpx;position: absolute;top: 70rpx;left: 400rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/39ce1cd11557c7e66ffa840fbc985d54.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			  <!-- 卑微 -->
			  <image
			    @click="navigateToTag('humble')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 230rpx;left: 200rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/ab5045d22d549c688e084096c85b9d05.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			  <!-- 艺术 -->
			  <image
			    @click="navigateToTag('art')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
			  						  	style="width: 84rpx;height: 125rpx;position: absolute;top: 430rpx;left: 420rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/a77fd06f3d03fa1254321b9549922875.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			  <!-- 聪明 -->
			  <image
			    @click="navigateToTag('smart')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 630rpx;left: -20rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/d6e520506579d431daebccd8563c8750.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			<!-- 笨 -->
			  <image
			    @click="navigateToTag('stupid')"
			    :class="{
			      hidden: !animationStates[0],
			      'fade-in': animationStates[0],
			      breathe: animationStates[0],
			    }"
			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 760rpx;left: 220rpx;"
			    :src="
			      showImg(
			        '/uploads/20250802/2ee7e6be3e5115fa0da7eb66fbcb54c8.png'
			      )
			    "
			    :lazy-load="true"
			    mode="widthFix"
			  ></image>
			</view>
          </template>
        </view>
      </swiper-item>
	  <swiper-item>
	    <view class="page-container">
	      <image
	        style="width: 100%; height: 100%"
	        :src="
	          showImg('/uploads/20250802/c21b01fea9610f8069a768f03a173b66.png')
	        "
	        mode="aspectFill"
	      ></image>
	      <image
	        @click="goChapter"
	        style="
	          width: 137rpx;
	          height: 108rpx;
	          position: absolute;
	          bottom: 125rpx;
	          left: 307rpx;
	        "
	        :src="
	          showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
	        "
	        mode="aspectFill"
	      ></image>
	    </view>
	  </swiper-item>
    </swiper>
    <!-- 侧边导航组件 -->
    <SideNav :currentIndex="6" />
	<MusicControl></MusicControl>
  </view>
</template>

<script>
import TitleHeader from "@/components/TitleHeader.vue";
import SideNav from "../components/SideNav.vue";
import MusicControl from "@/components/MusicControl.vue";
export default {
  components: {
    TitleHeader,
    SideNav,
	MusicControl
  },
  data() {
    return {
      currentIndex: 0,
      loadedPages: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      },
      animationStates: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      },
      preloadBuffer: 1,
      titleHeight: 0,
    };
  },
  watch: {
    currentIndex(newIndex) {
      for (
        let i = Math.max(0, newIndex - this.preloadBuffer);
        i <= Math.min(9, newIndex + this.preloadBuffer);
        i++
      ) {
        this.loadedPages[i] = true;
      }
    },
  },
  mounted() {
    this.titleHeight = uni.getStorageSync("titleHeight");
    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
      this.loadedPages[i] = true;
    }
    setTimeout(() => {
      this.animationStates[this.currentIndex] = true;
    }, 50);
  },
  methods: {
    goChapter() {
      uni.navigateTo({
        url: "/pig/chapter4/chapter4",
      });
    },
    handleSwiperChange(e) {
      const newIndex = e.detail.current;
      this.currentIndex = newIndex;
      this.animationStates[newIndex] = false;
      setTimeout(() => {
        this.animationStates[newIndex] = true;
      }, 50);
    },
    shouldShowContent(index) {
      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
    },
    goBack() {
      uni.navigateTo({
        url: "/taozi/home/home?targetIndex=5",
      });
    },
    navigateToTag(tagName) {
      uni.navigateTo({
        url: `/pig/chapter3/${tagName}`,
      });
    },
  },
};
</script>

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

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
}

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

.layer-img1 {
  width: 500rpx;
  z-index: 2;
  margin-right: 180rpx;
  margin-top: 50rpx;
}

.layer-img2 {
  z-index: 2;
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  height: 350rpx;
}

.content-layer {
  position: absolute;
  top: 245rpx;
  left: 115rpx;
  z-index: 9;
}

.layer-img3 {
  width: 118rpx;
  height: 69rpx;
  z-index: 2;
  position: absolute;
  top: 238rpx;
  right: 58rpx;
}
.layer-img2 {
  width: 696rpx;
  height: 302rpx;
  z-index: 2;
  position: absolute;
  top: 200rpx;
  left: 35rpx;
}

.layer-img4 {
  z-index: 2;
  width: 400rpx;
  height: 400rpx;
  margin-top: 400rpx;
  margin-left: 80rpx;
}

.layer-img5 {
  z-index: 2;
  position: absolute;
  bottom: 90rpx;
  right: 30rpx;
  width: 320rpx;
  height: 500rpx;
}

.back-btn {
  position: absolute;
  top: 50rpx;
  left: 50rpx;
  z-index: 2;
  background-color: rgb(0 0 0 / 0.3);
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 50rpx;
  height: 50rpx;
}

.hidden {
  opacity: 0;
}

.slide-in-from-left {
  animation: slideInLeft 1.2s ease-out forwards;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-from-right {
  animation: slideInRight 1.2s ease-out forwards;
}

.blink {
  animation: blink 1.5s infinite;
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.3;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.breathe {
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
</style>
