schoolNews/schoolNewsWeb/src/views/public/course/components/CourseLearning.vue

<template>
  <div class="course-learning">
    <!-- 学习页头部 -->
    <div class="learning-header">
      <div class="header-left">
        <el-button @click="handleBack" :icon="ArrowLeft" text>
          {{ backButtonText }}
        </el-button>
        <span class="course-name">{{ courseItemVO?.name }}</span>
      </div>

      <div class="header-right">
        <span class="progress-info">
          学习进度：{{ currentProgress }}%
        </span>
      </div>
    </div>

    <div class="learning-container">
      <!-- 浮动展开按钮（侧边栏收起时显示） -->
      <div v-if="sidebarCollapsed" class="float-expand-btn" @click="toggleSidebar">
        <el-button circle :icon="Expand" />
      </div>

      <!-- 左侧：章节目录 -->
      <div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <span class="sidebar-title">课程目录</span>
          <el-button text :icon="Fold" @click="toggleSidebar" />
        </div>

        <div v-if="!sidebarCollapsed" class="chapter-list">
          <el-collapse v-model="activeChapters">
            <el-collapse-item v-for="(chapterItem, chapterIndex) in courseItemVO?.chapters || []" :key="chapterIndex"
              :name="chapterIndex">
              <template #title>
                <div class="chapter-item-title">
                  <span>{{ chapterIndex + 1 }}. {{ chapterItem.name }}</span>
                  <span class="chapter-count">{{ getChapterNodes(chapterIndex).length }}</span>
                </div>
              </template>

              <div class="node-items">
                <div v-for="(node, nodeIndex) in getChapterNodes(chapterIndex)" :key="nodeIndex" class="node-item-bar" :class="{
                  active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
                  completed: isNodeCompleted(chapterIndex, nodeIndex)
                }" @click="selectNode(chapterIndex, nodeIndex)">
                  <div class="node-item-content">
                    <el-icon v-if="isNodeCompleted(chapterIndex, nodeIndex)" class="check-icon">
                      <CircleCheck />
                    </el-icon>
                    <el-icon v-else class="node-type-icon">
                      <Document v-if="node.nodeType === 0" />
                      <Edit v-else-if="node.nodeType === 1" />
                      <Upload v-else />
                    </el-icon>
                    <span class="node-item-name">{{ node.name }}</span>
                  </div>
                  <div class="node-item-meta">
                    <el-tag v-if="node.isRequired === 1" type="danger" size="small" effect="plain">
                      必修
                    </el-tag>
                    <span v-if="node.duration" class="node-duration">
                      {{ node.duration }}分钟
                    </span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <!-- 右侧：学习内容区 -->
      <div ref="contentAreaRef" class="content-area" :class="{ expanded: sidebarCollapsed }"
        @scroll="handleContentScroll">
        <!-- 加载中 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="8" animated />
        </div>

        <!-- 节点内容 -->
        <div v-else-if="currentNode" class="node-content">
          <div class="node-header">
            <h2 class="node-title">{{ currentNode.name }}</h2>
            <div class="node-meta">
              <el-tag v-if="currentNode.isRequired === 1" type="danger" size="small">
                必修
              </el-tag>
              <span v-if="currentNode.duration" class="duration">
                <el-icon>
                  <Clock />
                </el-icon>
                {{ currentNode.duration }} 分钟
              </span>
            </div>
          </div>

          <!-- 文章资源 -->
          <div v-if="currentNode.nodeType === 0 && articleData" class="article-content">
            <ArticleShowView :as-dialog="false" :article-data="articleData" :category-list="[]" />
          </div>

          <!-- 富文本内容 -->
          <div v-else-if="currentNode.nodeType === 1" class="rich-text-content" v-html="currentNode.content">
          </div>

          <!-- 文件内容 -->
          <div v-else-if="currentNode.nodeType === 2" class="file-content">
            <div v-if="isVideoFile(currentNode.videoUrl)" class="video-wrapper">
              <video :src="getFileUrl(currentNode.videoUrl)" controls class="video-player"
                @timeupdate="handleVideoProgress" @ended="handleVideoEnded">
                您的浏览器不支持视频播放
              </video>
            </div>
            <div v-else-if="isAudioFile(currentNode.videoUrl)" class="audio-wrapper">
              <audio :src="getFileUrl(currentNode.videoUrl)" controls class="audio-player"
                @timeupdate="handleAudioProgress" @ended="handleAudioEnded">
                您的浏览器不支持音频播放
              </audio>
            </div>
            <div v-else class="file-download">
              <el-icon class="file-icon">
                <Document />
              </el-icon>
              <p>文件资源</p>
              <el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
                <el-icon>
                  <Download />
                </el-icon>
                下载文件
              </el-button>
            </div>
          </div>

          <!-- 学习操作 -->
          <div class="learning-actions">
            <el-button @click="markAsComplete" :type="isCurrentNodeCompleted ? 'success' : 'primary'"
              :disabled="isCurrentNodeCompleted">
              <el-icon>
                <CircleCheck />
              </el-icon>
              {{ isCurrentNodeCompleted ? '已完成' : '标记为完成' }}
            </el-button>

            <div class="navigation-buttons">
              <el-button @click="gotoPrevious" :disabled="!hasPrevious" :icon="ArrowLeft">
                上一节
              </el-button>
              <el-button @click="gotoNext" :disabled="!hasNext" type="primary">
                下一节
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>

        <!-- 暂无内容 -->
        <div v-else class="empty-content">
          <el-empty description="暂无学习内容" />
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
  ArrowLeft,
  ArrowRight,
  Expand,
  Fold,
  CircleCheck,
  Document,
  Edit,
  Upload,
  Clock,
  Download
} from '@element-plus/icons-vue';
import { ArticleShowView } from '@/views/public/article';
import { courseApi } from '@/apis/study';
import { learningRecordApi, learningHistoryApi } from '@/apis/study';
import { resourceApi } from '@/apis/resource';
import { useStore } from 'vuex';
import { FILE_DOWNLOAD_URL } from '@/config';
import type { CourseItemVO, LearningRecord, TbLearningHistory } from '@/types';

