eep_page/src/components/CommonPreview.vue

<template>
  <div class="common-preview">
    <div class="common-preview__header">
      <div class="menu-container">
        {{ courseware_info.book_name }}
      </div>
      <div class="courseware">
        <span class="name-path">{{ courseware_info.name_path }}</span>
        <span class="flow-nodename">{{ courseware_info.cur_audit_flow_node_name }}</span>
        <slot name="middle" :courseware="courseware_info"></slot>
        <template v-if="type === 'edit_preview'">
          <i class="el-icon-setting" style="cursor: pointer" @click="openSimulateAnswerPermissionControl()"></i>
          <span class="link" @click="createCoursewarePreviewURL()">生成课件预览链接</span>
        </template>
        <div class="group">
          <el-checkbox v-model="isJudgeCorrect">判断对错</el-checkbox>
        </div>
        <div v-if="isShowGroup">
          <span class="link" @click="isShowGroup = false">取消显示分组</span>
          <span
            class="link"
            @click="
              groupShowAll = false;
              isShowGroup = false;
            "
            >完成选择</span
          >
        </div>
        <span
          v-else
          class="link"
          @click="
            isShowGroup = true;
            groupShowAll = true;
          "
          >显示分组</span
        >
        <span v-if="false" class="link">
          <el-checkbox v-model="showPinYin" true-label="true" false-label="false">拼音</el-checkbox>
        </span>
        <div class="operator">
          <slot name="operator" :courseware="courseware_info" :project-id="projectId"></slot>
        </div>
      </div>
    </div>

    <div class="audit-content">
      <!-- 左侧菜单栏  -->
      <aside v-if="navigationShow" class="left-menu">
        <div class="courseware-info">
          <div class="cover-image">
            <img v-if="project.cover_image_file_url.length > 0" :src="project.cover_image_file_url" alt="cover-image" />
          </div>
          <div class="info-content">
            <div class="catalogue-icon" @click="toggleNavigationShow">
              <SvgIcon icon-class="catalogue" size="54" />
            </div>
            <div class="courseware">
              <div class="name nowrap-ellipsis" :title="courseware_info.book_name">
                {{ courseware_info.book_name }}
              </div>
              <div class="editor" :title="project.editor">
                {{ project.editor }}
              </div>
            </div>
          </div>
        </div>
        <!-- 教材章节树 -->
        <div class="courseware-tree">
          <div
            v-for="{
              id: nodeId,
              name,
              status,
              status_name,
              deep,
              is_leaf_chapter,
              is_my_edit_task,
              is_show_submit_audit_button,
            } in node_list"
            :key="nodeId"
            :class="['menu-item', { active: curSelectId === nodeId }, { courseware: isTrue(is_leaf_chapter) }]"
            :style="computedNameStyle(deep, isTrue(is_leaf_chapter))"
            @click="selectChapterNode(nodeId, isTrue(is_leaf_chapter))"
          >
            <span
              class="name nowrap-ellipsis"
              :title="name"
              :style="{ color: computedNameColor(status, is_leaf_chapter, is_my_edit_task, nodeId) }"
            >
              {{ name }}
            </span>
            <span v-if="['audit', 'edit_preview'].includes(type)" class="status">{{ status_name }}</span>
            <template v-if="!isTrue(is_leaf_chapter) && isTrue(is_show_submit_audit_button)">
              <span class="link" @click="submitChapterAllCoursewareToAuditFlow(nodeId)">提交审核</span>
            </template>
          </div>
        </div>
      </aside>

      <div
        ref="previewMain"
        class="main-container"
        :style="{
          paddingLeft: !isFullScreen && navigationShow ? '15px' : '315px',
          paddingRight: !isFullScreen && sidebarShow ? '15px' : '315px',
        }"
      >
        <!-- 左侧菜单栏 - 收缩 -->
        <div v-if="!navigationShow && !isFullScreen" class="catalogue-bar" @click="toggleNavigationShow">
          <SvgIcon icon-class="catalogue" size="54" />
        </div>

        <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
          <div class="preview-left"></div>
          <!-- <div
            id="selectable-area-preview"
            @mousedown="startSelection"
            @mousemove="updateSelection"
            @mouseup="endSelection"
            @mouseleave="endSelection"
          > -->
          <CoursewarePreview
            v-if="courseware_info.book_name"
            ref="courserware"
            :is-show-group="isShowGroup"
            :group-show-all="groupShowAll"
            :group-row-list="content_group_row_list"
            :data="data"
            :courseware-id="curSelectId"
            :component-list="component_list"
            :background="background"
            :can-remark="isTrue(courseware_info.is_my_audit_task) && isTrue(courseware_info.is_can_add_audit_remark)"
            :show-remark="isShowAudit"
            :component-remark-obj="remark_list_obj"
            :project="project"
            :type="type"
            @computeScroll="computeScroll"
            @addRemark="addRemark"
            @editNote="handEditNote"
            @saveCollect="saveCollect"
            @getTranslate="getTranslate"
            @selectedComponent="$emit('selectedComponent', $event)"
          />
          <!-- <div
              v-if="isSelecting"
              :style="{
                position: 'absolute',
                top: `${menuPosition.startY}px`,
                left: `${menuPosition.startX}px`,
                width: `${menuPosition.endX - menuPosition.startX}px`,
                height: `${menuPosition.endY - menuPosition.startY}px`,
                border: '2px solid #165DFF',
              }"
            ></div>
          </div> -->

          <div class="preview-right"></div>
        </main>

        <!-- 右侧菜单栏 - 收缩 -->
        <aside v-if="!sidebarShow && !isFullScreen" class="sidebar-bar">
          <aside class="toolbar">
            <div class="toolbar-special">
              <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" @click="fullScreen" />
              <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" />
              <img :src="require(`@/assets/icon/arrow-down.png`)" alt="伸缩" @click="toggleSidebarShow" />
            </div>
          </aside>
        </aside>
      </div>
      <div v-if="!sidebarShow" class="back-top" @click="backTop">
        <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
      </div>

      <!-- 右侧工具栏 -->
      <aside v-if="sidebarShow" ref="sidebarMenu" class="sidebar">
        <aside class="toolbar">
          <div class="toolbar-special">
            <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" @click="fullScreen" />
            <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" />
          </div>
          <div v-if="sidebarShow" class="toolbar-list">
            <div
              v-for="{ icon, title, handle, param, children } in sidebarIconList"
              :key="icon"
              :class="['sidebar-item', { active: curToolbarIcon === icon }]"
              :title="title"
              @click="handleSidebarClick(handle, param, icon, children)"
            >
              <div
                class="sidebar-icon icon-mask"
                :style="{
                  backgroundColor: curToolbarIcon === icon ? '#fff' : '#1E2129',
                  maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
                }"
              ></div>
            </div>
          </div>
          <div class="adjustable" @click="toggleSidebarShow">
            <img :src="require(`@/assets/icon/arrow-up.png`)" alt="伸缩" />
          </div>
        </aside>
        <div class="content">
          <div v-if="curToolbarIcon === 'search'" class="resource_box">
            <h5>{{ drawerTitle }}</h5>
            <div style="height: 40px"></div>
            <el-row :gutter="10" style="margin: 5px">
              <el-col :span="16">
                <el-input v-model="searchContent" placeholder="请输入文本内容" clearable />
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="querySearchList"> 查询 </el-button>
              </el-col>
            </el-row>
            <div>
              <el-table :data="searchList" :show-header="false">
                <!-- <el-table-column prop="courseware_name" label="课件" />
                <el-table-column prop="component_type" label="组件" /> -->
                <el-table-column>
                  <template #default="{ row }">
                    {{ row.courseware_name + ' / ' + row.component_type_name }}
                  </template>
                </el-table-column>
                <el-table-column label="" width="50">
                  <template #default="{ row }">
                    <el-link type="primary" @click="handleLocation(row, 0)">定位</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- <div v-if="curToolbarIcon === 'totalResources'" class="resource_box"></div> -->
          <div v-if="['image', 'audio', 'video', 'text'].includes(twoCurToolbarIcon)" class="resource_box">
            <div class="source-toolbar-list">
              <div
                v-for="{ icon, title, handle, param } in twoSidebarList"
                :key="icon"
                :class="['sidebar-item', { active: twoCurToolbarIcon === icon }]"
                :title="title"
                @click="handleSidebarClick(handle, param, icon, '', 2)"
              >
                <div
                  class="sidebar-icon icon-mask"
                  :style="{
                    backgroundColor: twoCurToolbarIcon === icon ? '#fff' : '#1E2129',
                    maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
                  }"
                ></div>
              </div>
            </div>
            <div style="height: 40px"></div>

            <div style="margin: 5px">
              <span>全部显示 </span>
              <el-switch v-model="multimediaIsAllShow" :active-value="true" :inactive-value="false" />
            </div>
            <el-collapse v-model="activeBookChapterId" accordion @change="multimediaHandleChange">
              <el-collapse-item
                v-for="chapter in bookChapterList"
                :key="chapter.id"
                :name="chapter.id"
                :title="chapter.name"
              >
                <!-- 加载状态 -->
                <div v-if="multimediaLoadingStates" class="loading-text">加载中...</div>

                <!-- 加载完成显示数据 -->
                <div v-else-if="chapter.data">
                  <ul
                    :class="parseInt(drawerType) == 5 ? 'scroll-container file-list' : 'scroll-container'"
                    infinite-scroll-disabled="disabled"
                    :infinite-scroll-immediate="false"
                  >
                    <li v-for="(item, index) in chapter.data" :key="`${chapter.id}-${index}`" class="list-item">
                      <template v-if="parseInt(drawerType) === 0">
                        <el-image v-if="shouldMediaShowItem(chapter, item)" :src="item.file_url" fit="contain" />
                      </template>
                      <template v-else-if="parseInt(drawerType) === 1">
                        <AudioPlay
                          v-if="shouldMediaShowItem(chapter, item)"
                          view-size="middle"
                          :file-id="item.file_id"
                          :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
                          :show-slider="true"
                          :audio-index="index"
                        />
                      </template>
                      <template v-else-if="parseInt(drawerType) === 2">
                        <VideoPlay
                          v-if="shouldMediaShowItem(chapter, item)"
                          view-size="small"
                          :file-id="item.file_id"
                          :video-index="index"
                        />
                      </template>
                      <template v-else-if="parseInt(drawerType) === 3"> </template>
                      <template v-else-if="parseInt(drawerType) === 4"> </template>
                      <template v-else-if="parseInt(drawerType) === 5">
                        <div class="file-name">
                          <el-link>
                            <span @click="openFile(item)">
                              <SvgIcon icon-class="file" size="24" />
                              <p>
                                <span>{{ item.file_name }}</span>
                              </p>
                            </span>
                          </el-link>
                        </div>
                      </template>
                      <!-- 资源底部的操作 -->
                      <div class="file-handle-info">
                        <span v-if="![1, 5].includes(parseInt(drawerType))" class="word">{{ item.file_name }}</span>
                        <div class="mark">
                          <el-checkbox
                            v-model="item.is_hided"
                            :disabled="!item.is_can_edit"
                            size="small"
                            @change="handleMediaShowChange(item)"
                          >
                            隐藏
                          </el-checkbox>
                          <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(item, 0)" />
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>

                <!-- 加载失败或未加载 -->
                <div v-else class="error-text">没有资源</div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <div v-if="curToolbarIcon === 'collect'" class="resource_box">
            <h5>{{ drawerTitle }}</h5>
            <div style="height: 40px"></div>
            <ul v-if="allCottectList.length > 0" class="card-box">
              <li v-for="item in allCottectList" :key="item.id">
                <span class="el-icon-notebook-2"> 原文</span>
                <span>{{ item.text }}</span>
                <div>
                  <el-button type="text" class="el-icon-delete" @click="handDelCollect(item.id)"> 删除</el-button>
                  <el-divider direction="vertical" />
                  <el-button type="text" class="el-icon-place" @click="handleLocation(item, 12)"> 定位</el-button>
                </div>
              </li>
            </ul>
          </div>

          <div v-if="curToolbarIcon === 'note'" class="resource_box">
            <h5>{{ drawerTitle }}</h5>
            <div style="height: 40px"></div>
            <ul v-if="allNoteList.length > 0" class="card-box">
              <li v-for="item in allNoteList" :key="item.id">
                <span class="el-icon-notebook-2"> 原文</span>
                <span>{{ item.text }}</span>
                <el-divider class="mt10" />
                <span v-html="item.note"></span>
                <div>
                  <el-button type="text" class="el-icon-edit" @click="handEditNote(item)"> 编辑</el-button>
                  <el-divider direction="vertical" />
                  <el-button type="text" class="el-icon-delete" @click="handDelNote(item.id)"> 删除</el-button>
                  <el-divider direction="vertical" />
                  <el-button type="text" class="el-icon-place" @click="handleLocation(item, 11)"> 定位</el-button>
                </div>
              </li>
            </ul>
          </div>

          <div v-if="curToolbarIcon === 'translate'" class="resource_box">
            <h5>{{ drawerTitle }}</h5>
            <div style="height: 40px"></div>
            <div style="padding: 10px">
              <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
                <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
              </el-select>
            </div>
          </div>

          <template v-if="curToolbarIcon === 'audit'">
            <AuditRemark
              :remark-list="remark_list"
              :is-audit="isShowAudit"
              @deleteRemarks="deleteRemarks"
              @handleLocationRemarks="handleLocationRemarks"
            />
          </template>
          <!-- 设置 -->
          <div v-if="curToolbarIcon === 'setting'" class="setting">
            <h5>{{ drawerTitle }}</h5>
            <div class="setting-content">
              <el-switch
                v-model="chinese"
                active-value="zh-Hant"
                active-text="繁体"
                inactive-value="zh-Hans"
                inactive-text="简体"
              />
            </div>
          </div>
        </div>

        <div class="back-top" @click="backTop">
          <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
        </div>
      </aside>
    </div>

    <el-dialog
      title="添加课件审核批注"
      :visible="visible"
      width="680px"
      :close-on-click-modal="false"
      class="remark-dialog"
      @close="dialogClose('')"
    >
      <Remark :remark="remark" :project-id="projectId" :courseware-id="select_node ? select_node : id" />
      <div slot="footer">
        <el-button @click="dialogClose('')">取消</el-button>
        <el-button type="primary" :loading="submit_loading" @click="addCoursewareAuditRemark(select_node)">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="" :visible="visibleMindMap" width="1100px" class="audit-dialog" @close="dialogClose('MindMap')">
      <MindMap
        v-if="isChildDataLoad"
        ref="mindMapRef"
        :project-id="projectId"
        :mind-map-json-data="mindMapJsonData"
        @child-click="handleNodeClick"
      />
    </el-dialog>

    <el-dialog
      title=""
      :visible="visibleVisNetwork"
      width="1100px"
      class="audit-dialog"
      :close-on-click-modal="false"
      @close="dialogClose('VisNetwork')"
    >
      <VisNetwork ref="visNetworkRef" :book-id="projectId" @child-click="handleNodeClick" />
    </el-dialog>

    <ExplanatoryNoteDialog
      ref="explanatoryNote"
      :open.sync="editDialogOpen"
      :init-data="oldRichData"
      title-text="笔记"
      @confirm="saveNote"
      @cancel="delNote"
    />

    <TranslateDialog :open.sync="showTranslate" :init-text="translateText" :book-id="projectId" title-text="翻译" />

    <SimAnswerPermissionControl :visible.sync="visiblePermissionControl" :permission-control.sync="permissionControl" />
    <PreviewURL :url="preview_url" :visible.sync="visiblePreviewURL" />
  </div>
