<view class="camp-container">
      <!-- 自定义导航栏（放在 page-container 外，点击返回仍走 onNavBackTap） -->
      <view class="custom-nav-bar" style="padding-top: {{statusBarHeight}}px;">
            <view class="nav-bar-content" style="height: {{navBarHeight}}px;">
                  <view class="nav-back-btn" bindtap="onNavBackTap">
                        <view class="nav-back-arrow"></view>
                  </view>
                  <view class="nav-bar-title">{{navBarTitle}}</view>
                  <view class="nav-bar-right"></view>
            </view>
      </view>

      <!-- 用 page-container 包裹主内容，拦截右滑/边框返回，与点击返回统一逻辑 -->
      <page-container
            show="{{pageContainerShow}}"
            overlay="{{false}}"
            position="center"
            round="{{false}}"
            custom-style="position:absolute;left:0;right:0;top:{{navTotalHeight}}px;bottom:0;width:100%;height:100%;"
            bindbeforeleave="onPageContainerBeforeLeave"
      >
            <view class="page-container-inner" style="width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;">
                  <view wx:if="{{loading}}" class="loading">
                        <view class="loading-spinner"></view>
                        <text>加载中...</text>
                  </view>

                  <block wx:else>
            <!-- 统一的顶部区域 -->
            <view class="banner" style="height: {{videoHeight}}px;width: {{screenWidth}}px;" wx:if="{{topContentType !== 'INTRO_TYPE_NONE' && topContent}}">

                  <block wx:if="{{topContentType === 'INTRO_TYPE_VIDEO'}}">
                        <!-- 视频播放器 -->
                        <video wx:if="{{!online && showVideo && topContent}}"
                              id="bannerVideo"
                              class="banner-video"
                              src="{{topContent}}"
                              title="{{videoTitle}}"
                              controls="{{true}}"
                              show-fullscreen-btn="{{true}}"
                              show-play-btn="{{true}}"
                              show-center-play-btn="{{true}}"
                              enable-progress-gesture="{{true}}"
                              bindended="onVideoEnded"
                              binderror="onVideoError"
                              bindplay="onVideoPlay"
                              bindpause="onVideoPause"
                              bindtimeupdate="onVideoTimeUpdate"
                              bindloadedmetadata="onVideoLoadedMetadata"
                              bindcanplay="onVideoCanPlay"
                        ></video>
                  </block>
                  <block wx:elif="{{topContentType === 'INTRO_TYPE_IMAGE_TEXT'}}">
                        <view class="banner-image-container">
                              <image class="banner-image" mode="aspectFill" src="{{topContent}}"></image>
                        </view>
                  </block>
            </view>

            <!-- 打卡卡片 - 根据是否已加入营地显示不同背景 -->
            <block wx:if="{{hasJoined}}">
                  <block wx:if="{{campStatus == 'Completed'}}">
                        <view class="highlight-card important" bindtap="toggleCardType"></view>
                  </block>
                  <block wx:elif="{{campStatus == 'InProgress'}}">
                        <view class="highlight-card inProgress" bindtap="toggleCardType"></view>
                  </block>
                  <block wx:else>
                        <view class="highlight-card inProgress" bindtap="toggleCardType"></view>
                  </block>
            </block>
            <block wx:if="{{!hasJoined}}">
                  <view class="highlight-card normal" bindtap="toggleCardType"></view>
            </block>


            <!-- 章节列表 - 使用scroll-view确保可滚动 -->
            <scroll-view scroll-y class="section-scroll" wx:if="{{courseList.length > 0}}">
                  <view class="section-list">
                        <block wx:for="{{courseList}}" wx:key="id" wx:for-item="course" wx:for-index="idx">
                              <!-- 课程项 -->
                              <view class="section-item {{hasJoined && course.is_completed ? 'pink-border' : (hasJoined && course.id == currentSectionId ? 'blue-border' : 'gray-border')}}">
                                    <view class="section-header" bindtap="toggleSection" data-index="{{idx}}" data-course="{{course}}">
                                          <view class="section-title">{{course.title}}</view>
                                          <block wx:if="{{course.is_started}}">
                                                <view class="section-arrow {{sections[idx].expanded ? 'up' : 'down'}}"></view>
                                          </block>
                                          <block wx:else>
                                                <block wx:if="{{course.price_fen > 0}}">
                                                      <block wx:if="{{course.is_purchased}}">
                                                            <view class="task-status-icon already-pay"></view>
                                                      </block>
                                                      <block wx:if="{{!course.is_purchased}}">
                                                            <view class="task-status-icon no-pay"></view>
                                                      </block>
                                                </block>
                                                <block wx:else="">
                                                      <!-- <image class="unlock-icon" src="https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/unlock.png" mode="aspectFit"></image> -->
                                                </block>

                                          </block>
                                          <view wx:if="{{sectionUnlockTexts[idx]}}" class="section-unlock-countdown">{{sectionUnlockTexts[idx]}}</view>
                                    </view>

                                    <!-- 动态任务列表 - 只在展开状态显示 -->
                                    <view class="task-list {{sections[idx].expanded ? 'expanded' : 'collapsed'}}">
                                          <!-- 课程任务列表 -->
                                          <block wx:if="{{course.tasks && course.tasks.length > 0}}">
                                                <view wx:for="{{course.tasks}}" wx:key="id" wx:for-item="task" class="task-item{{currentSelectedTaskId === task.id ? ' selected' : ''}}{{task.can_start === false ? ' locked' : ''}}{{sectionUnlockTexts[idx] ? ' task-item-section-locked' : ''}}" wx:if="{{true}}" bindtap="handleTaskClick" data-is-started="{{course.is_started}}" data-is-current="{{course.is_current}}" data-section-id="{{course.id}}" data-number="{{course.section_number}}" data-is-status="{{task.status}}" data-task-id="{{task.id}}" data-type="{{task.task_type}}" data-task="{{task}}" data-task-title="{{task.title || task.task_title || '任务'}}" data-camp-id="{{campId}}">
                                                      <view class="task-number">{{index + 1}}.</view>
                                                      <view class="task-title{{task.can_start === false ? ' task-title-locked' : ''}}">
                                                            <text>{{task.title || task.task_title || '任务'}}</text>
                                                      </view>
                                                      <view class="task-status-icon">
                                                      
                                                            <!-- 加载中动画 -->
                                                            <view wx:if="{{tasksLoading[idx]}}" class="task-status-icon loading-spinner"></view>
                                                            <!-- 锁定状态 -->
                                                            <view wx:elif="{{task.can_start === false}}" class="task-status-icon locked-icon"></view>
                                                            <!-- 状态icon -->
                                                            <view wx:elif="{{task.status === 'Completed'}}" class="task-status-icon completed"></view>
                                                            <view wx:elif="{{task.status === 'InProgress'}}" class="task-status-icon in-progress"></view>
                                                            <view wx:elif="{{task.status === 'Reviewing'}}" class="task-status-icon reviewing"></view>
                                                            <view wx:elif="{{task.status === 'Rejected'}}" class="task-status-icon rejected"></view>
                                                            <view wx:else class="task-status-icon not-started"></view>
                                                      </view>
                                                </view>
                                          </block>
                                    </view>
                              </view>
                        </block>
                  </view>
            </scroll-view>

            <view wx:elif="{{!campDetail.is_user_join}}" class="empty-state">
                  <text>请先加入营地</text>
            </view>

            <view wx:else class="empty-state">
                  <text>暂无课程数据</text>
            </view>

                  </block>
            </view>
      </page-container>
</view>