interface Props {
  courseId: string;
  chapterIndex?: number;
  nodeIndex?: number;
  backButtonText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  chapterIndex: 0,
  nodeIndex: 0,
  backButtonText: '返回'
});

const emit = defineEmits<{
  'back': [];
}>();

const store = useStore();
const userInfo = computed(() => store.getters['auth/user']);
const route = useRoute();

const loading = ref(false);
const courseItemVO = ref<CourseItemVO | null>(null);
const currentChapterIndex = ref(0);
const currentNodeIndex = ref(0);
const sidebarCollapsed = ref(false);
const activeChapters = ref<number[]>([0]);
const articleData = ref<any>(null);
const contentAreaRef = ref<HTMLElement | null>(null);

// 学习记录
const learningRecord = ref<LearningRecord | null>(null);
const completedNodes = ref<Set<string>>(new Set());
const learningStartTime = ref<number>(0);
const learningTimer = ref<number | null>(null);
const hasScrolledToBottom = ref(false);
const previousNodeKey = ref<string | null>(null);

// 富文本视频跟踪
const totalRichTextVideos = ref(0);
const completedRichTextVideos = ref<Set<number>>(new Set());

// 学习历史记录
const learningHistory = ref<TbLearningHistory | null>(null);
const historyStartTime = ref<number>(0);
const historyTimer = ref<number | null>(null);

// 辅助函数：获取章节的节点列表
function getChapterNodes(chapterIndex: number): CourseItemVO[] {
  if (!courseItemVO.value) return [];
  const chapter = courseItemVO.value.chapters?.[chapterIndex];
  if (!chapter?.chapterID) return [];
  return courseItemVO.value.chapterNodes?.[chapter.chapterID] || [];
}