</template>

<script>
import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
import MindMap from '@/components/MindMap.vue';
import VisNetwork from '@/components/VisNetwork.vue';
import VideoPlay from '@/views/book/courseware/preview/components/common/VideoPlay.vue';
import AudioPlay from '@/views/book/courseware/preview/components/common/AudioPlay.vue';
import AuditRemark from '@/components/AuditRemark.vue';
import ExplanatoryNoteDialog from '@/components/ExplanatoryNoteDialog.vue';
import TranslateDialog from '@/components/TranslateDialog.vue';
import SimAnswerPermissionControl from '@/components/SimAnswerPermissionControl.vue';
import PreviewURL from '@/views/project_manage/common/PreviewURL.vue';
import Remark from './Remark.vue';

import {
  GetBookCoursewareInfo,
  GetProjectBaseInfo,
  GetCoursewareAuditRemarkList,
  AddCoursewareAuditRemark,
  DeleteCoursewareAuditRemarkList,
  GetProjectInfo,
} from '@/api/project';
import {
  ContentGetCoursewareContent_View,
  ChapterGetBookChapterStructExpandList,
  GetBookBaseInfo,
  MangerGetBookMindMap,
  GetBookChapterStructExpandList,
  PageQueryBookResourceList,
  GetLanguageTypeList,
  GetMyNoteList,
  DeleteMyNote,
  AddMyNote,
  UpdateMyNote,
  AddMyCollect,
  GetMyCollectList,
  DeleteMyCollect,
  SearchBookContentText,
  SetBookResourceHide,
  SubmitChapterAllCoursewareToAuditFlow,
} from '@/api/book';
import { toggleFullScreen } from '@/utils/common';
import * as OpenCC from 'opencc-js';
import { isTrue } from '@/utils/validate';
import { CreateCoursewarePreviewURL } from '@/api/app';

