<view class="question-page">
    <!-- 题目容器内：纵向滑动由 scroll-view 滚动，横向滑动通过事件交给页面切换题目；使用 bind 以便选项 tap 能正常触发（问题面板已改为仅拖拽条可拖） -->
    <scroll-view scroll-y class="question-content no-material" enhanced="true" show-scrollbar="true" bounces="true" enable-flex="true"
                 bindtouchstart="onQuestionTouchStart"
                 bindtouchmove="onQuestionTouchMove"
                 bindtouchend="onQuestionTouchEnd"
                 bindtouchcancel="onQuestionTouchEnd">
        <view class="question-container">
            <view class="question-header" wx:if="{{question}}">
                <view class="question-type">{{questionIndex + 1}}. {{question.type === 'single_choice' || question.type === 1 || question.type === 2 ? '单选题' : '多选题'}}</view>
            </view>

            <!-- 题目内容：使用 rich-text 支持 HTML 渲染 -->
            <view style="padding: 16rpx 0;" wx:if="{{question}}">
                <rich-text 
                    nodes="{{question.title || question.content || ''}}"
                    selectable="{{true}}"
                    style="color:#111;font-size:34rpx;line-height:1.6;"
                ></rich-text>
            </view>
            
            <!-- 选项列表 -->
            <view class="options-list" wx:if="{{question && question.options && question.options.length > 0}}">
                <view class="option-item {{answers && answers[questionIndex] && answers[questionIndex][optIndex] ? 'option-selected' : ''}} {{opt.cssClass || ''}}"
                      wx:for="{{question.options}}"
                      wx:key="id"
                      wx:for-item="opt"
                      wx:for-index="optIndex"
                      bindtap="onOptionClick"
                      data-index="{{optIndex}}">
                    <view class="option-content">
                        <text class="option-letter">{{optionMarkers && optionMarkers[optIndex] ? optionMarkers[optIndex] : String.fromCharCode(65 + optIndex)}}</text>
                        <text class="separator">|</text>
                        <rich-text 
                            class="option-text"
                            nodes="{{opt.content || opt.option_content || opt.text || ''}}"
                            selectable="{{true}}"
                        ></rich-text>
                    </view>
                    <image class="answer-icon" 
                           src="/assets/icons/{{(opt.label === question.correct_answer || opt.option_label === question.correct_answer) ? 'correct.png' : ((opt.label === question.user_answer || opt.option_label === question.user_answer) ? 'wrong.png' : '')}}"
                           wx:if="{{showAnswerIcon && ((opt.label === question.correct_answer || opt.option_label === question.correct_answer) || (opt.label === question.user_answer || opt.option_label === question.user_answer))}}"
                    />
                </view>
            </view>
            
            <!-- 调试信息：如果没有选项 -->
            <view wx:if="{{!question || !question.options || question.options.length === 0}}" style="padding: 20rpx; background: #fff3cd; margin: 20rpx; border-radius: 8rpx;">
                <text style="color: #856404; font-size: 28rpx;">⚠️ 题目没有选项数据</text>
                <text style="color: #856404; font-size: 24rpx; display: block; margin-top: 10rpx;">question: {{question ? '存在' : '不存在'}}</text>
                <text style="color: #856404; font-size: 24rpx; display: block;">options: {{question && question.options ? question.options.length : '无'}}</text>
            </view>

            <!-- 答案解析区域（可选） -->
            <view class="answer-analysis" wx:if="{{showAnalysis}}">
                <view class="analysis-header analysis-header-user">
                    <text class="analysis-title">你的答案</text>
                    <text class="user-answer" wx:if="{{question.user_answer}}">{{question.user_answer}}</text>
                </view>
                <view class="analysis-header">
                    <text class="analysis-title">答案解析</text>
                    <text class="correct-answer" wx:if="{{question.correct_answer}}">正确答案：{{question.correct_answer}}</text>
                </view>
                <view class="analysis-content" wx:if="{{question.answer_analysis}}">
                    <rich-text 
                        nodes="{{question.answer_analysis}}"
                        selectable="{{true}}"
                    ></rich-text>
                </view>
                <view class="analysis-content" wx:else>
                    <text style="color: #999; font-size: 28rpx;">暂无解析</text>
                </view>
            </view>

            <view class="bottom-spacing"></view>
        </view>
    </scroll-view>
</view>

