<template>
  <view class="posture-guide">
    <view class="guide-content">
      <view class="guide-title">体态评估环节</view>
      <view class="guide-subtitle">请仔细阅读下方说明，完整展示手臂</view>
      
      <!-- 添加轮播图组件 -->
      <swiper 
        class="guide-swiper"
        :indicator-dots="true"
        indicator-color="rgba(0, 0, 0, .3)"
        indicator-active-color="#000000"
        :autoplay="false"
        @change="handleSwiperChange"
      >
        <swiper-item v-for="(item, index) in guideImages" :key="index">
          <view class="swiper-item">
            <image :src="item.url" mode="aspectFit" class="guide-image"></image>
            <view class="image-description">{{item.description}}</view>
          </view>
        </swiper-item>
      </swiper>
      
      <!-- <view class="guide-instructions">
        <text>{{currentInstruction}}</text>
      </view> -->
      
      <!-- 按钮根据是否是最后一张图片来决定是否禁用 -->
      <button 
        class="confirm-button" 
        :class="{'button-disabled': !isLastSlide}"
        :disabled="!isLastSlide"
        @click="handleConfirm"
      >
        {{isLastSlide ? '我知道了，开始采集' : '请查看完所有说明'}}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      isLastSlide: false,
      guideImages: [
        {
          url: 'https://data.qicai321.com/minlong/85fbafbd-1b80-48cd-bcd6-fc4911e9ff54.jpg',
          description: '左手手掌'
        },
        {
          url: 'https://data.qicai321.com/minlong/17d141e0-8f99-4a54-a534-f6b954c600f8.png',
          description: '左手手背'
        },
        {
          url: 'https://data.qicai321.com/minlong/5c7d7d6f-5e14-4cd6-bb9f-11509473a8bb.png',
          description: '左手握拳'
        },
        {
          url: 'https://data.qicai321.com/minlong/148eea00-21b4-49e1-a3b6-712fff08a5a8.png',
          description: '右手手掌'
        },
        {
          url: 'https://data.qicai321.com/minlong/c67c303e-91c0-4e79-8e82-84096435481f.png',
          description: '右手手背'
        },
        {
          url: 'https://data.qicai321.com/minlong/5a093f70-d397-4a36-9539-a8b4d11e0a13.png',
          description: '右手握拳'
        },
      ],
      instructions: [
        '第1步：请按图示展示左手手掌',
        '第2步：请按图示展示左手手背',
        '第3步：请按图示展示左手握拳',
        '第4步：请按图示展示右手手掌',
        '第5步：请按图示展示右手手背',
        '第6步：请按图示展示右手握拳'
      ]
    }
  },
  
  computed: {
    currentInstruction() {
      return this.instructions[this.currentIndex];
    }
  },
  
  methods: {
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
      // 判断是否是最后一张图片
      this.isLastSlide = this.currentIndex === this.guideImages.length - 1;
    },
    
    handleConfirm() {
      if (this.isLastSlide) {
        uni.navigateTo({
          url: '/pages/interview/interview'
        });
      } else {
        uni.showToast({
          title: '请查看完所有说明',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.posture-guide {
  min-height: 100vh;
  background-color: #fff;
  padding: 30rpx;
}

.guide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guide-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.guide-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

/* 轮播图样式 */
.guide-swiper {
  width: 100%;
  height: 800rpx;
  margin: 30rpx 0;
  position: relative;
  padding-bottom: 40rpx; /* 添加底部padding为指示点留出空间 */
}

.swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.guide-image {
  width: 90%;
  height: 600rpx;
  object-fit: contain;
}

.image-description {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
}

.guide-instructions {
  padding: 20rpx;
  margin: 30rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  width: 90%;
  margin-top: 60rpx;
}

.confirm-button {
  width: 80%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #0039b3;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

/* 禁用状态的按钮样式 */
.button-disabled {
  background-color: #cccccc;
  opacity: 0.8;
}

/* 修改指示点容器样式 */
:deep(.uni-swiper-dots) {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 修改指示点样式 */
:deep(.uni-swiper-dot) {
  width: 16rpx !important;
  height: 16rpx !important;
  margin: 0 8rpx !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3) !important;
}

:deep(.uni-swiper-dot-active) {
  background: #000000 !important;
}
</style> 