// 当前节点
const currentNode = computed(() => {
  const nodes = getChapterNodes(currentChapterIndex.value);
  return nodes[currentNodeIndex.value] || null;
});

// 当前进度
const currentProgress = computed(() => {
  if (!courseItemVO.value || !courseItemVO.value.chapters) return 0;

  let totalNodes = 0;
  let completedCount = 0;

  courseItemVO.value.chapters.forEach((chapter, chapterIdx) => {
    const nodes = getChapterNodes(chapterIdx);
    nodes.forEach((node, nodeIdx) => {
      totalNodes++;
      if (isNodeCompleted(chapterIdx, nodeIdx)) {
        completedCount++;
      }
    });
  });

  if (totalNodes === 0) return 0;
  return Math.round((completedCount / totalNodes) * 100);
});

// 是否有上一节
const hasPrevious = computed(() => {
  if (currentChapterIndex.value === 0 && currentNodeIndex.value === 0) {
    return false;
  }
  return true;
});

// 是否有下一节
const hasNext = computed(() => {
  if (!courseItemVO.value || !courseItemVO.value.chapters) return false;

  const chapters = courseItemVO.value.chapters;
  const currentChapterNodes = getChapterNodes(currentChapterIndex.value);

  // 不是当前章节的最后一个节点
  if (currentNodeIndex.value < currentChapterNodes.length - 1) {
    return true;
  }

  // 不是最后一章
  if (currentChapterIndex.value < chapters.length - 1) {
    return true;
  }

  return false;
});

// 当前节点是否完成
const isCurrentNodeCompleted = computed(() => {
  return isNodeCompleted(currentChapterIndex.value, currentNodeIndex.value);
});

watch(() => props.courseId, (newId) => {
  if (newId) {
    loadCourse();
  }
}, { immediate: true });

watch(() => [props.chapterIndex, props.nodeIndex], () => {
  currentChapterIndex.value = props.chapterIndex || 0;
  currentNodeIndex.value = props.nodeIndex || 0;
  loadNodeContent();
}, { immediate: true });

watch(currentNode, async () => {
  // 保存上一个节点的学习历史记录
  if (learningHistory.value) {
    await saveHistoryRecord();
    stopHistoryTimer();
  }

  if (currentNode.value) {
    loadNodeContent();

    // 为新节点创建学习历史记录
    await createHistoryRecord();
  }
});

onMounted(() => {
  startLearningTimer();
});

onBeforeUnmount(() => {
  stopLearningTimer();
  saveLearningProgress();

  // 保存学习历史记录
  if (learningHistory.value) {
    saveHistoryRecord();
  }
  stopHistoryTimer();
});

// 加载课程
async function loadCourse() {
  loading.value = true;
  try {
    const res = await courseApi.getCourseProgress(props.courseId);
    if (res.success && res.data) {
      courseItemVO.value = res.data;

      // 确保数据结构完整
      if (!courseItemVO.value.chapters) {
        courseItemVO.value.chapters = [];
      }
      if (!courseItemVO.value.chapterNodes) {
        courseItemVO.value.chapterNodes = {};
      }

      // 加载学习记录
      await loadLearningRecord();
    }
  } catch (error) {
    console.error('加载课程失败:', error);
    ElMessage.error('加载课程失败');
  } finally {
    loading.value = false;
  }
}

// 加载学习记录
async function loadLearningRecord() {
  if (!userInfo.value?.id) return;

  try {
    const res = await learningRecordApi.getCourseLearningRecord({
      userID: userInfo.value.id,
      resourceType: 2, // 课程
      courseID: props.courseId
    });

    if (res.success && res.dataList && res.dataList.length > 0) {
      learningRecord.value = res.dataList[0];

      // 从本地存储加载已完成的节点列表
      const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
      if (savedProgress) {
        completedNodes.value = new Set(JSON.parse(savedProgress));
      }
    } else {
      // 没有学习记录，创建新的
      await createLearningRecord();
    }
  } catch (error) {
    console.error('加载学习记录失败:', error);
  }
}

