<view class="container">
    <view wx:if="{{loading}}" class="loading-container">
        <view class="loading-content">
            <view class="loading-spinner">
                <view class="spinner-circle"></view>
            </view>
            <text class="loading-text">加载中</text>
        </view>
    </view>

    <block wx:else>
        <!-- 试题详情：背景层资料（根据当前题目的 material_id 显示）+ 前置问题面板（可上下滑动，左右滑题目） -->
        <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="{{answers}}"
                                        option-markers="{{optionMarkers}}"
                                        show-analysis="{{false}}"
                                        show-answer-icon="{{false}}"
                                        clickable="{{true}}"
                                        bind:optionclick="handleOptionClick"
                                        bind:swipehorizontal="onQuestionSwipeHorizontal">
                                    </question-display>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部工具栏 -->
        <view class="toolbar">
            <view class="timer-container" bindtap="togglePause">
                <image class="pause-icon" src="{{isPaused ? '/assets/icons/play.png' : '/assets/icons/pause.png'}}"></image>
                <text class="timer">{{timerText}}</text>
            </view>
            <view class="question-card-btn" bindtap="showQuestionCard">
                <image class="card-icon" src="/assets/icons/courses.png"></image>
                <text class="card-text">答题卡</text>
            </view>
        </view>

        <!-- 答题卡弹窗 -->
        <view class="question-card-popup {{showQuestionCard ? 'show' : ''}}">
            <view class="popup-mask" bindtap="hideQuestionCard"></view>
            <view class="popup-content">
                <view class="popup-header">
                    <text>答题卡</text>
                    <view class="close-btn" bindtap="hideQuestionCard">×</view>
                </view>
                <view class="question-status">
                    <view class="status-item">
                        <view class="status-dot answered"></view>
                        <text>已答题</text>
                    </view>
                    <view class="status-item">
                        <view class="status-dot"></view>
                        <text>未答题</text>
                    </view>
                    <view class="status-item">
                        <view class="status-dot current"></view>
                        <text>当前题</text>
                    </view>
                </view>
                <scroll-view scroll-y class="numbers-grid">
                    <view class="grid-container">
                        <view class="number-item {{questionAnsweredStatus[index] ? 'answered' : ''}} {{currentQuestionIndex === index ? 'current' : ''}}"
                              wx:for="{{questions}}"
                              wx:key="id"
                              data-index="{{index}}"
                              bindtap="jumpToQuestion">
                            <text>{{index + 1}}</text>
                        </view>
                    </view>
                </scroll-view>
                <view class="submit-btn" bindtap="submitAnswers">交卷</view>
            </view>
        </view>

        <!-- 暂停遮罩 -->
        <pause-mask 
              show="{{isPaused}}"
              timer-text="{{timerText}}" 
              bind:resume="togglePause" />

        <!-- 自定义加载动画 -->
        <view class="custom-loading {{loading ? 'show' : ''}}" wx:if="{{loading}}">
            <view class="loading-wrapper">
                <view class="loading-spinner">
                    <view class="loading-dot" wx:for="{{12}}" wx:key="index"></view>
                </view>
            </view>
        </view>

        <!-- 自定义确认弹窗 -->
        <view wx:if="{{showCustomModal}}" class="custom-modal-mask">
            <view class="custom-modal">
                <view class="custom-modal-title">提示</view>
                <view class="custom-modal-content">还有未作答的题目，是否确认提交？</view>
                <view class="custom-modal-actions">
                    <button class="custom-modal-btn cancel" bindtap="onCustomModalCancel">再检查一下</button>
                    <button class="custom-modal-btn confirm" bindtap="onCustomModalConfirm">确认提交</button>
                </view>
            </view>
        </view>
    </block>
</view> 

<style>
.material-section-wrapper {
    transition: height 0.2s cubic-bezier(.4,0,.2,1);
    will-change: height;
}
.material-section-wrapper.resizing {
    transition: none;
}
</style>
