<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/85bba0ce5a8113fe6331f335a4cfd7f7.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[1]">
            <image
              v-show="shouldShowContent(1)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/0bd899a27fdbaf8a2c314faaefd7c320.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view class="content-layer" v-show="shouldShowContent(1)">
              <image
                class="layer-img2"
                :class="{
                  hidden: !animationStates[1],
                  'fade-in': animationStates[1],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/70cb6f2efde536bdde781ae387529a5c.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
            </view>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[2]">
            <image
              v-show="shouldShowContent(2)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/cbe3db0c55a871383f86e34b781b5d33.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[3]">
            <image
              v-show="shouldShowContent(3)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/8499c31b1ed10693debd6e3eba37a841.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[4]">
            <image
              v-show="shouldShowContent(4)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/23fc62e1cd91bc373dbf7eb9e741721e.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[5]">
            <image
              v-show="shouldShowContent(5)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/863382a549c2d4e029c93eba5d040e96.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[6]">
            <image
              v-show="shouldShowContent(6)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/7a6bbf6e4d9cd869b94502bf9025caf1.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[7]">
            <image
              v-show="shouldShowContent(7)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/6f865d358eb9faf565bb0e63dd252a94.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view class="content-layer" v-show="shouldShowContent(7)">
              <image
                class="layer-img3"
                :class="{
                  hidden: !animationStates[7],
                  'fade-in': animationStates[7],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/13d7d6ad68f7171d48ef271c699fa333.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
              <image
                class="layer-img4"
                :class="{
                  hidden: !animationStates[7],
                  'fade-in': animationStates[7],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/dd49237235965bc83759e54ec895ce34.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
            </view>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[8]">
            <image
              v-show="shouldShowContent(8)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/c4ef978fd763848b01c5dec92c032bdb.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view class="content-layer" v-show="shouldShowContent(8)">
              <image
                class="layer-img5"
                :class="{
                  hidden: !animationStates[8],
                  'fade-in': animationStates[8],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/c3a669862cca14212b130d6eb90380d6.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
              <image
                class="layer-img6"
                :class="{
                  hidden: !animationStates[8],
                  'fade-in': animationStates[8],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/afbc088293603b16fa99b2c0c10ff275.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
            </view>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[9]">
            <image
              v-show="shouldShowContent(9)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/4b2090a566500b5d633448d8607b464c.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template>
            <image
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/703df90d52ea3461b0e9743f1ca2c942.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template>
            <image
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/8448d3d99435377157000780017a9540.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template>
            <view
              class=""
              style="width: 750rpx; height: 1400rpx; position: relative"
            >
              <image
                class="bg-image"
                :src="
                  showImg(
                    '/uploads/20250802/c6cec7ca05b3804d0d26b701b40ff9d6.png'
                  )
                "
                :lazy-load="true"
                mode="aspectFit"
              ></image>
              <view
                class=""
                style="
                  position: absolute;
                  bottom: 120rpx;
                  width: 546rpx;
                  left: 104rpx;
                  z-index: 9;
                "
              >
                <image
                  @click="navigateToPage('first')"
                  style="width: 260rpx; height: 50rpx"
                  :src="
                    showImg(
                      '/uploads/20250802/22d4d2a0b442aa8269b3c393cc1bc0fd.png'
                    )
                  "
                  :lazy-load="true"
                  mode="aspectFill"
                ></image>
                <image
                  @click="navigateToPage('second')"
                  style="width: 260rpx; height: 50rpx; margin-left: 26rpx"
                  :src="
                    showImg(
                      '/uploads/20250802/6579d29fbfc61c355bfee74775d9404f.png'
                    )
                  "
                  :lazy-load="true"
                  mode="aspectFill"
                ></image>
                <image
                  @click="navigateToPage('third')"
                  style="width: 260rpx; height: 50rpx; margin-top: 30rpx"
                  :src="
                    showImg(
                      '/uploads/20250802/19946ac0a0c6bdeae627d0d3a6fb3dbc.png'
                    )
                  "
                  :lazy-load="true"
                  mode="aspectFill"
                ></image>
                <image
                  @click="navigateToPage('fourth')"
                  style="
                    width: 260rpx;
                    height: 50rpx;
                    margin-left: 26rpx;
                    margin-top: 30rpx;
                  "
                  :src="
                    showImg(
                      '/uploads/20250802/7e0ce35e13fa118deaf70240357faf14.png'
                    )
                  "
                  :lazy-load="true"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
          </template>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import TitleHeader from "@/components/TitleHeader.vue";
export default {
  components: {
    TitleHeader,
  },
  data() {
    return {
      currentIndex: 0,
      loadedPages: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
        8: false,
        9: false,
        10: false,
      },
      animationStates: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
        8: false,
        9: false,
        10: 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/chapter3/chapter3",
      });
    },
    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",
      });
    },
    navigateToPage(pageName) {
      uni.navigateTo({
        url: `/pig/chapter4/${pageName}`,
      });
    },
  },
};
</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%;
  background-color: #efefef;
}

.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 {
  margin: 130rpx 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.layer-img3 {
  width: 327rpx;
  height: 270rpx;
  z-index: 2;
  position: absolute;
  top: 114rpx;
  left: 82rpx;
}

.layer-img2 {
  width: 696rpx;
  height: 302rpx;
  z-index: 2;
  position: absolute;
  top: 200rpx;
  left: 35rpx;
}

.layer-img4 {
  z-index: 2;
  width: 530rpx;
  height: 409rpx;
  bottom: 130rpx;
  left: 91rpx;
  position: absolute;
}

.layer-img5 {
  z-index: 2;
  position: absolute;
  top: 151rpx;
  left: 95rpx;
  width: 382rpx;
  height: 452rpx;
}

.layer-img6 {
  z-index: 2;
  position: absolute;
  bottom: 163rpx;
  left: 95rpx;
  width: 261rpx;
  height: 268rpx;
}

.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;
  }
}
</style>