// 创建学习记录
async function createLearningRecord() {
  if (!userInfo.value?.id) return;

  try {
    const currentChapter = courseItemVO.value?.chapters?.[currentChapterIndex.value];
    const currentNodeData = currentChapter?.chapterID ? 
      courseItemVO.value?.chapterNodes?.[currentChapter.chapterID]?.[currentNodeIndex.value] : 
      null;

    const res = await learningRecordApi.createRecord({
      userID: userInfo.value.id,
      resourceType: 2, // 课程
      courseID: props.courseId,
      chapterID: currentChapter?.chapterID,
      nodeID: currentNodeData?.nodeID,
      taskID: route.query.taskId as string
    });

    if (res.success && res.data) {
      learningRecord.value = res.data;
      console.log('学习记录创建成功');
    }
  } catch (error) {
    console.error('创建学习记录失败:', error);
  }
}

// 加载节点内容
async function loadNodeContent() {
  if (!currentNode.value) return;

  // 如果是文章资源，加载文章内容
  if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
    try {
      const res = await resourceApi.getResourceById(currentNode.value.resourceID);
      if (res.success && res.data) {
        articleData.value = {
          ...res.data.resource,
          tags: res.data.tags || []
        };
      }
    } catch (error) {
      console.error('加载文章失败:', error);
    }
  } else {
    articleData.value = null;
  }

  // 展开当前章节
  if (!activeChapters.value.includes(currentChapterIndex.value)) {
    activeChapters.value.push(currentChapterIndex.value);
  }
}

// 选择节点
async function selectNode(chapterIndex: number, nodeIndex: number) {
  // 检查前一个节点是否需要标记完成
  if (previousNodeKey.value && (hasScrolledToBottom.value || !hasScrollbar())) {
    await markNodeComplete(previousNodeKey.value);
  }

  // 切换到新节点
  currentChapterIndex.value = chapterIndex;
  currentNodeIndex.value = nodeIndex;

  // 重置滚动状态
  hasScrolledToBottom.value = false;
  previousNodeKey.value = `${chapterIndex}-${nodeIndex}`;

  // 滚动到顶部
  if (contentAreaRef.value) {
    contentAreaRef.value.scrollTop = 0;
  }

  // 等待 DOM 更新后初始化视频监听
  await nextTick();
  initRichTextVideoListeners();
}

// 上一节
function gotoPrevious() {
  if (!hasPrevious.value || !courseItemVO.value) return;

  if (currentNodeIndex.value > 0) {
    currentNodeIndex.value--;
  } else {
    // 跳到上一章的最后一节
    currentChapterIndex.value--;
    const prevChapterNodes = getChapterNodes(currentChapterIndex.value);
    currentNodeIndex.value = prevChapterNodes.length - 1;
  }
}

// 下一节
function gotoNext() {
  if (!hasNext.value || !courseItemVO.value) return;

  const currentChapterNodes = getChapterNodes(currentChapterIndex.value);

  if (currentNodeIndex.value < currentChapterNodes.length - 1) {
    currentNodeIndex.value++;
  } else {
    // 跳到下一章的第一节
    currentChapterIndex.value++;
    currentNodeIndex.value = 0;
  }
}

// 标记为完成
async function markAsComplete() {
  if (!currentNode.value) return;

  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
  await markNodeComplete(nodeKey);

  ElMessage.success('已标记为完成');

  // 自动跳转到下一节
  if (hasNext.value) {
    setTimeout(() => {
      gotoNext();
    }, 500);
  }
}

// 判断节点是否完成
function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
  const nodeKey = `${chapterIndex}-${nodeIndex}`;
  return completedNodes.value.has(nodeKey);
}

// 开始学习计时
function startLearningTimer() {
  learningStartTime.value = Date.now();

  // 每10秒保存一次学习进度（如果未完成）
  learningTimer.value = window.setInterval(() => {
    // 如果课程已完成，停止定时器
    if (learningRecord.value?.isComplete) {
      stopLearningTimer();
      return;
    }
    saveLearningProgress();
  }, 10000); // 10秒
}

