<template>
  <view class="content">
    <view class="content__titletop">
      <view class="content__title">试卷名称-综合素质测评</view>
      <view class="content__subtitle">(满分: 100分)</view>
    </view>

    <view class="content__info">
      <text>姓名: 测试者</text>
      <text>分数: 85分</text>
      <text>考试时间: 2024-12-30</text>
    </view>

    <view class="content__sign">
      <view style="margin-right: 10rpx">签字: </view>
      <u-image
        width="120rpx"
        height="70rpx"
        model="widthFix"
        src="https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp"
      />
    </view>

    <view class="counter"> 
      <text style="color: orange">{{ activeIndex || 1 }}</text>/{{ totalCount }}
    </view>

    <scroll-view ref="scrollViewRef" scroll-y="true" :scroll-top="0" class="question_list" @scrolltolower="handleScrollToLower" @scroll="handleScroll">
      <view
        class="question_item"
        v-for="(item, index) in questionList"
        :key="index"
      >
        <text class="tag_title">
          {{ handleCalcQuestType(item.questionType) }}
        </text>
        {{ index + 1 }}.
        <text>{{ item.stem }}</text>
        <view class="question_options__item">
          <view
            v-for="(option, index) in item.options"
            :key="index"
            :class="
              option.label === item.answer
                ? 'options question_options_active'
                : 'options'
            "
          >
            <text class="option_item">
              {{ option.label }}. {{ option.value }}
            </text>
          </view>
        </view>
        <view class="question_answer">
          正确答案:
          <text style="display: inline-block; margin-left: 10rpx">
            {{ item.answer }}
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
      questionList: [],
      // 新增当前激活的题目索引
      activeIndex: 0,
      // 新增总题目数（根据实际数据）
      totalCount: 0,
      questionTypeMap: {
        0: '单选题',
        1: '多选题',
        2: '判断题',
        3: '填空题',
        4: '简答题'
      }
    }
  },

  onShow() {
    this.resetList()
  },

  mounted() {
  },

  methods: {
    async getData() {
      this.questionList = [
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 1,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'A'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 1,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'A'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
        {
          questionType: 0,
          stem: '离开特种作业岗位达 (  ) 个月以上的特种作业人员应当重新进行实操审核,经确人合格后方可上岗作业.',
          options: [
            {
              label: 'A',
              value: '6'
            },
            {
              label: 'B',
              value: '9'
            },
            {
              label: 'C',
              value: '12'
            },
            {
              label: 'D',
              value: '15'
            }
          ],
          answer: 'D'
        },
      ]
      this.totalPage = 2
      this.totalCount = this.questionList.length
    },
    resetList() {
      this.pageSize = 10
      this.currentPage = 1
      this.questionList = []
      this.getData()
    },
    handleScrollToLower() {
      this.currentPage++
      if (this.totalPage >= this.currentPage) this.getData()
    },
    handleScroll(event) {
      const query = uni.createSelectorQuery().in(this)
      query.selectAll('.question_item').boundingClientRect()
      query.select('.question_list').boundingClientRect()
      query.exec((res) => {
        const items = res[0]
        const list = res[1]
        
        if (!items || !list) return
        
        // 计算当前可见项
        const scrollTop = list.top * -1
        const currentItem = items.findIndex(item => 
          item.top - scrollTop >= 0
        )

        console.log('list.top :>> ', list.top);
        
        if (currentItem !== -1 && currentItem !== this.activeIndex) {
          this.activeIndex = currentItem + 1 // +1 因为索引从0开始
        }
      })
    },
    handleCalcQuestType(type) {
      return `(${this.questionTypeMap[type]})`
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 17rpx;

  .content__titletop {
    text-align: center;

    .content__title {
      font-size: 34rpx;
      font-weight: 600;
    }

    .content__subtitle {
      margin-top: 8rpx;
      font-size: 24rpx;
    }
  }

  .content__info {
    font-size: 34rpx;
    margin-top: 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content__sign {
    margin-top: 18rpx;
    font-size: 34rpx;
    display: flex;
    align-items: center;
  }

  .counter {
    font-size: 28rpx;
    margin: 15rpx 0;
    text-align: end;
  }

  .question_list {
    height: calc(100vh - 123px);

    .question_item {
      margin-bottom: 20rpx;

      .tag_title {
        font-size: 34rpx;
        background-color: #94f0bd;
        color: #5ac725;
        border-radius: 8rpx;
        padding: 2rpx 8rpx;
        margin-right: 10rpx;
      }

      .question_options__item {
        padding: 16rpx;
        margin-top: 14rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12rpx;

        .options {
          padding: 8rpx 0 8rpx 10rpx;
          width: 100%;

          .option_item {
            display: inline-block;
            margin-left: 22rpx;
          }
        }

        .question_options_active {
          background-color: rgb(216, 216, 216);
          color: #fff;
        }
      }

      .question_answer {
        font-size: 34rpx;
        margin-left: 22rpx;
        color: #acafb3;
      }
    }
  }
}
</style>
