<template>
    <view class="container">
      <view class="progress">
        进度: {{ currentQuestionIndex + 1 }}/{{ questions.length }}
      </view>
      <scroll-view 
        scroll-y 
        :scroll-top="scrollTop" 
        scroll-with-animation 
        class="scroll-view"
        :style="{height: scrollHeight + 'px'}"
      >
        <view 
          v-for="(item, index) in questions" 
          :key="item.id" 
          class="question-item"
          :id="'question-' + index"
        >
          <view class="question">{{ item.question }}</view>
          <view 
            v-for="option in item.options" 
            :key="option.value"
            class="option"
            @click="selectAnswer(index, option.value)"
            :class="{ 'selected': selectedAnswers[index] === option.value }"
          >
            {{ option.label }}
          </view>
          <button 
            v-if="index === questions.length - 1 && selectedAnswers[index]" 
            class="submit-btn" 
            @click="submit"
          >
            提交
          </button>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        questions: [
          { id: 1, question: "问题1", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 2, question: "问题2", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 3, question: "问题3", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 4, question: "问题4", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 5, question: "问题5", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 6, question: "问题6", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 7, question: "问题7", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 8, question: "问题8", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          { id: 9, question: "问题9", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
           { id: 10, question: "问题10", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
            { id: 11, question: "问题11", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
            { id: 12, question: "问题12", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
            { id: 13, question: "问题13", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
            { id: 14, question: "问题14", options: [{value: 'A', label: '选项A'}, {value: 'B', label: '选项B'},{value: 'c', label: '选项c'},{value: 'D', label: '选项D'}] },
          // 更多问题...
        ],
        selectedAnswers: [],
        scrollTop: 0,
        currentQuestionIndex: 0,
        scrollHeight: 0,
        scrollDelay: 500,
        questionPositions: []  // 用于存储每个问题的位置
      }
    },
    onLoad() {
      const res = uni.getSystemInfoSync();
      this.scrollHeight = res.windowHeight;
      
      // 延迟一下，确保DOM已经渲染
      setTimeout(() => {
        this.calculateQuestionPositions();
      }, 300);
    },
    methods: {
      selectAnswer(index, value) {
        this.$set(this.selectedAnswers, index, value);
        
        if (index < this.questions.length - 1) {
          setTimeout(() => {
            this.currentQuestionIndex = index + 1;
            this.scrollToQuestion(this.currentQuestionIndex);
          }, this.scrollDelay);
        } else {
          setTimeout(() => {
            this.scrollToBottom();
          }, this.scrollDelay);
        }
      },
      goToNext(index) {
        if (index < this.questions.length - 1) {
          this.currentQuestionIndex = index + 1;
          this.scrollToQuestion(this.currentQuestionIndex);
        }
      },
      calculateQuestionPositions() {
        uni.createSelectorQuery()
          .selectAll('.question-item')
          .boundingClientRect(rects => {
            if (rects) {
              let accumulatedHeight = 0;
              this.questionPositions = rects.map(rect => {
                accumulatedHeight += rect.height;
                return accumulatedHeight - rect.height;
              });
            }
          })
          .exec();
      },
      scrollToQuestion(index) {
        if (this.questionPositions[index] !== undefined) {
          this.scrollTop = this.questionPositions[index];
        }
      },
      scrollToBottom() {
        const lastIndex = this.questions.length - 1;
        if (this.questionPositions[lastIndex] !== undefined) {
          this.scrollTop = this.questionPositions[lastIndex] + 200; // 额外滚动以显示提交按钮
        }
      },
      submit() {
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        // 这里可以添加提交逻辑
      }
    }
  }
  </script>
  
  <style>
  .container {
    position: relative;
    background-color: #f5f5f5;
  }
  
  .progress {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 100;
  }
  
  .scroll-view {
    width: 100%;
  }
  
  .question-item {
    /* min-height: 100vh; */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #f5f5f5;
  }
  
  .question {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
  }
  
  .option {
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
  }
  
  .option.selected {
    background-color: #f0f0f0;
    border-color: #007AFF;
  }
  
  .submit-btn {
    margin-top: 20px;
    background-color: #4F4FFF;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    align-self: flex-end;
  }
  </style>