// 停止学习计时
function stopLearningTimer() {
  if (learningTimer.value) {
    clearInterval(learningTimer.value);
    learningTimer.value = null;
  }
}

// 保存学习进度
async function saveLearningProgress() {
  if (!userInfo.value?.id || !learningRecord.value) return;

  // 如果课程已完成，不再保存进度
  if (learningRecord.value.isComplete) {
    console.log('课程已完成，跳过进度保存');
    return;
  }

  const currentTime = Date.now();
  const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒

  try {
    const updatedRecord = {
      id: learningRecord.value.id,
      userID: userInfo.value.id,
      resourceType: 2,
      resourceID: props.courseId,
      duration: (learningRecord.value.duration || 0) + duration,
      progress: currentProgress.value,
      isComplete: currentProgress.value === 100
    };

    await learningRecordApi.updateRecord(updatedRecord);

    // 更新本地记录
    learningRecord.value.duration = updatedRecord.duration;
    learningRecord.value.progress = updatedRecord.progress;
    learningRecord.value.isComplete = updatedRecord.isComplete;

    // 重置开始时间
    learningStartTime.value = currentTime;
  } catch (error) {
    console.error('保存学习进度失败:', error);
  }
}

// 标记节点完成
async function markNodeComplete(nodeKey: string) {
  if (completedNodes.value.has(nodeKey)) return;

  // 如果课程已完成，不再标记节点
  if (learningRecord.value?.isComplete) {
    console.log('课程已完成，跳过节点标记');
    return;
  }

  completedNodes.value.add(nodeKey);

  // 保存到本地存储
  localStorage.setItem(
    `course_${props.courseId}_nodes`,
    JSON.stringify(Array.from(completedNodes.value))
  );

  // 更新学习进度
  await saveLearningProgress();

  // 如果全部完成，标记课程为完成
  if (currentProgress.value === 100) {
    await markCourseComplete();
  }
}

// 标记课程完成
async function markCourseComplete() {
  if (!userInfo.value?.id || !learningRecord.value) return;

  try {
    await learningRecordApi.markComplete({
      id: learningRecord.value.id,
      userID: userInfo.value.id,
      resourceType: 2,
      resourceID: props.courseId,
      taskID: route.query.taskId as string,
      progress: 100,
      isComplete: true
    });

    ElMessage.success('恭喜你完成了整个课程！');
  } catch (error) {
    console.error('标记课程完成失败:', error);
  }
}

// 检查是否有滚动条
function hasScrollbar(): boolean {
  if (!contentAreaRef.value) return false;
  return contentAreaRef.value.scrollHeight > contentAreaRef.value.clientHeight;
}

// 处理内容区域滚动
function handleContentScroll(event: Event) {
  const target = event.target as HTMLElement;
  const scrollTop = target.scrollTop;
  const scrollHeight = target.scrollHeight;
  const clientHeight = target.clientHeight;

  // 判断是否滚动到底部（留10px容差）
  if (scrollHeight - scrollTop - clientHeight < 10) {
    if (!hasScrolledToBottom.value) {
      hasScrolledToBottom.value = true;
      // 滚动到底部，标记当前节点完成
      const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
      markNodeComplete(nodeKey);
    }
  }
}

// 处理视频进度
function handleVideoProgress(event: Event) {
  // 可以在这里记录视频播放进度
  const video = event.target as HTMLVideoElement;
  const progress = (video.currentTime / video.duration) * 100;

  // 如果播放超过80%，自动标记为完成
  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
  }
}

// 处理视频结束
function handleVideoEnded() {
  if (!isCurrentNodeCompleted.value) {
    markAsComplete();
  }
}

