<view class="container">
    <!-- 新增的整体预览页面 -->
    <view class="result-overview" wx:if="{{!showDetail}}">
        <!-- 加载状态 -->
        <view class="loading-container" wx:if="{{loading}}">
            <view class="loading-content">
                <view class="loading-spinner">
                    <view class="spinner-circle"></view>
                </view>
                <text class="loading-text">加载中...</text>
            </view>
        </view>

        <block wx:else>
            <!-- 顶部成绩展示 -->
            <view class="score-section">
                <view class="score-main">{{correctCount}}/{{totalCount}}</view>
                <view class="score-desc {{isQualified ? 'qualified' : 'unqualified'}}">{{isQualified ? '恭喜达标' : '未达标'}}</view>
            </view>

            <!-- 答题情况统计 -->
            <view class="stats-section">
                <view class="stats-item">
                    <text class="stats-value">{{correctRate}}%</text>
                    <text class="stats-label">正确率</text>
                </view>
                <view class="stats-divider"></view>
                <view class="stats-item">
                    <text class="stats-value">{{usedTime}}</text>
                    <text class="stats-label">用时</text>
                </view>
            </view>

            <!-- 题目列表 -->
            <view class="questions-list">
                <view class="list-header">
                    <text class="header-title">答题情况</text>
                    <view class="status-legend">
                        <view class="legend-item">
                            <view class="legend-circle correct"></view>
                            <text>正确</text>
                        </view>
                        <view class="legend-item">
                            <view class="legend-circle wrong"></view>
                            <text>错误</text>
                        </view>
                        <view class="legend-item">
                            <view class="legend-circle unanswered"></view>
                            <text>未答</text>
                        </view>
                    </view>
                </view>
                <view class="question-items">
                    <view class="question-item" wx:for="{{questions}}" wx:key="id">
                        <view class="circle-index" bindtap="jumpToQuestion" data-index="{{index}}">
                            <view class="circle-bg"></view>
                            <view class="circle-arc {{item.cssClass}}"></view>
                            <text class="circle-text">{{index + 1}}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 统一的底部按钮组 -->
            <view class="bottom-btns">
                <block wx:if="{{!showDetail}}">
                    <button class="btn-outline" bindtap="showAnalysis">查看解析</button>
                    <button class="btn-blue" bindtap="retakeQuiz">重新答题</button>
                </block>
                <block wx:else>
                    <button class="btn-outline" bindtap="showSummary">返回结算</button>
                    <button class="btn-blue" bindtap="retakeQuiz">重新答题</button>
                </block>
            </view>
        </block>
    </view>

    <!-- 详细解析页面（与答题页相同的双层布局 + 解析） -->
    <block wx:else>
        <view class="container">
            <!-- 加载状态 -->
            <view class="loading-container" wx:if="{{loading}}">
                <view class="loading-content">
                    <view class="loading-spinner">
                        <view class="spinner-circle"></view>
                    </view>
                    <text class="loading-text">加载中...</text>
                </view>
            </view>

            <block wx:else>
                <view class="detail-wrap" style="height: {{swiperHeight}}px;">
                    <!-- 背景层：仅当当前题目有关联材料时显示 -->
                    <view class="layer-back" wx:if="{{currentQuestionMaterial}}" style="height: {{swiperHeight}}px;">
                        <view class="material-title-fixed">
                            <text class="section-title">资料</text>
                            <view class="section-title-underline"></view>
                        </view>
                        <scroll-view scroll-y
                                     class="material-scroll-below-title"
                                     style="height: {{materialScrollHeight}}px;"
                                     enhanced="{{true}}"
                                     show-scrollbar="{{true}}"
                                     bounces="{{true}}">
                            <view class="section section-material">
                                <view class="material-body">
                                    <rich-text nodes="{{currentQuestionMaterial.content}}" selectable="{{true}}" class="material-rich"></rich-text>
                                </view>
                            </view>
                            <view class="material-placeholder"></view>
                        </scroll-view>
                    </view>

                    <!-- 前置层：问题面板 -->
                    <view class="movable-area panel-area" style="height: {{movableAreaHeight}}px;">
                        <view class="movable-panel question-panel-wrap" style="height: {{panelHeight}}px; transform: translateY({{panelY}}px);">
                            <!-- 仅当有材料时显示拖拽条 -->
                            <view class="panel-drag-handle"
                                  wx:if="{{currentQuestionMaterial}}"
                                  bindtouchstart="onPanelDragStart"
                                  catchtouchmove="onPanelDragMove"
                                  bindtouchend="onPanelDragEnd"
                                  bindtouchcancel="onPanelDragEnd">
                                <view class="panel-drag-bar"></view>
                            </view>
                            <view class="section section-question">
                                <swiper class="content-swiper question-content-swiper"
                                        current="{{currentQuestionIndex}}"
                                        bindchange="onQuestionChange"
                                        bindanimationfinish="onQuestionAnimationFinish">
                                    <swiper-item wx:for="{{questions}}"
                                                 wx:key="id"
                                                 wx:for-index="qIndex"
                                                 wx:for-item="q"
                                                 class="content-swiper-item">
                                        <view class="question-body">
                                            <question-display
                                                question="{{q}}"
                                                question-index="{{qIndex}}"
                                                answers="{{[]}}"
                                                option-markers="{{optionMarkers}}"
                                                show-analysis="{{true}}"
                                                show-answer-icon="{{true}}"
                                                clickable="{{false}}">
                                            </question-display>
                                        </view>
                                    </swiper-item>
                                </swiper>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 底部按钮组 -->
                <view class="bottom-btns">
                    <button class="btn-outline" bindtap="showSummary">返回结算</button>
                    <button class="btn-blue" bindtap="retakeQuiz">重新答题</button>
                </view>
            </block>
        </view>
    </block>
</view> 