export default {
  name: 'CommonPreview',
  components: {
    CoursewarePreview,
    MindMap,
    AudioPlay,
    VideoPlay,
    AuditRemark,
    ExplanatoryNoteDialog,
    VisNetwork,
    SimAnswerPermissionControl,
    PreviewURL,
    Remark,
    TranslateDialog,
  },
  provide() {
    return {
      getLang: () => this.lang,
      getChinese: () => this.chinese,
      getShowPinYin: () => this.showPinYin,
      getLangList: () => this.langList,
      convertText: this.convertText,
      getTitleList: () => this.title_list,
      getPermissionControl: () => this.permissionControl,
    };
  },
  inject: ['processHtmlString'],
  props: {
    projectId: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    // 是否是审核页面
    isAudit: {
      type: Boolean,
      default: false,
    },
    isShowAudit: {
      type: Boolean,
      default: true,
    },
    isBook: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    const sidebarIconList = [
      { icon: 'search', title: '搜索', handle: 'getSearch', param: { type: '13' } },
      { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
      { icon: 'knowledge', title: '知识图谱', handle: 'openVisNetwork', param: {} },
      {
        icon: 'totalResources',
        title: '总资源',
        handle: '',
        param: {},
        children: [
          { icon: 'audio', title: '音频', handle: 'openDrawer', param: { type: '1' } },
          { icon: 'image', title: '图片', handle: 'openDrawer', param: { type: '0' } },
          { icon: 'video', title: '视频', handle: 'openDrawer', param: { type: '2' } },
          { icon: 'text', title: '文本', handle: 'openDrawer', param: { type: '5' } },
        ],
      },
      { icon: 'collect', title: '收藏', handle: 'getCollect', param: { type: '11' } },
      { icon: 'note', title: '笔记', handle: 'getNote', param: { type: '12' } },
      { icon: 'translate', title: '多语言', handle: 'openTranslate', param: { type: '21' } },
      { icon: 'setting', title: '设置', handle: 'openSetting', param: { type: 6 } },
    ];

    if (this.isShowAudit) {
      sidebarIconList.push({ icon: 'audit', title: '审核批注', handle: 'openAudit', param: {} });
    }

    return {
      select_node: this.id,
      courseware_info: {
        book_name: '',
        is_can_start_edit: 'false',
        is_can_submit_audit: 'false',
        is_can_audit_pass: 'false',
        is_can_audit_reject: 'false',
        is_can_add_audit_remark: 'false',
        is_can_finish_audit: 'false',
        is_can_request_shangjia_book: 'false',
        is_can_request_rollback_project: 'false',
        is_can_shangjia_book: 'false',
        is_can_rollback_project: 'false',
      },
      background: {
        background_image_url: '',
        background_position: {
          left: 0,
          top: 0,
        },
        background: {},
      },
      node_list: [],
      data: { row_list: [] },
      component_list: [],
      content_group_row_list: [],
      remark_list: [],
      remark_list_obj: {}, // 存放以组件为对象的批注数组
      searchList: [],
      searchContent: '',
      visible: false,
      remark: {
        remark_content: '',
        file_id_list: [],
      },
      submit_loading: false,
      isTrue,
      menuPosition: {
        x: -1,
        y: -1,
        componentId: 'WHOLE',
        startX: null,
        startY: null,
        endX: null,
        endY: null,
      },
      isSelecting: false,

      curToolbarIcon: this.isShowAudit ? 'audit' : '',
      sidebarIconList,
      twoSidebarList: [],
      twoCurToolbarIcon: '',
      visibleMindMap: false,
      visibleVisNetwork: false,
      isChildDataLoad: false,
      mindMapJsonData: {}, // 思维导图json数据
      drawerType: '', // 抽屉类型
      titleMap: {
        0: '图片资源',
        1: '音频资源',
        2: '视频资源',
        5: '文本资源',
        6: '设置',
        11: '收藏列表',
        12: '笔记列表',
        13: '搜索结果',
        21: '多语言',
      },
      page_capacity: 10,
      cur_page: 1,
      file_list: [],
      total_count: 0,
      loading: false,
      lastLoadTime: 0,
      minLoadInterval: 3 * 1000,
      isShowGroup: false,
      groupShowAll: true,
      opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
      langList: [],
      lang: 'ZH',
      chinese: 'zh-Hans', // 语言简体中文zh-Hans，繁体中文zh-Hant
      showPinYin: 'false',
      isJudgeCorrect: false,
      isShowAnswer: false,
      curSelectId: this.id,
      navigationShow: true,
      sidebarShow: true,
      project: {
        editor: '', // 作者
        cover_image_file_id: null, // 封面图片ID
        cover_image_file_url: '', // 封面图片URL
      },
      allNoteList: [],
      editDialogOpen: false,
      showTranslate: false,
      translateText: '',
      oldRichData: {},
      newSelectedInfo: null,
      allCottectList: [],
      bookChapterList: [],
      book_id: '',
      activeBookChapterId: '',
      multimediaLoadingStates: true,
      multimediaIsAllShow: false,
      isFullScreen: false, // 是否全屏状态
      title_list: [],
      visiblePermissionControl: false, // 模拟答题权限控制弹窗显示状态
      permissionControl: {
        can_answer: true, // 可作答
        can_judge_correct: false, // 可判断对错（客观题）
        can_show_answer: false, // 可查看答案
        can_correct: false, // 可批改
        can_check_correct: false, // 可查看批改
      },
      preview_url: '', // 课件预览链接
      visiblePreviewURL: false, // 预览链接弹窗显示状态
    };
  },
  computed: {
    disabled() {
      const result = this.loading || this.noMore;
      return result;
    },
    noMore() {
      const result = this.file_list.length >= this.total_count;
      return result;
    },
    drawerTitle() {
      return this.titleMap[this.drawerType] || '资源列表';
    },
    shouldMediaShowItem() {
      return (chapter, item) => {
        return this.activeBookChapterId === chapter.id && item && item.file_id;
      };
    },
  },
  watch: {
    isJudgeCorrect(newVal) {
      if (!newVal) {
        this.isShowAnswer = false;
      }
      this.simulateAnswer(newVal);
    },
    isShowAnswer() {
      this.simulateAnswer();
    },
    curSelectId() {
      if (this.curToolbarIcon === 'note') {
        this.getNote();
      } else if (this.curToolbarIcon === 'collect') {
        this.getCollect();
      }
    },
    multimediaIsAllShow() {
      // 切换显示全部，需清空所有数据，全部重新加载
      this.bookChapterList.forEach((x) => {
        this.$set(x, 'data', null);
      });

      this.multimediaHandleChange();
    },
  },
  created() {
    if (this.id) {
      this.getBookCoursewareInfo(this.id);
      this.getCoursewareComponentContent_View(this.id);
      this.getCoursewareAuditRemarkList(this.id);
    } else {
      this.isBook ? this.getBookBaseInfo() : this.getProjectBaseInfo();
    }
    this.getBookChapterStructExpandList();
    if (!this.isBook) {
      this.getProjectInfo();
    }

    // 监听全屏事件
    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement) {
        this.isFullScreen = true;
      } else {
        this.isFullScreen = false;
      }
    });
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', () => {});
  },
  methods: {
    getProjectBaseInfo() {
      GetProjectBaseInfo({ id: this.projectId }).then(({ project_info }) => {
        this.courseware_info = { ...project_info, book_name: project_info.name };
      });
    },

    getBookBaseInfo() {
      GetBookBaseInfo({ id: this.projectId }).then(({ book_info }) => {
        this.courseware_info = { ...this.courseware_info, ...book_info, book_name: book_info.name };
        this.project = {
          editor: book_info.editor,
          cover_image_file_id: book_info.cover_image_file_id,
          cover_image_file_url: book_info.cover_image_file_url,
        };
      });
    },

    getProjectInfo() {
      GetProjectInfo({ id: this.projectId }).then(({ project_info }) => {
        if (project_info.cover_image_file_url) {
          this.project = project_info;
        }
      });
    },
    /**
     * 更新背景信息
     * @param {Object} background - 背景信息对象
     */
    updateBackground(background) {
      this.background = background;
    },
    /**
     * 得到教材课件信息
     * @param {string} id - 课件ID
     */
    getBookCoursewareInfo(id) {
      GetBookCoursewareInfo({ id, is_contain_producer: 'true', is_contain_auditor: 'true' }).then(
        ({ courseware_info }) => {
          this.courseware_info = { ...this.courseware_info, ...courseware_info };
          this.getLangList();
        },
      );
    },
    /**
     * 得到课件内容（展示内容）
     * @param {string} id - 课件ID
     */
    getCoursewareComponentContent_View(id) {
      ContentGetCoursewareContent_View({ id }).then(
        ({ content, component_list, content_group_row_list, title_list, background }) => {
          if (title_list) this.title_list = title_list || [];
          if (background) {
            this.background = JSON.parse(background);
            this.$emit('updateBackground', this.background);
          }

          if (content) {
            const _content = JSON.parse(content);
            this.data = _content;
          } else {
            this.data = { row_list: [] };
          }
          let processHtmlString = typeof this.processHtmlString === 'function' ? this.processHtmlString : null;
          if (component_list) this.component_list = component_list;
          this.component_list.forEach((x) => {
            if (x.component_type === 'audio') {
              let _c = JSON.parse(x.content);
              let p = _c.property || {};
              if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
              if (p.view_method === 'independent' && !p.style_mode) {
                p.style_mode = 'middle';
              }
              if (!p.style_mode) p.style_mode = 'big';
              if (p.view_method === 'icon') {
                p.file_name_display_mode = 'false';
                p.view_method = 'independent';
                p.style_mode = 'small';
              }

              x.content = JSON.stringify(_c);
            } else if (x.component_type === 'richtext') {
              if (!processHtmlString) return;
              let _c = JSON.parse(x.content);
              let p = _c.property || {};
              let lev = Number(p.title_style_level);
              if (p.is_title !== 'true' || lev < 1 || !_c.content) return;

              let style = this.title_list.find((y) => y.level === lev) || {};
              if (style && style.style) {
                style = JSON.parse(style.style);
                let c_text = _c.content;

                const parser = new DOMParser();
                const doc = parser.parseFromString(c_text, 'text/html');
                const body = doc.body;
                const pElements = body.querySelectorAll('p');
                processHtmlString(pElements, style);
                _c.content = body.innerHTML;

                x.content = JSON.stringify(_c);
              }
            }
          });

          if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
        },
      );
    },
    getLangList() {
      GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
        ({ language_type_list }) => {
          this.langList = language_type_list;
        },
      );
    },

    /**
     * 得到教材章节结构展开列表
     */
    getBookChapterStructExpandList() {
      ChapterGetBookChapterStructExpandList({
        book_id: this.projectId,
        node_deep_mode: 0,
        is_contain_producer: 'true',
        is_contain_auditor: 'true',
      }).then(({ node_list }) => {
        this.node_list = node_list;
      });
    },

    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     */
    selectNode(nodeId) {
      this.getCoursewareComponentContent_View(nodeId);
      this.getBookCoursewareInfo(nodeId);
      this.getCoursewareAuditRemarkList(nodeId);
      this.select_node = nodeId;
    },
    // 审核批注列表
    getCoursewareAuditRemarkList(id) {
      this.remark_list = [];
      GetCoursewareAuditRemarkList({
        courseware_id: id,
      }).then(({ remark_list }) => {
        this.remark_list = remark_list;
        if (!remark_list) return;

        this.remark_list_obj = remark_list.reduce((acc, item) => {
          if (!acc[item.component_id]) {
            acc[item.component_id] = [];
          }
          acc[item.component_id].push(item);
          return acc;
        }, {});
      });
    },
    addRemark(selectNode, x, y, componentId, content_select) {
      this.remark = {
        remark_content: '',
        file_id_list: [],
      };
      this.visible = true;
      if (selectNode) {
        this.menuPosition = {
          x,
          y,
          componentId,
          content_select,
        };
      } else {
        this.menuPosition = {
          x: -1,
          y: -1,
          componentId: 'WHOLE',
          content_select,
        };
      }
    },
    dialogClose(type) {
      this[`visible${type}`] = false;
    },
    // 添加审核批注
    addCoursewareAuditRemark(id) {
      this.submit_loading = true;
      AddCoursewareAuditRemark({
        courseware_id: id || this.id,
        content: this.remark.remark_content,
        component_id: this.menuPosition.componentId,
        position_x: this.menuPosition.x,
        position_y: this.menuPosition.y,
        content_select: this.menuPosition.content_select,
        file_id_list: this.remark.file_id_list,
      })
        .then(() => {
          this.submit_loading = false;
          this.visible = false;
          this.getCoursewareAuditRemarkList(id || this.id);
        })
        .catch(() => {
          this.submit_loading = false;
        });
    },
    // 删除批注
    deleteRemarks(id) {
      this.$confirm('确定要删除此条批注吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteCoursewareAuditRemarkList({ id }).then(() => {
            this.getCoursewareAuditRemarkList(this.select_node ? this.select_node : this.id);
            this.$message.success('删除成功!');
          });
        })
        .catch(() => {});
    },
    // 定位批注
    async handleLocationRemarks(componentId) {
      if (componentId) {
        let node = await this.$refs.courserware.findChildComponentByKey(componentId);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.$el.offsetTop - 50,
            left: node.$el.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
    },
    // 计算previewMain滑动距离
    computeScroll() {
      this.$refs.courserware.handleResult(
        this.$refs.previewMain.scrollTop,
        this.$refs.previewMain.scrollLeft,
        this.select_node,
      );
    },
    /**
     * 处理侧边栏图标点击事件
     * @param {string} handle - 处理函数名
     * @param {any} param - 处理函数参数
     * @param {string} icon - 图标名称
     */
    handleSidebarClick(handle, param, icon, children, barLevel) {
      if (typeof handle === 'string' && handle && typeof this[handle] === 'function') {
        this[handle](param);
      }

      if (barLevel === 2) {
        this.twoCurToolbarIcon = icon;
      } else {
        this.curToolbarIcon = icon;
        this.twoCurToolbarIcon = '';
      }

      if (children && children.length > 0 && Array.isArray(children)) {
        this.twoSidebarList = children;
        this.twoCurToolbarIcon = children[0].icon;
        this.openDrawer(children[0].param);
      }
    },
    openMindMap() {
      MangerGetBookMindMap({ book_id: this.projectId }).then(({ content }) => {
        if (content) {
          this.mindMapJsonData = JSON.parse(content);
          this.isChildDataLoad = true;
        }
      });
      this.visibleMindMap = true;
    },
    async handleNodeClick(data) {
      let [nodeId, componentId] = data.split('#');
      if (nodeId) this.selectNode(nodeId);
      if (componentId) {
        let node = await this.$refs.courserware.findChildComponentByKey(componentId);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.$el.offsetTop - 50,
            left: node.$el.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
      this.visibleMindMap = false;
      this.visibleVisNetwork = false;
    },
    /**
     * 打开知识图谱
     */
    async openVisNetwork() {
      this.visibleVisNetwork = true;
    },
    /**
     * 打开选择语言弹窗
     */
    openTranslate(params) {
      if (params && params.type) this.drawerType = Number(params.type);
    },
    openSetting({ type }) {
      this.drawerType = type;
    },
    /**
     * 打开抽屉并初始化加载
     * @param {Object} param - 抽屉参数
     * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频, 3:H5 游戏,4:3D 模型,5:文本）
     */
    openDrawer({ type }) {
      if (this.drawerType === type) {
        this.drawerType = '';
        return;
      }
      this.activeBookChapterId = '';
      this.multimediaIsAllShow = true;
      // 重置所有加载状态
      this.resetLoadState();
      this.drawerType = type;
      this.$nextTick(() => {
        // 确保DOM更新后触发加载
        this.loadBookChapterStructExpandList();
      });
    },
    openAudit() {
      this.drawerType = '';
    },
    resetLoadState() {
      this.cur_page = 1;
      this.file_list = [];
      this.total_count = 0;
      this.loading = false;
      this.lastLoadTime = 0; // 重置时间戳，允许立即加载
      this.loadCount = 0;
    },

    /**
     * 加载章节
     */
    async loadBookChapterStructExpandList() {
      const params = {
        book_id: this.projectId,
        node_deep_mode: 3, // 节点深度模式 0【全部】,1【只查询章节】2【只查询非叶子章节】3【只查询第一层】
        is_contain_root_node: 'false', // 是否包含根节点（把教材作为根节点）
        is_contain_producer: 'false', // 是否包含制作人信息
        is_contain_auditor: 'false', // 是否包含审核人信息
      };
      await GetBookChapterStructExpandList(params).then(({ node_list }) => {
        this.bookChapterList = node_list || [];
      });
    },
    /**
     * 加载章节下的资源
     */
    async loadmultimediaList() {
      const params = {
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        book_id: this.projectId,
        book_chapter_node_id: this.activeBookChapterId,
        type: parseInt(this.drawerType),
        scope: this.multimediaIsAllShow ? -1 : 0,
      };
      await PageQueryBookResourceList(params)
        .then(({ total_count, resource_list }) => {
          this.total_count = total_count;

          this.file_list = resource_list || [];
          this.file_list.forEach((x, i) => {
            this.$set(x, 'is_can_edit', x.is_can_edit === 'true');
            this.$set(x, 'is_hided', x.is_hided === 'true');
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 点击章节，切换数据
     */
    async multimediaHandleChange(id) {
      const item = this.bookChapterList.find((item) => item.id === this.activeBookChapterId);
      if (item) {
        this.multimediaLoadingStates = true;
        if ((!item.data && !item.error) || !id) {
          await this.loadmultimediaList();
          let tmpList = this.file_list && this.file_list.length > 0 ? [...this.file_list] : null;
          this.$set(item, 'data', tmpList);
          this.multimediaLoadingStates = false;
        } else {
          this.multimediaLoadingStates = false;
        }
      }
    },

    /**
     * 切换资源显示隐藏
     */
    handleMediaShowChange(item) {
      const params = { id: item.id, is_hided: item.is_hided ? 'true' : 'false' };
      SetBookResourceHide(params).then((res) => {
        // 如果不是显示全部资源，则需要重新加载
        if (!this.multimediaIsAllShow) {
          this.multimediaHandleChange();
        }
      });
    },
    isScrollAtBottom(container) {
      if (!container) return false;
      return container.scrollHeight - container.scrollTop <= container.clientHeight + 5;
    },
    async handleFileClick(courseware_id, component_id) {
      if (courseware_id) this.selectNode(courseware_id);
      if (component_id) {
        let node = await this.$refs.courserware.findChildComponentByKey(component_id);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.offsetTop - 50,
            left: node.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
    },
    /**
     * 文本转换
     * @param {string} text - 要转换的文本
     * @returns {string} - 转换后的文本
     */
    convertText(text) {
      if (this.chinese === 'zh-Hant' && this.opencc) {
        try {
          if (/<[a-z][\s\S]*>/i.test(text)) {
            return this.convertHtmlPreserveAttributes(text);
          }
        } catch (e) {
          return text;
        }
        return this.opencc(text);
      }
      return text;
    },

    /**
     * 使用OpenCC解析HTML并仅转换文本节点，保留属性（包括内联样式/font-family）保持不变。防止字体名称像“微软雅黑' 正在转换为'微軟雅黑'.
     */
    convertHtmlPreserveAttributes(html) {
      try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html'); // 解析HTML字符串，返回Document对象

        // 跳过 script 和 style 标签
        const skipTags = new Set(['SCRIPT', 'STYLE']);

        const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
        let node = walker.nextNode();
        while (node) {
          const parent = node.parentNode;
          if (parent && !skipTags.has(parent.nodeName)) {
            const v = node.nodeValue;
            if (v && v.trim()) {
              node.nodeValue = this.opencc(v);
            }
          }
          node = walker.nextNode();
        }

        return doc.body.innerHTML;
      } catch (err) {
        try {
          return this.opencc(html);
        } catch (e) {
          return html;
        }
      }
    },

    simulateAnswer(disabled = true) {
      this.$refs.courserware.simulateAnswer(this.isJudgeCorrect, this.isShowAnswer, disabled);
    },

    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     * @param {boolean} isLeaf - 是否是叶子节点
     */
    selectChapterNode(nodeId, isLeaf) {
      if (!isLeaf) return;
      if (this.curSelectId === nodeId) return;
      this.curSelectId = nodeId;
      this.selectNode(nodeId);
      this.isShowGroup = false;
      this.groupShowAll = true;
      this.$refs.courserware.clearRowCheckList();
    },
    /**
     * 计算章节名称样式
     * @param {number} deep - 节点深度
     * @param {boolean} isLeaf - 是否是叶子节点
     * @returns {Object} - 样式对象
     */
    computedNameStyle(deep, isLeaf) {
      return {
        'padding-left': `${(deep - 1) * 8}px`,
        cursor: isLeaf ? 'pointer' : 'auto',
      };
    },
    /**
     * 计算章节名称颜色
     * @param {string} status - 章节状态
     * @param {boolean} is_leaf_chapter - 是否是叶子章节
     * @param {string} is_my_edit_task - 是否是我的编辑任务
     * @param {string} nodeId - 节点ID
     * @returns {string} - 颜色值
     */
    computedNameColor(status, is_leaf_chapter, is_my_edit_task, nodeId) {
      if (!isTrue(is_leaf_chapter)) {
        return '';
      }

      // 当前选中节点，显示高亮蓝色
      if (this.curSelectId === nodeId) {
        return '#4095e5';
      }

      // 审核通过显示绿色，其他显示默认蓝色
      let color = '#74b9ff';
      if (status === 2) {
        color = '#27ae60';
        return color;
      }

      // 如果当前节点不可编辑，显示默认色
      if (is_my_edit_task === 'false') {
        return '';
      }

      return color;
    },
    /**
     * 切换左侧导航栏显示与隐藏
     */
    toggleNavigationShow() {
      this.navigationShow = !this.navigationShow;
    },
    /**
     * 切换右侧工具栏显示与隐藏
     */
    toggleSidebarShow() {
      this.sidebarShow = !this.sidebarShow;
    },
    backTop() {
      this.$refs.previewMain.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    },
    /**
     * 定位到对应位置
     * @param {Object} item - 位置对象
     * @param {number} type - 定位类型（11: 笔记定位, 12: 收藏定位, 0: 资源定位）
     */
    handleLocation(item, type) {
      if (type === 0) {
        let did = `${item.courseware_id}#${item.component_id}`;
        this.handleNodeClick(did);
        this.curSelectId = item.courseware_id;
        return;
      }

      if (this.$refs.courserware && this.$refs.courserware.handleLocation) {
        item.type = type;
        this.$refs.courserware.handleLocation(item);
      }
    },

    openFile(file) {
      if (file && file.file_url) {
        window.open(file.file_url);
      }
    },

    /**
     * 获取笔记列表
     * @param {Object} params - 参数对象
     */
    async getNote(params) {
      if (params && params.type) this.drawerType = Number(params.type);
      this.allNoteList = [];
      await GetMyNoteList({ courseware_id: this.curSelectId }).then((res) => {
        if (res.status === 1) {
          res.note_list.forEach((x) => {
            if (x.note_desc) {
              let n = JSON.parse(x.note_desc);
              let obj = {
                coursewareId: x.courseware_id,
                id: x.id,
                blockId: n.blockId,
                startIndex: n.startIndex,
                endIndex: n.endIndex,
                text: n.text,
                note: n.note,
              };
              this.allNoteList.push(obj);
            }
          });
        }
      });
    },
    async handEditNote(note) {
      this.oldRichData = {};
      if (this.allNoteList.length === 0) {
        await this.getNote();
      }
      let old = this.allNoteList.find(
        (x) =>
          x.coursewareId === note.coursewareId &&
          x.blockId === note.blockId &&
          x.startIndex === note.startIndex &&
          x.endIndex === note.endIndex,
      );
      if (old) {
        this.oldRichData = old;
      }
      this.newSelectedInfo = note;
      this.editDialogOpen = true;
    },
    saveNote(note) {
      let noteInfo = {
        blockId: this.newSelectedInfo.blockId,
        startIndex: this.newSelectedInfo.startIndex,
        endIndex: this.newSelectedInfo.endIndex,
        note: note.note,
        text: this.newSelectedInfo.text,
      };

      let reqData = {
        courseware_id: this.newSelectedInfo.coursewareId, // 课件 ID
        component_id: 'WHOLE',
        note_desc: JSON.stringify(noteInfo), // 位置描述
      };
      if (note.id) {
        if (!noteInfo.note) {
          this.delNote(note.id);
          return;
        }
        let upDate = {
          id: note.id,
          note_desc: reqData.note_desc,
        };
        UpdateMyNote(upDate).then(() => {
          this.getNote();
        });
      } else {
        AddMyNote(reqData).then(() => {
          this.getNote();
        });
      }
      this.editDialogOpen = false;
      this.newSelectedInfo = null;
      this.selectedInfo = null;
    },
    handDelNote(id) {
      this.$confirm('确定要删除此条笔记吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delNote(id);
        })
        .catch(() => {});
    },
    delNote(id) {
      const noteId = id || (this.oldRichData && this.oldRichData.id);
      if (!noteId) return;
      DeleteMyNote({ id: noteId }).then(() => {
        this.allNoteList = this.allNoteList.filter((x) => x.id !== noteId);
      });
    },

    async getCollect(params) {
      if (params && params.type) this.drawerType = Number(params.type);
      this.allCottectList = [];
      await GetMyCollectList({ courseware_id: this.curSelectId }).then((res) => {
        if (res.status === 1) {
          res.collect_list.forEach((x) => {
            if (x.collect_desc) {
              let n = JSON.parse(x.collect_desc);
              let obj = {
                coursewareId: x.courseware_id,
                id: x.id,
                blockId: n.blockId,
                startIndex: n.startIndex,
                endIndex: n.endIndex,
                text: n.text,
              };
              this.allCottectList.push(obj);
            }
          });
        }
      });
    },
    async saveCollect(collect) {
      if (this.allCottectList.length === 0) {
        await this.getCollect();
      }

      let old = this.allCottectList.find(
        (x) =>
          x.coursewareId === collect.coursewareId &&
          x.blockId === collect.blockId &&
          x.startIndex === collect.startIndex &&
          x.endIndex === collect.endIndex,
      );
      if (old) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: "<i class='el-icon-check' />已收藏",
        });
        return;
      }
      this.newSelectedInfo = collect;
      let collectInfo = {
        blockId: this.newSelectedInfo.blockId,
        startIndex: this.newSelectedInfo.startIndex,
        endIndex: this.newSelectedInfo.endIndex,
        text: this.newSelectedInfo.text,
      };

      let reqData = {
        courseware_id: this.newSelectedInfo.coursewareId, // 课件 ID
        component_id: 'WHOLE',
        collect_desc: JSON.stringify(collectInfo), // 位置描述
      };
      AddMyCollect(reqData)
        .then(() => {
          this.getCollect();
        })
        .then(() => {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: "<i class='el-icon-check' />已收藏",
          });
        });
    },
    handDelCollect(id) {
      this.$confirm('确定要删除此条收藏吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteMyCollect({ id }).then(() => {
            this.allCottectList = this.allCottectList.filter((x) => x.id !== id);
          });
        })
        .catch(() => {});
    },
    async getTranslate(info) {
      this.showTranslate = true;
      this.translateText = info.text;
    },
    getSearch(params) {
      if (params && params.type) this.drawerType = Number(params.type);
    },
    async querySearchList() {
      this.searchList = [];
      if (!this.searchContent) return;
      await SearchBookContentText({ book_id: this.projectId, text: this.searchContent }).then((res) => {
        if (res.status === 1) {
          this.searchList = res.courseware_component_list;
        }
      });
    },
    fullScreen() {
      toggleFullScreen(this.$refs.previewMain);
    },
    // 打开模拟答题权限控制弹窗
    openSimulateAnswerPermissionControl() {
      this.visiblePermissionControl = true;
    },
    // 创建课件预览链接
    createCoursewarePreviewURL() {
      CreateCoursewarePreviewURL({ courseware_id: this.select_node, valid_day_count: 20 }).then(({ url }) => {
        this.preview_url = url;
        this.visiblePreviewURL = true;
      });
    },
    /**
     * 计算选中分组行的课件信息
     * @returns {object} 选中分组行的课件信息
     */
    computedSelectedGroupCoursewareInfo() {
      return this.$refs.courserware.computedSelectedGroupCoursewareInfo();
    },
    startSelection(event) {
      if (
        this.isTrue(this.courseware_info.is_my_audit_task) &&
        this.isTrue(this.courseware_info.is_can_add_audit_remark)
      ) {
        this.isSelecting = true;

        let clientRect = document.getElementById(`selectable-area-preview`).getBoundingClientRect();
        this.menuPosition.startX = event.clientX - clientRect.left;
        this.menuPosition.startY = event.clientY - clientRect.top;
      }
    },
    updateSelection(event) {
      if (!this.isSelecting) return;
      let clientRect = document.getElementById(`selectable-area-preview`).getBoundingClientRect();

      this.menuPosition.endX = event.clientX - clientRect.left;
      this.menuPosition.endY = event.clientY - clientRect.top;
    },
    endSelection() {
      if (!this.isSelecting || this.menuPosition.startX === this.menuPosition.endX || !this.menuPosition.endX) return;
      this.isSelecting = false;
      const width = Math.abs(this.menuPosition.endX - this.menuPosition.startX);
      const height = Math.abs(this.menuPosition.endY - this.menuPosition.startY);
      const x =
        this.menuPosition.endX > this.menuPosition.startX
          ? `${this.menuPosition.startX}px`
          : `${this.menuPosition.endX}px`;
      const y =
        this.menuPosition.endY > this.menuPosition.startY
          ? `${this.menuPosition.startY}px`
          : `${this.menuPosition.endY}px`;
      let obj = {
        id: Math.random().toString(36).substring(2, 10),
        width: `${width}px`,
        height: `${height}px`,
        x,
        y,
        text: '',
      };
      this.menuPosition.startX = null;
      this.menuPosition.endX = null;
      this.menuPosition.startY = null;
      this.menuPosition.endY = null;
      if (width && height && this.isText) {
        this.data.text_list.push(obj);
        this.activeType = 'text';
        this.activeIndex = this.data.text_list.length - 1;

        this.hotspotsActiveIndex = this.data.text_list.length - 1;
      } else if (width && height && !this.isText) {
        this.data.input_list.push(obj);
        this.activeType = 'input';
        this.activeIndex = this.data.input_list.length - 1;

        this.inputActiveIndex = this.data.input_list.length - 1;
      }
    },
    async submitChapterAllCoursewareToAuditFlow(chapter_id) {
      try {
        await this.$confirm('确定要提交审核吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        await SubmitChapterAllCoursewareToAuditFlow({ chapter_id });
        this.getBookChapterStructExpandList();
        this.$message.success('提交成功');
      } catch (e) {
        if (e === 'cancel') {
          this.$message.error('已取消');
        }
      }
    },
    /**
     * 更新组件背景信息
     * @param {Object} param - 参数对象
     * @param {string} param.courseware_id - 课件ID
     * @param {string} param.component_id - 组件ID
     * @param {object} background - 背景信息对象
     */
    updateComponentBackground({ courseware_id, component_id }, background) {
      const component = this.component_list.find(
        (c) => c.courseware_id === courseware_id && c.component_id === component_id,
      );

      if (component) {
        this.$set(component, 'background', background);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

$total-width: $courseware-width + $courseware-left-margin + $courseware-right-margin;

.common-preview {
  &__header {
    position: sticky;
    top: 56px;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 6px 4px;
    margin-bottom: 5px;
    background-color: #fff;
    border-top: $border;
    border-bottom: $border;

    > .menu-container {
      display: flex;
      justify-content: space-between;
      width: 360px;
      padding: 4px 8px;
      border-right: $border;
    }

    > .courseware {
      display: flex;
      flex-grow: 1;
      column-gap: 16px;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .name-path {
        min-width: 200px;
        height: 40px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 32px;
        border-right: $border;
      }

      .lang-select {
        :deep .el-input {
          width: 100px;
        }

        :deep .el-input__inner {
          height: 24px;
          line-height: 24px;
          background-color: #fff;
        }

        :deep .el-input__icon {
          line-height: 24px;
        }
      }

      .flow-nodename {
        flex: 1;
      }

      .group {
        display: flex;
        align-items: center;
      }

      .operator {
        display: flex;
        column-gap: 8px;
        align-items: center;

        .link {
          + .link {
            margin-left: 0;

            &::before {
              margin-right: 8px;
              color: #999;
              content: '|';
            }
          }
        }
      }
    }
  }

  .main-container {
    position: relative;
    flex: 1;
    min-width: 1110px;
    padding: 15px 0;
    overflow: auto;
    background-color: #ececec;

    .catalogue-bar {
      position: absolute;
      top: 15px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      margin: -9px 6px 0 240px;
      cursor: pointer;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
    }

    .sidebar-bar {
      position: absolute;
      top: 0;
      right: 240px;
      display: flex;
      width: 60px;
      height: calc(100vh - 166px);

      .toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        height: 100%;

        img {
          cursor: pointer;
        }

        &-special {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          align-items: center;
          width: 100%;
          margin-bottom: 24px;
          background-color: #fff;

          img {
            width: 36px;
            height: 36px;
          }
        }
      }
    }
  }

  .back-top {
    position: absolute;
    right: 240px;
    bottom: 0;
    display: flex;
    place-content: center center;
    align-items: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-color: #fff;
  }

  main.preview-main {
    display: flex;
    flex: 1;
    width: calc($total-width);
    min-width: calc($total-width);
    max-width: calc($total-width);
    min-height: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);

    .preview-left {
      width: $courseware-left-margin;
      min-width: $courseware-left-margin;
      max-width: $courseware-left-margin;
      background-color: $courseware-bgColor;
    }

    .preview-right {
      width: $courseware-right-margin;
      min-width: $courseware-right-margin;
      max-width: $courseware-right-margin;
      background-color: $courseware-bgColor;
    }

    &.no-audit {
      margin: 0 auto;
    }
  }

  .audit-content {
    display: flex;
    min-width: 1810px;
    height: calc(100vh - 166px);

    .left-menu {
      display: flex;
      flex-direction: column;
      width: $catalogue-width;
      font-family: 'Microsoft YaHei', 'Arial', sans-serif;
      background-color: #fff;

      .courseware-info {
        display: flex;
        column-gap: 18px;
        width: 100%;
        height: 186px;
        padding: 6px 6px 24px;
        border-bottom: $border;

        .cover-image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 111px;
          height: 157px;
          background-color: rgba(229, 229, 229, 100%);

          img {
            max-width: 111px;
            max-height: 157px;
          }
        }

        .info-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .catalogue-icon {
            text-align: right;

            .svg-icon {
              cursor: pointer;
            }
          }

          .courseware {
            width: 159px;
            height: 64px;
            font-size: 16px;

            .name {
              font-weight: bold;
            }

            .editor {
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
              white-space: normal;
              -webkit-line-clamp: 2;

              /* 多行省略行数，按需调整 */
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      .courseware-tree {
        display: flex;
        flex: 1;
        flex-direction: column;
        row-gap: 8px;
        padding: 12px;
        margin-top: 12px;
        overflow: auto;

        .menu-item {
          display: flex;
          align-items: center;

          &:not(.courseware) {
            font-weight: bold;
          }

          &.courseware {
            &:hover {
              .name,
              .status {
                background-color: #f3f3f3;
              }
            }
          }

          .svg-icon {
            margin-left: 4px;

            &.my-edit-task {
              color: $right-color;
            }
          }

          .name {
            flex: 1;
            padding: 4px 8px 4px 4px;
            border-radius: 4px;
          }

          .status {
            height: 32px;
            padding: 4px 8px 4px 4px;
            font-size: 12px;
            line-height: 24px;
            color: #f00004;
            border-radius: 4px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }

          &.active {
            .name {
              font-weight: bold;
              color: #4095e5;
            }
          }
        }
      }
    }

    .sidebar {
      position: relative;
      display: flex;
      width: $sidebar-width;

      .toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        height: 100%;
        background-color: rgba(247, 248, 250, 100%);

        img {
          cursor: pointer;
        }

        &-special {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          margin-bottom: 24px;
        }

        &-list {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          align-items: center;
          width: 100%;

          .sidebar-item {
            width: 100%;
            text-align: center;

            .sidebar-icon {
              width: 36px;
              height: 36px;
              cursor: pointer;
            }

            &.active {
              background-color: #4095e5;
            }
          }
        }
      }

      .content {
        flex: 1;
        background-color: #fff;

        .resource_box {
          height: 100%;
          overflow-y: auto;
          border: 1px solid #e5e5e5;

          .source-toolbar-list {
            position: fixed;
            z-index: 999;
            display: flex;
            width: 240px;
            background: #f2f3f5;

            .sidebar-item {
              width: 100%;
              padding-top: 5px;
              text-align: center;
              border-right: 1px solid #ccc;

              .sidebar-icon {
                width: 26px;
                height: 26px;
                cursor: pointer;
              }

              &.active {
                background-color: #4095e5;
              }
            }
          }

          h5 {
            position: fixed;
            z-index: 999;
            width: 240px;
            padding: 0 5px;
            margin: 0;
            font-size: 18px;
            line-height: 40px;
            background: #f2f3f5;
          }

          .scroll-container {
            display: flex;
            flex-direction: column;
            row-gap: 8px;
            margin: 6px;

            .list-item {
              align-items: center;
              border: 1px solid #ccc;
              border-radius: 8px;

              :deep .el-slider {
                .el-slider__runway {
                  background-color: #eee;
                }
              }

              .el-image {
                display: flex;
                width: 100%;
                min-width: 100%;
                height: 90px;
                background-color: #ccc;
                border-radius: 8px;
              }

              .video-play {
                width: 100%;
                min-width: 100%;
              }

              .text-box {
                word-break: break-word;
              }
            }
          }

          p {
            max-width: 140px;
            color: #999;
            text-align: center;
            word-break: break-all;
          }

          .card-box li {
            padding: 10px;
            border-bottom: 1px solid #ccc;

            .el-icon-notebook-2 {
              display: block;
              margin-bottom: 4px;
              font-size: 12px;
              color: grey;
            }
          }

          .file-handle-info {
            margin: 0 5px;

            .mark {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 3px;

              .linkLocation {
                cursor: pointer;
              }
            }

            .word {
              flex: 1;
              word-break: break-all;
            }
          }

          ::v-deep .el-collapse-item__header {
            margin-left: 5px;
          }

          ::v-deep .el-collapse-item__content {
            padding-bottom: 5px;
          }

          .loading-text {
            padding: 5px;
            color: #999;
            text-align: center;
          }

          .error-text {
            padding: 5px;
            color: #999;
            text-align: center;
          }
        }

        .setting {
          h5 {
            padding: 0 5px;
            margin: 0;
            font-size: 18px;
            line-height: 40px;
            background: #f2f3f5;
          }

          &-content {
            padding: 10px;
          }
        }
      }

      .back-top {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        place-content: center center;
        align-items: center;
        width: 60px;
        height: 60px;
        cursor: pointer;
      }
    }
  }
}

:deep .scroll-container .audio-wrapper {
  width: 100% !important;

  .audio-middle {
    width: 100% !important;
    padding: 6px 8px !important;
    margin-left: 0;
    border: none;
    border-radius: 8px;

    .audio-name {
      text-align: left;
    }

    .slider-area {
      column-gap: 8px !important;
    }

    :deep .remark-dialog {
      .el-dialog__body {
        padding: 5px 20px;
      }
    }

    :deep .audit-dialog {
      .el-dialog__body {
        height: calc(100vh - 260px);
        padding: 5px 20px;
      }

      .mind-map-container .mind-map {
        height: calc(100vh - 310px);
      }
    }
  }
}

.mt10 {
  margin: 10px 0 0 !important;
  background-color: #eee;
}

.file-list {
  display: flex;
  flex-direction: column;
  row-gap: 5px;

  li {
    align-items: center;

    .file-name {
      display: flex;
      column-gap: 14px;
      align-items: center;
      justify-content: space-between;
      max-width: 500px;
      padding: 8px 12px;
      font-size: 14px;
      color: #1d2129;
      background-color: #f7f8fa;
      border-radius: 8px;

      p {
        margin: 0;
      }

      span,
      div {
        display: flex;
        align-items: center;
      }
    }

    .svg-icon {
      cursor: pointer;
    }
  }
}
</style>

<style lang="scss">
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>