// 初始化富文本中的视频监听器
function initRichTextVideoListeners() {
  // 使用 setTimeout 确保 DOM 完全渲染
  setTimeout(() => {
    // 尝试多种选择器查找富文本内容区域
    const selectors = [
      '.node-content .rich-text-content',
      '.content-area .rich-text-content',
      '.rich-text-content'
    ];

    let richTextContent: Element | null = null;

    for (const selector of selectors) {
      richTextContent = document.querySelector(selector);
      if (richTextContent) {
        break;
      }
    }

    if (!richTextContent) {
      return;
    }

    const videos = richTextContent.querySelectorAll('video');

    if (videos.length === 0) {
      return;
    }

    // 初始化视频数量和完成状态
    totalRichTextVideos.value = videos.length;
    completedRichTextVideos.value.clear();

    // 监听所有视频的播放结束事件
    videos.forEach((video, index) => {
      const videoElement = video as HTMLVideoElement;
      // 移除旧的监听器，避免重复添加
      videoElement.removeEventListener('ended', () => handleRichTextVideoEnded(index));
      // 添加新的监听器，传递视频索引
      videoElement.addEventListener('ended', () => handleRichTextVideoEnded(index));
    });
  }, 300); // 延迟 300ms 确保 DOM 完全渲染
}

// 处理富文本视频播放结束
function handleRichTextVideoEnded(videoIndex: number) {
  // 标记该视频已完成
  completedRichTextVideos.value.add(videoIndex);

  const completedCount = completedRichTextVideos.value.size;

  // 检查是否所有视频都已完成
  if (completedCount >= totalRichTextVideos.value) {
    if (!isCurrentNodeCompleted.value) {
      ElMessage.success(`所有视频播放完成 (${totalRichTextVideos.value}/${totalRichTextVideos.value})`);
      markAsComplete();
    }
  }
}

// 处理音频进度
function handleAudioProgress(event: Event) {
  const audio = event.target as HTMLAudioElement;
  const progress = (audio.currentTime / audio.duration) * 100;

  if (progress > 80 && !isCurrentNodeCompleted.value) {
    // markAsComplete();
  }
}

// 处理音频结束
function handleAudioEnded() {
  if (!isCurrentNodeCompleted.value) {
    markAsComplete();
  }
}

// 判断是否为视频文件
function isVideoFile(url?: string): boolean {
  if (!url) return false;
  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
}

// 判断是否为音频文件
function isAudioFile(url?: string): boolean {
  if (!url) return false;
  const audioExtensions = ['.mp3', '.wav', '.ogg', '.m4a'];
  return audioExtensions.some(ext => url.toLowerCase().endsWith(ext));
}

// 获取文件URL
function getFileUrl(fileId?: string): string {
  if (!fileId) return '';
  return FILE_DOWNLOAD_URL + fileId;
}

// 下载文件
function downloadFile(fileId?: string) {
  if (!fileId) return;
  window.open(getFileUrl(fileId), '_blank');
}

// 切换侧边栏
function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value;
}

// 返回
// ==================== 学习历史记录功能 ====================

// 创建学习历史记录
async function createHistoryRecord() {
  if (!userInfo.value?.id || !courseItemVO.value || !currentNode.value) return;

  try {
    const chapterItem = courseItemVO.value.chapters![currentChapterIndex.value];
    const chapter = chapterItem;
    const node = currentNode.value;

    const res = await learningHistoryApi.recordCourseLearn(
      userInfo.value.id,
      props.courseId,
      chapter?.chapterID,
      node.nodeID,
      0 // 初始时长为0
    );

    if (res.success && res.data) {
      learningHistory.value = res.data;
      console.log('✅ 课程学习历史记录创建成功:', learningHistory.value);

      // 开始计时
      startHistoryTimer();
    }
  } catch (error) {
    console.error('❌ 创建课程学习历史记录失败:', error);
  }
}

// 开始学习历史计时
function startHistoryTimer() {
  historyStartTime.value = Date.now();

  // 每30秒保存一次学习历史
  historyTimer.value = window.setInterval(() => {
    saveHistoryRecord();
  }, 30000); // 30秒
}

// 停止学习历史计时
function stopHistoryTimer() {
  if (historyTimer.value) {
    clearInterval(historyTimer.value);
    historyTimer.value = null;
  }
}

