<template>
  <view class="test-page">
    <view class="page-header">
      <text class="title">纵向轮播测试</text>
      <text class="subtitle">验证循环动画连续性</text>
    </view>

    <!-- 3个项目的轮播测试 -->
    <view class="test-section">
      <text class="section-title">3项轮播测试 (重点测试循环)</text>
      <simple-vertical-swiper
        :items="threeItems"
        type="text"
        :height="60"
        :autoplay="true"
        :interval="2000"
        :show-indicators="true"
        @change="onThreeItemsChange"
      />
      <text class="tip">观察从第3项到第1项的动画是否平滑</text>
    </view>

    <!-- 4个项目的轮播测试 -->
    <view class="test-section">
      <text class="section-title">4项轮播测试</text>
      <simple-vertical-swiper
        :items="fourItems"
        type="notice"
        :height="50"
        :autoplay="true"
        :interval="1800"
        :show-indicators="true"
        @change="onFourItemsChange"
      />
    </view>

    <!-- 5个项目的轮播测试 -->
    <view class="test-section">
      <text class="section-title">5项轮播测试</text>
      <simple-vertical-swiper
        :items="fiveItems"
        type="content"
        :height="80"
        :autoplay="true"
        :interval="2200"
        :show-indicators="true"
        @change="onFiveItemsChange"
      />
    </view>

    <!-- 手动控制按钮 -->
    <view class="control-section">
      <text class="section-title">手动控制测试</text>
      <simple-vertical-swiper
        ref="manualSwiper"
        :items="threeItems"
        type="text"
        :height="60"
        :autoplay="false"
        :show-indicators="true"
        @change="onManualChange"
      />
      <view class="control-buttons">
        <button @click="prevSlide" class="control-btn">上一页</button>
        <button @click="nextSlide" class="control-btn">下一页</button>
        <button @click="goToFirst" class="control-btn">第1页</button>
        <button @click="goToLast" class="control-btn">最后页</button>
      </view>
    </view>

    <!-- 当前状态显示 -->
    <view class="status-section">
      <text class="section-title">状态信息</text>
      <text class="status-text">3项轮播当前索引: {{ currentIndex.three }}</text>
      <text class="status-text">4项轮播当前索引: {{ currentIndex.four }}</text>
      <text class="status-text">5项轮播当前索引: {{ currentIndex.five }}</text>
      <text class="status-text"
        >手动轮播当前索引: {{ currentIndex.manual }}</text
      >
    </view>
  </view>
</template>

<script>
import SimpleVerticalSwiper from '@/components/simple-vertical-swiper.vue'

export default {
  name: 'TestSwiper',
  components: {
    SimpleVerticalSwiper,
  },
  data() {
    return {
      // 3项测试数据 - 重点测试循环
      threeItems: [
        '🎯 第1项 - 测试到第3项',
        '🎨 第2项 - 中间项目',
        '🎪 第3项 - 测试到第1项',
      ],
      // 4项测试数据
      fourItems: [
        { content: '🌟 公告1 - 欢迎使用轮播组件' },
        { content: '🎁 公告2 - 新功能上线啦' },
        { content: '🚀 公告3 - 性能全面优化' },
        { content: '💫 公告4 - 修复循环动画' },
      ],
      // 5项测试数据
      fiveItems: [
        { title: '第1项', description: '循环动画测试项目' },
        { title: '第2项', description: '正常切换动画' },
        { title: '第3项', description: '中间项目测试' },
        { title: '第4项', description: '倒数第二项' },
        { title: '第5项', description: '最后一项到第一项' },
      ],
      // 当前索引记录
      currentIndex: {
        three: 0,
        four: 0,
        five: 0,
        manual: 0,
      },
    }
  },
  onLoad() {
    console.log('轮播测试页面加载')
  },
  methods: {
    // 3项轮播变化
    onThreeItemsChange(e) {
      console.log('3项轮播变化:', e)
      this.currentIndex.three = e.current
    },

    // 4项轮播变化
    onFourItemsChange(e) {
      console.log('4项轮播变化:', e)
      this.currentIndex.four = e.current
    },

    // 5项轮播变化
    onFiveItemsChange(e) {
      console.log('5项轮播变化:', e)
      this.currentIndex.five = e.current
    },

    // 手动轮播变化
    onManualChange(e) {
      console.log('手动轮播变化:', e)
      this.currentIndex.manual = e.current
    },

    // 手动控制方法
    prevSlide() {
      if (this.$refs.manualSwiper) {
        this.$refs.manualSwiper.prev()
      }
    },

    nextSlide() {
      if (this.$refs.manualSwiper) {
        this.$refs.manualSwiper.next()
      }
    },

    goToFirst() {
      if (this.$refs.manualSwiper) {
        this.$refs.manualSwiper.goToSlide(0)
      }
    },

    goToLast() {
      if (this.$refs.manualSwiper) {
        this.$refs.manualSwiper.goToSlide(this.threeItems.length - 1)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.test-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;

  .title {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
  }

  .subtitle {
    display: block;
    font-size: 14px;
    color: #7f8c8d;
  }
}

.test-section {
  margin-bottom: 25px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 15px;
  }

  .tip {
    display: block;
    font-size: 12px;
    color: #e74c3c;
    margin-top: 10px;
    font-style: italic;
  }
}

.control-section {
  margin-bottom: 25px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 15px;
  }

  .control-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    gap: 10px;

    .control-btn {
      flex: 1;
      height: 40px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
    }
  }
}

.status-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 15px;
  }

  .status-text {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #667eea;
  }
}
</style>