// 保存学习历史记录
async function saveHistoryRecord() {
  if (!userInfo.value?.id || !learningHistory.value) return;

  const currentTime = Date.now();
  const duration = Math.floor((currentTime - historyStartTime.value) / 1000); // 秒

  // 如果时长太短（小于1秒），不保存
  if (duration < 1) return;

  try {
    const updatedHistory: TbLearningHistory = {
      ...learningHistory.value,
      duration: (learningHistory.value.duration || 0) + duration,
      endTime: new Date().toISOString()
    };

    // 调用API更新学习历史
    const res = await learningHistoryApi.recordLearningHistory(updatedHistory);

    if (res.success && res.data) {
      learningHistory.value = res.data;
      console.log(`💾 课程学习历史已保存 - 累计时长: ${learningHistory.value.duration}秒 - 节点: ${currentNode.value?.name}`);
    }

    // 重置开始时间
    historyStartTime.value = currentTime;
  } catch (error) {
    console.error('❌ 保存课程学习历史失败:', error);
  }
}

function handleBack() {
  stopLearningTimer();
  saveLearningProgress();

  // 保存学习历史记录
  if (learningHistory.value) {
    saveHistoryRecord();
  }
  stopHistoryTimer();

  emit('back');
}
</script>

<style lang="scss" scoped>
.course-learning {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.learning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .course-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .header-right {
    .progress-info {
      font-size: 14px;
      color: #606266;
    }
  }
}

.learning-container {
  display: flex;
  flex: 1;
  height: calc(100vh - 61px);
  position: relative;
}

.float-expand-btn {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;

  :deep(.el-button) {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.chapter-sidebar {
  width: 320px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  transition: width 0.3s;

  &.collapsed {
    width: 0;
    overflow: hidden;
  }

  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;

    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .chapter-list {
    padding: 8px;
  }
}

.chapter-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;

  .chapter-count {
    font-size: 12px;
    color: #909399;
    background: #f5f7fa;
    padding: 2px 8px;
    border-radius: 10px;
  }
}

.node-items {
  padding-left: 12px;
}

.node-item-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #f5f7fa;
  }

  &.active {
    background: #ecf5ff;
    color: #409eff;
  }

  &.completed {
    .check-icon {
      color: #67c23a;
    }
  }

  .node-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;

    .node-type-icon {
      font-size: 16px;
      color: #909399;
    }

    .check-icon {
      font-size: 16px;
    }

    .node-item-name {
      font-size: 13px;
      color: #606266;
    }
  }

  .node-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    .node-duration {
      font-size: 12px;
      color: #909399;
    }
  }
}

.content-area {
  flex: 1;
  overflow-y: auto;
  background: #fff;

  &.expanded {
    margin-left: 0;
  }
}

.loading-container {
  padding: 24px;
}

.node-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.node-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;

  .node-title {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 12px 0;
  }

  .node-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    .duration {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #606266;
    }
  }
}

.article-content,
.rich-text-content {
  margin-bottom: 24px;
  line-height: 1.8;
  color: #303133;
}

.rich-text-content {
  :deep(img) {
    max-width: 100%;
    height: auto;
  }

  :deep(video) {
    max-width: 100%;
    height: auto;
  }
}

.file-content {
  margin-bottom: 24px;

  .video-wrapper,
  .audio-wrapper {
    display: flex;
    justify-content: center;
    padding: 24px;
    background: #000;
    border-radius: 8px;

    .video-player {
      max-width: 100%;
      max-height: 500px;
    }

    .audio-player {
      width: 100%;
    }
  }

  .file-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: #f5f7fa;
    border-radius: 8px;

    .file-icon {
      font-size: 64px;
      color: #909399;
      margin-bottom: 16px;
    }

    p {
      margin-bottom: 16px;
      color: #606266;
    }
  }
}

.learning-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;

  .navigation-buttons {
    display: flex;
    gap: 12px;
  }
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 400px;
}
</style>