classroom/src/views/coursewarePlay/coursewarePlay.vue

<!--
* @FileDescription: 教程播放
* @Author: 黄琪勇
* @Date:2024-04-03 17:31:41
-->
<template>
   <div class="coursewarePlay" :class="[!isShowController && 'hideController', fileType === 'SONG' && 'fileType_song']">
      <div class="coursewarePlayCon" @mousemove="handleMousemove" @click="handleClick" @touchstart="handleClick">
         <videoPlay
            v-show="fileType === 'VIDEO'"
            ref="videoPlayDom"
            @ended="handleChangeCourseware(1)"
            @loadedmetadata="
               () => {
                  isTempAutoPlay = false
               }
            "
            :autoPlay="true"
            @playbackRate="showController"
            :disableEvents="true"
            :isShowController="isShowController"
         />
         <div class="imgPlayBox" v-if="fileType === 'IMG'">
            <ElImage :hide-on-click-modal="true" fit="contain" :src="activeCourseware?.content" class="imgPlay" />
         </div>
         <div class="songPlayBox" v-if="fileType === 'SONG'">
            <iframe
               ref="songPlayDom"
               :key="activeCourseware?.content"
               class="songIframe"
               @mousemove="handleMousemove"
               :src="songPlaySrc"
               frameborder="0"
            ></iframe>
            <!-- <span></span> -->
         </div>
      </div>
      <div class="leftTools posTools">
         <div class="posBtn" @click="handleToolClick('menu')" v-if="searchObj.source !== 'search'">
            <img src="@/img/coursewarePlay/menu.png" />
            <!-- <div>课程类型</div> -->
         </div>
         <!-- 有没有搜索都展示 -->
         <div class="posBtn" @click="handleToolClick('search')">
            <img src="@/img/coursewarePlay/sousuo.png" />
            <!-- <div>知识点</div> -->
         </div>
         <div class="posBtn" @click="handleToolClick('point')" v-if="searchObj.source !== 'search'">
            <img src="@/img/coursewarePlay/zhishidian.png" />
            <!-- <div>知识点</div> -->
         </div>
         <div
            :class="['posBtn', activeCoursewareIndex > 0 ? '' : 'disabled']"
            @click="
               () => {
                  if (activeCoursewareIndex > 0) {
                     handleChangeCourseware(-1)
                  }
               }
            "
         >
            <img src="@/img/coursewarePlay/shang.png" />
            <!-- <div>上一个</div> -->
         </div>
         <div
            :class="['posBtn', activeCoursewareIndex < flattenCoursewareList.length - 1 ? '' : 'disabled']"
            @click="
               () => {
                  if (activeCoursewareIndex < flattenCoursewareList.length - 1) {
                     handleChangeCourseware(1)
                  }
               }
            "
         >
            <img src="@/img/coursewarePlay/xia.png" />
            <!-- <div>下一个</div> -->
         </div>
      </div>
      <div
         v-if="activeCoursewareResourceId"
         @click="
            () => {
               handleVideoPause()
               handleGoPracticeBtn(activeCoursewareResourceId!)
            }
         "
         class="goPracticeBtn"
      ></div>
      <div class="topTools">
         <div class="leftMenu">
            <img @click="handleGoBack" class="backImg" src="@/img/coursewarePlay/back.png" />

            <div class="title-section">
               <div class="title">{{ activeCourseware?.parentData.name || "" }}</div>
               <div class="content">
                  <p>{{ activeCourseware?.name || "" }}</p>
                  <!-- <span v-if="activeCourseware?.phaseGoals" @click="onTitleTip('phaseGoals', activeCourseware?.phaseGoals)">阶段目标</span> -->
                  <span v-if="lessonTargetDetail" @click="onTitleTip('phaseGoals', lessonTargetDetail)">阶段目标</span>
                  <span v-if="activeCourseware?.checkItem" @click="onTitleTip('checkItem', activeCourseware?.checkItem)">检查事项</span>
               </div>
            </div>
         </div>
         <div class="midMenu">
            <playRecordTime
               v-if="route.query.modeId && coursewareTotalTime && userStoreHook.roles === 'GYT'"
               :modeId="route.query.modeId as string"
               :isCurrentCoursewareMenu="isCurrentCoursewareMenu"
               :coursewareTotalTime="coursewareTotalTime"
            />
         </div>
         <div class="rightMenu">
            <div class="posCloseBtn" @click="handleCoursewareEnd">
               <img src="@/img/coursewarePlay/jieshu.png" />
            </div>
         </div>
      </div>
      <el-drawer class="elDrawer elDrawerHeader" direction="ltr" v-model="drawerSearchShow" :show-close="false">
         <template #header="{ close }">
            <myInput
               class="queryIpt"
               v-model="searchObj.queryStr"
               :height="36"
               placeholder="请输入素材关键词"
               clearable
               @handleQuery="handleQuery"
               @keyup.enter="handleQuery"
            />
            <img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
         </template>
         <ElScrollbar class="elScrollbar" v-loading="searchObj.loading">
            <el-empty
               class="empty"
               v-if="!tempCoursewareList.length && !searchObj.loading"
               :image="require('@/img/layout/empty.png')"
               description="暂无搜索结果"
            />
            <courseCollapse
               :activeCollapse="tempActiveCourseware || activeCourseware"
               :courseList="tempCoursewareList"
               :search="searchObj.tempSearch || searchObj.search"
               @handleClick="handleCourseSearchClick"
            />
         </ElScrollbar>
      </el-drawer>
      <el-drawer class="elDrawer" direction="ltr" v-model="drawerShow" :show-close="false">
         <template #header="{ close }">
            <img class="directory" src="@/img/coursewarePlay/kcml.png" />
            <div class="tit">知识点目录</div>

            <img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
         </template>
         <ElScrollbar class="elScrollbar" v-loading="searchObj.loading">
            <el-empty
               class="empty"
               v-if="!tempCoursewareList.length && !searchObj.loading"
               :image="require('@/img/layout/empty.png')"
               description="暂无搜索结果"
            />
            <courseCollapse :activeCollapse="activeCourseware" :courseList="tempCoursewareList" @handleClick="handleCourseClick" />
         </ElScrollbar>
      </el-drawer>
      <el-drawer class="elDrawer elCourseMenu" direction="ltr" v-model="drawerMenuShow" :show-close="false">
         <template #header="{ close }">
            <img class="directory" src="@/img/coursewarePlay/menuActive.png" />
            <div class="tit">课程类型</div>
            <img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
         </template>
         <ElScrollbar class="elScrollbar">
            <courseMenuCollapse :courseMenuList="coursewareMenuList" @handleClick="handleCourseMenuClick" />
         </ElScrollbar>
      </el-drawer>
      <practiceForm v-model="isPracticeShow" :practiceUrl="practiceUrl" @close="handlePracticeClose" />
   </div>
</template>

<script setup lang="ts">
import videoPlay from "./videoPlay"
import {
   getLessonCourseDetail_gym,
   getLessonCoursewareDetail_gyt,
   getLessonCourseDetail_klx,
   getLessonCoursewareCourseList_gym,
   getMyCoursewareDetail_gyt,
   getLessonCoursewareCourseList_klx
} from "@/api/cloudTextbooks.api"
import myInput from "@/components/myInput"
import { checkWebCourse_gyt, refLevel_gym, refLevel_gyt, refLevel_klx } from "@/api/coursewarePlay.api"
import { httpAjax, httpAjaxErrMsg, httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
import userStore from "@/store/modules/user"
import { useRoute, useRouter } from "vue-router"
import { shallowRef, ref, computed, onUnmounted, onMounted, watch, nextTick, reactive } from "vue"
import { ElMessageBox } from "element-plus"
import courseCollapse from "./components/courseCollapse"
import courseMenuCollapse from "./components/courseMenuCollapse"
import playRecordTime from "./components/playRecordTime"
import practiceForm from "@/businessComponents/practiceForm"
import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
import { getToken } from "@/libs/auth"
import { URL_TEACH_GYT, URL_TEACH_GYM, URL_TEACH_KLX } from "@/config"
import { handleFullscreen } from "@/libs/fullscreen"
import useCoursewarePlayTip from "./components/useCoursewarePlayTip"
import useDialogConfirm from "@/hooks/useDialogConfirm"
import LoadingBar from "@/plugin/loadingBar"
import { isPlay, penShow, toolOpen, whitePenShow } from "@/businessComponents/globalTools/globalTools"
import { closeAllModalFrame } from "@/plugin/modalFrame"
import { deepCopy } from "@/libs/tools"

const route = useRoute()
const router = useRouter()
const userStoreHook = userStore()
/* 获取资源 */
const videoPlayDom = ref<InstanceType<typeof videoPlay>>()
const songPlayDom = ref<any>() // 曲谱对象
const lessonTargetDetail = ref<string>("") // 阶段目标
const coursewareMenuList = shallowRef<any[]>([]) // 课程类型
const coursewareList = shallowRef<any[]>([]) // 知识点
const coursewareSearchList = shallowRef<any[]>([]) // 搜索的知识点
const tempCoursewareList = shallowRef<any[]>([]) // 临时知识点
const flattenCoursewareList = ref<any[]>([]) // 扁平化coursewareList
const tempFlattenCoursewareList = ref<any[]>([]) // 临时 扁平化coursewareList
const isCurrentCoursewareMenu = shallowRef(true) // 是否为当前选的课程类型
const currentId = ref<any>(route.params.id)
const isTempAutoPlay = ref(false)
let coursewareDetailController: AbortController
const searchObj = reactive({
   loading: false,
   isSearch: false, // 是否搜索 标识
   lessonCoursewareId: null as any, // 课程id,
   queryStr: route.query.search as any,
   source: route.query.source as any, // 从哪里来的
   search: route.query.search as any, // 默认的搜索条件 -
   tempSearch: route.query.search as any
})

// 选中的知识点
const tempActiveCourseware: any = ref() // 临时数据
const activeCourseware = computed<undefined | Record<string, any>>(() => {
   return flattenCoursewareList.value[activeCoursewareIndex.value]
})
// 文件类型
const fileType = computed<"VIDEO" | "IMG" | "SONG">(() => {
   return activeCourseware.value?.typeCode || activeCourseware.value?.type
})
const songPlaySrc = computed<string>(() => {
   if (fileType.value !== "SONG") {
      return ""
   }
   //  GYM,GYT,KLX 区分   云教练
   const urlObj = {
      GYT: `${URL_TEACH_GYT}?id=${activeCourseware.value?.content}&modelType=practice&modeType=json&Authorization=${getToken()}&isYjt=1`,
      GYM: `${URL_TEACH_GYM}#/?id=${
         activeCourseware.value?.content
      }&Authorization=${getToken()}&platform=pc&isHideBack=true&isHideMusicList=true&isYjt=1&systemType=teacher`,
      KLX: `${URL_TEACH_KLX}#/?id=${
         activeCourseware.value?.content
      }&Authorization=${getToken()}&platform=pc&isHideBack=true&isHideMusicList=true&isYjt=1&systemType=teacher`
   }

   // const iframeRef = document.querySelector("#songPlayDom") as any
   // iframeRef?.contentWindow.location.replace(urlObj[userStoreHook.roles!])
   // console.log(iframeRef, "iframeRef")

   return urlObj[userStoreHook.roles!]
})
// 视频是否自动播放
// const videoIsAutoPlay = computed<boolean>(() => {
//    // 如果为视频且有阶段目前则不自动播放
//    console.log(fileType.value, isTempAutoPlay.value, "isTempAutoPlay")
//    return (fileType.value === "VIDEO" && activeCourseware.value?.phaseGoals) || isTempAutoPlay.value ? false : true
// })

const activeCoursewareIndex = ref(0)
const drawerSearchShow = ref(false) // 弹窗带搜索条件的
const drawerShow = ref(false)
const drawerMenuShow = ref(false)
// 课程总时间
const coursewareTotalTime = ref(0)
// 监控播放
watch(activeCourseware, () => {
   fileType.value === "VIDEO" &&
      nextTick(() => {
         handlePlayVideo({
            src: activeCourseware.value?.content,
            name: activeCourseware.value?.name
         })
      })
   showController()
})
async function getCoursewareList(id?: string) {
   //  GYM,GYT,KLX 区分   查询接口
   const LessonCoursewareDetailApi = {
      GYT: getLessonCoursewareDetail_gyt,
      GYM: getLessonCourseDetail_gym,
      KLX: getLessonCourseDetail_klx
   }
   await httpAjaxErrMsg(LessonCoursewareDetailApi[userStoreHook.roles!], id || (route.params.id as string)).then(res => {
      if (res.code === 200) {
         const { lockFlag, knowledgePointList, lessonTargetDesc, lessonCoursewareId } = res.data || {}
         if (lockFlag) {
            ElMessageBox.alert("课件已锁定", "温馨提示", {
               confirmButtonText: "退出",
               type: "error"
            })
               .then(() => {
                  handleGoBack()
               })
               .catch(() => {
                  handleGoBack()
               })
            return
         }
         if ((knowledgePointList || []).length < 1) {
            ElMessageBox.alert("没有找到课件", "温馨提示", {
               confirmButtonText: "退出",
               type: "error"
            })
               .then(() => {
                  handleGoBack()
               })
               .catch(() => {
                  handleGoBack()
               })
            return
         }
         lessonTargetDetail.value = lessonTargetDesc ? lessonTargetDesc.replace(/\n/g, "<br />") : ""

         searchObj.lessonCoursewareId = lessonCoursewareId
         // 处理返回的数据
         handlePointList(knowledgePointList)
      }
   })

   // 请求带搜索条件数据
   searchObj.queryStr = null
   searchObj.lessonCoursewareId && getLessCoursewareList("onlySearch", searchObj.lessonCoursewareId)
}

/**
 * 带搜索条件的
 * @param type onlySearch 只搜索  展示
 */
async function getLessCoursewareList(type?: string, id?: string) {
   //  GYM,GYT,KLX 区分   查询接口
   const LessonCoursewareDetailApi = {
      GYT: getMyCoursewareDetail_gyt,
      GYM: getLessonCoursewareCourseList_gym,
      KLX: getLessonCoursewareCourseList_klx
   }
   if (coursewareDetailController) {
      coursewareDetailController.abort()
   }
   coursewareDetailController = new AbortController()
   searchObj.loading = true
   await httpAjax(LessonCoursewareDetailApi[userStoreHook.roles!], {
      id: id || (route.params.id as string),
      data: {
         search: searchObj.queryStr,
         detailFlag: "1"
      },
      abortController: coursewareDetailController
   }).then(res => {
      searchObj.loading = false
      if (res.code === 200) {
         const result = res.data || []
         for (let i = 0; i < result.length; i++) {
            const itemResult = result[i]
            itemResult.name = itemResult.coursewareDetailName
            itemResult.id = itemResult.coursewareDetailId || itemResult.lessonCoursewareDetailId
            itemResult.lessonTargetDesc = itemResult.lessonTargetDesc ? itemResult.lessonTargetDesc.replace(/\n/g, "<br />") : ""
            itemResult.children = itemResult.knowledgePointList || []
            itemResult.knowledgePointList = []
         }
         if (type === "onlySearch") {
            handlePointListOnlySearch(result)
            return
         } else {
            handlePointList(result, searchObj.isSearch)
         }

         // 初始化检查事项
         const item = flattenCoursewareList.value[activeCoursewareIndex.value]
         const parentId = item ? item.parentData.ids[0] : ""
         if (parentId) {
            const parentItem = coursewareList.value.find((item: any) => item.id === parentId)
            if (parentItem) {
               lessonTargetDetail.value = parentItem.lessonTargetDesc
            }
         }
      }

      // 标识
      searchObj.isSearch = false
   })
}

// 处理是从搜索过来的，还是
if (route.query.source === "search") {
   getLessCoursewareList()
} else {
   getCoursewareList()
   getCoursewareMenuList()
}
function getCoursewareMenuList(id?: string) {
   //  GYM,GYT,KLX 区分   查询接口
   const LessonCoursewareMenuDetailApi = {
      GYT: refLevel_gyt,
      GYM: refLevel_gym,
      KLX: refLevel_klx
   }

   httpAjaxErrMsg(LessonCoursewareMenuDetailApi[userStoreHook.roles!], {
      lessonCoursewareDetailId: id || route.params.id,
      courseScheduleId: route.query.modeId as any
   } as any).then(res => {
      if (res.code === 200) {
         coursewareMenuList.value = res.data || []
      }
   })
}
let flattenCoursewareListData: any = [] // 临时扁平化数据
function handlePointList(pointList: any[], isSearch?: boolean) {
   flattenCoursewareListData = []
   const list = filterPointList(pointList)
   if (!isSearch) {
      // 重置数据
      coursewareTotalTime.value = 0
      coursewareList.value = list
      // 如果url里面有materialId 代表指定资料播放
      if (route.query.materialId) {
         const index = flattenCoursewareListData.findIndex((item: any) => {
            return route.query.materialId === item.id + "" && route.query.knowledgePointId === item.knowledgePointId + ""
         })
         index > -1 && (activeCoursewareIndex.value = index)
      }
      flattenCoursewareList.value = deepCopy(flattenCoursewareListData)
   } else {
      if (flattenCoursewareListData[0]) {
         // 默认展开第一个
         tempActiveCourseware.value = {
            ...flattenCoursewareListData[0],
            id: null
         }
      }
   }
   tempCoursewareList.value = list
   tempFlattenCoursewareList.value = deepCopy(flattenCoursewareListData)
}

function handlePointListOnlySearch(pointList: any[]) {
   flattenCoursewareListData = []
   const list = filterPointList(pointList)
   if (!searchObj.isSearch) {
      coursewareSearchList.value = list
   } else {
      if (flattenCoursewareListData[0]) {
         // 默认展开第一个
         tempActiveCourseware.value = {
            ...flattenCoursewareListData[0],
            id: null
         }
      }
      tempCoursewareList.value = list
   }
}
function filterPointList(pointList: any[], parentData?: { ids: string[]; name: string }): any[] {
   // 设置父级及以上id数组和父级name
   return pointList.map(point => {
      if (point.children) {
         return Object.assign(point, {
            children: filterPointList(point.children, { ids: [...(parentData?.ids || []), point.id], name: point.name })
         })
      } else {
         // coursewareTotalTime.value += point.totalMaterialTimeSecond
         return Object.assign(point, {
            materialList: point.materialList.map((item: any) => {
               item.parentData = {
                  ids: [...(parentData?.ids || []), point.id],
                  name: point.name
               }
               flattenCoursewareListData.push(item)
               return item
            })
         })
      }
   })
}
function handleChangeCourseware(index: -1 | 1) {
   handleVideoPause()
   handleSongPause()
   const newIndex = index + activeCoursewareIndex.value
   if (newIndex < 0 || newIndex > flattenCoursewareList.value.length - 1) {
      return
   }

   if (searchObj.source === "search") {
      const newItem = flattenCoursewareList.value[newIndex]
      const newParentId = newItem ? newItem.parentData?.ids[0] : ""
      if (newParentId) {
         const parentItem = coursewareList.value.find((item: any) => item.id === newParentId)
         if (parentItem) {
            lessonTargetDetail.value = parentItem.lessonTargetDesc
         }
      }
   }

   activeCoursewareIndex.value = newIndex
}
function handleCourseSearchClick(value: any) {
   if (searchObj.source === "search") {
      searchObj.search = searchObj.tempSearch ? JSON.parse(JSON.stringify(searchObj.tempSearch)) : ""
      coursewareList.value = deepCopy(tempCoursewareList.value)
      flattenCoursewareList.value = deepCopy(tempFlattenCoursewareList.value)

      const newIndex = flattenCoursewareList.value.findIndex((item: any) => {
         return value.id === item.id && value.knowledgePointId === item.knowledgePointId
      })
      const newItem = flattenCoursewareList.value[newIndex]
      const newParentId = newItem ? newItem.parentData?.ids[0] : ""

      if (newParentId) {
         const parentItem = coursewareList.value.find((item: any) => item.id === newParentId)
         if (parentItem) {
            lessonTargetDetail.value = parentItem.lessonTargetDesc
         }
      }

      activeCoursewareIndex.value = newIndex
      drawerSearchShow.value = false
   } else {
      const urls = router.resolve({
         path: `/coursewarePlay/${searchObj.lessonCoursewareId}`,
         query: {
            materialId: value.id,
            source: "search",
            knowledgePointId: value.knowledgePointId,
            search: searchObj.tempSearch ? JSON.parse(JSON.stringify(searchObj.tempSearch)) : ""
         }
      })

      const url = window.location.origin + window.location.pathname + urls.href
      window.open(url)
   }
}
function handleCourseClick(value: any) {
   console.log(value, "value")
   const type = value.typeCode || value.type
   if (type !== "VIDEO") {
      handleVideoPause()
   }

   searchObj.search = searchObj.tempSearch ? JSON.parse(JSON.stringify(searchObj.tempSearch)) : ""
   coursewareList.value = deepCopy(tempCoursewareList.value)
   flattenCoursewareList.value = deepCopy(tempFlattenCoursewareList.value)

   const newIndex = flattenCoursewareList.value.findIndex((item: any) => {
      return value.id === item.id && value.knowledgePointId === item.knowledgePointId
   })

   if (searchObj.source === "search") {
      const newItem = flattenCoursewareList.value[newIndex]
      const newParentId = newItem ? newItem.parentData?.ids[0] : ""

      if (newParentId) {
         const parentItem = coursewareList.value.find((item: any) => item.id === newParentId)
         if (parentItem) {
            lessonTargetDetail.value = parentItem.lessonTargetDesc
         }
      }
   }

   activeCoursewareIndex.value = newIndex
   drawerShow.value = false
}
async function handleCourseMenuClick(value: any) {
   // 判断是否为当前课程类型
   if (currentId.value === value.id) {
      return
   }
   LoadingBar.loading(true)
   currentId.value = value.id
   isCurrentCoursewareMenu.value = value.id === route.params.id ? true : false
   flattenCoursewareListData = [] // 重置数据
   isTempAutoPlay.value = true
   searchObj.isSearch = false
   await getCoursewareList(value.id)
   getCoursewareMenuList(value.id)
   drawerMenuShow.value = false
   activeCoursewareIndex.value = 0
   nextTick(() => {
      //    if (!activeCourseware.value?.phaseGoals) {
      // 切换之后默认打开课程目录

      //    }
      drawerShow.value = true
   })
   LoadingBar.loading(false)
}

/** 曲目相关 */
// 暂停曲目播放
function handleSongPause() {
   songPlayDom.value?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
   showController()
}

/* 播放器相关 */
// 视频播放或者暂停
function handleVideoPlay() {
   videoPlayDom.value?.handlePlay()
   showController()
}
// 视频快进快退
function handleVideoSpeedCurrentTime(type: "fast" | "slow") {
   videoPlayDom.value?.speedCurrentTime(type)
   showController()
}
// 视频暂停
function handleVideoPause() {
   videoPlayDom.value?.pauseVideo()
   showController()
}
// 播放视频
function handlePlayVideo({ src, name }: { src: string; name: string }) {
   videoPlayDom.value?.playVideo({
      src,
      name
   })
   showController()
}

// 全屏显示
handleFullscreen(true, false)
/* 按键事件相关 */
onMounted(() => {
   document.addEventListener("keydown", handleKeydown)
   document.addEventListener("contextmenu", preventDefaultContextmenu)
   showController()
})
onUnmounted(() => {
   document.removeEventListener("keydown", handleKeydown)
   document.removeEventListener("contextmenu", preventDefaultContextmenu)
})
function preventDefaultContextmenu(event: MouseEvent) {
   event.preventDefault()
}
function handleKeydown(e: KeyboardEvent) {
   const key = e.key
   // 打开弹窗之后快捷键失效
   if (drawerShow.value || drawerMenuShow.value || drawerSearchShow.value) {
      return
   }
   if (key === " ") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoPlay()
   } else if (key === "ArrowLeft") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoSpeedCurrentTime("slow")
   } else if (key === "ArrowRight") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoSpeedCurrentTime("fast")
   } else if (key === "ArrowDown") {
      closeAllModalFrame()
      drawerShow.value = false
      handleChangeCourseware(1)
   } else if (key === "ArrowUp") {
      closeAllModalFrame()
      drawerShow.value = false
      handleChangeCourseware(-1)
   }
}
function handleToolClick(type: string) {
   fileType.value === "VIDEO" && handleVideoPause()
   if (type === "menu") {
      drawerMenuShow.value = true
   } else if (type === "point") {
      tempCoursewareList.value = deepCopy(coursewareList.value)
      // searchObj.queryStr = searchObj.search ? JSON.parse(JSON.stringify(searchObj.search)) : ""

      tempActiveCourseware.value = null
      drawerShow.value = true
   } else if (type === "search") {
      if (searchObj.source === "search") {
         tempCoursewareList.value = deepCopy(coursewareList.value)
         tempActiveCourseware.value = null
         searchObj.queryStr = searchObj.search ? JSON.parse(JSON.stringify(searchObj.search)) : ""
      } else {
         tempCoursewareList.value = deepCopy(coursewareSearchList.value)
         tempActiveCourseware.value = {}
         searchObj.tempSearch = ""
         searchObj.queryStr = ""
      }

      drawerSearchShow.value = true
   }
}
function handleMousemove() {
   showController()
}
function handleClick() {
   fileType.value === "VIDEO" && isShowController.value && handleVideoPlay()
   showController()
}
// 是否显示控制器
const isShowController = ref(true)
let _showTimer: any
function showController() {
   isShowController.value = true
   _showTimer && clearTimeout(_showTimer)
   _showTimer = setTimeout(hideController, 3000)
}
function hideController() {
   // 取消暂停的时候收起
   // if (fileType.value === "VIDEO" && videoPlayDom.value?.playType === "pause") {
   //    return
   // }
   isShowController.value = false
}
/* 结束课程 */
function handleGoBack() {
   // window.open("about:blank", "_self")
   // window.close()
   // 如果从课件列表进来的，直接关闭
   if (!router.options.history.state?.back) {
      window.close()
      return
   }
   router.go(-1)
}
function handleCoursewareEnd() {
   if (route.query.modeId) {
      if (userStoreHook.roles === "GYM") {
         httpAjaxLoadingErrMsg(getRecentCourseSchedule_gym, route.query.modeId as string).then(res => {
            if (res.code === 200) {
               if (res.data?.signOutStatusEnum === 3) {
                  useDialogConfirm({
                     headImg: require("@/img/coursewarePlay/ts.png"),
                     text: `请确认是否结束课程，结束后请到APP进行签退。`,
                     btnShow: [true, true],
                     onOk() {
                        handleGoBack()
                     }
                  })
               } else {
                  handleGoBack()
               }
            }
         })
      } else if (userStoreHook.roles === "GYT") {
         httpAjaxLoadingErrMsg(checkWebCourse_gyt, route.query.modeId as string).then(res => {
            if (res.code === 200) {
               if (res.data?.signOut === false) {
                  useDialogConfirm({
                     headImg: require("@/img/coursewarePlay/ts.png"),
                     text: `请确认是否结束课程，结束后请到APP进行签退。`,
                     btnShow: [true, true],
                     onOk() {
                        handleGoBack()
                     }
                  })
               } else {
                  handleGoBack()
               }
            }
         })
      }
   } else {
      handleGoBack()
   }
}
// 是否收起
watch(
   () => isShowController.value,
   () => {
      if (isShowController.value) {
         isPlay.value = false
      } else {
         isPlay.value = true
         toolOpen.value = false
      }
   }
)
// 白板的批注打开时暂停播放
watch(
   () => [whitePenShow.value, penShow.value],
   () => {
      if (whitePenShow.value || penShow.value) {
         handleVideoPause()
         handleSongPause()
      }
   }
)
// 去练习
const activeCoursewareResourceId = computed<string | undefined>(() => {
   const materialRefs = activeCourseware.value?.materialRefs
   return materialRefs ? (["GYM", "KLX"].includes(userStoreHook.roles!) ? materialRefs[0]?.resourceIdStr : materialRefs[0]?.resourceId) : undefined
})
const isPracticeShow = ref(false)
const practiceUrl = ref("")
function handleGoPracticeBtn(activeCoursewareResourceId: string) {
   //  GYM,GYT,KLX 区分   云教练
   const urlObj = {
      GYT: `${URL_TEACH_GYT}?id=${activeCoursewareResourceId}&modelType=practice&modeType=json&Authorization=${getToken()}&isYjt=1&&isHideBack=false`,
      GYM: `${URL_TEACH_GYM}#/?id=${activeCoursewareResourceId}&Authorization=${getToken()}&platform=pc&isYjt=1&systemType=teacher&isHideMusicList=true`,
      KLX: `${URL_TEACH_KLX}#/?id=${activeCoursewareResourceId}&Authorization=${getToken()}&platform=pc&isYjt=1&systemType=teacher&isHideMusicList=true`
   }
   isPracticeShow.value = true
   practiceUrl.value = urlObj[userStoreHook.roles!]
   //window.open(urlObj[userStoreHook.roles!], "_blank")
}
function handlePracticeClose() {
   isPracticeShow.value = false
   practiceUrl.value = ""
}

function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
   useCoursewarePlayTip({
      headImg: require(`@/img/coursewarePlay/${type === "phaseGoals" ? "ts3" : "ts4"}.png`),
      text,
      btnShow: [false, false]
   })
   handleVideoPause()
}

function handleQuery() {
   //
   searchObj.isSearch = true
   searchObj.tempSearch = searchObj.queryStr ? JSON.parse(JSON.stringify(searchObj.queryStr)) : ""
   if (searchObj.source === "search") {
      getLessCoursewareList()
   } else {
      getLessCoursewareList("onlySearch", searchObj.lessonCoursewareId)
   }
}
</script>

<style lang="scss" scoped>
.coursewarePlay {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
   &.hideController {
      .leftTools {
         opacity: 0;
         transform: translate(-100%, -50%);
      }
      .topTools {
         opacity: 0;
         transform: translateY(-100%);
      }
      .goPracticeBtn {
         transform: translateY(74px);
      }
   }
   &.fileType_song.hideController {
      .leftTools {
         opacity: initial;
         transform: translateY(-50%);
      }
      .goPracticeBtn {
         transform: initial;
      }
   }
   .coursewarePlayCon {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .imgPlayBox {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         .imgPlay {
            width: 84%;
            height: 100%;
         }
      }
      .songPlayBox {
         width: 100%;
         height: 100%;
         .songIframe {
            display: block;
            width: 100%;
            height: 100%;
         }
      }
   }
   .topTools {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
      transition: all 0.5s;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px 30px 40px;
      .leftMenu {
         display: flex;
         align-items: flex-start;
         .backImg {
            cursor: pointer;
            width: 22px;
            padding-top: 5px;
            &:hover {
               opacity: $opacity-hover;
            }
         }
         .title-section {
            font-weight: 500;
            font-size: 22px;
            color: #ffffff;
            line-height: 30px;
            padding-left: 20px;
            .content {
               padding-top: 6px;
               font-weight: 500;
               font-size: 18px;
               color: #ffffff;
               line-height: 26px;
               display: flex;
               align-items: center;

               p {
                  line-height: 1;
                  padding-top: 1px;
               }

               span {
                  background: rgba(0, 0, 0, 0.1);
                  border-radius: 16px;
                  border: 1px solid rgba(255, 255, 255, 0.7);
                  font-size: 14px;
                  color: #ffffff;
                  line-height: 22px;
                  padding: 2px 10px;
                  margin-left: 10px;
                  cursor: pointer;
               }
            }
         }
      }
      .midMenu {
         position: absolute;
         left: 50%;
         top: 23px;
         // transform: translate(-50%, -50%);
         transform: translateX(-50%);
      }
      .rightMenu {
         .posCloseBtn {
            cursor: pointer;
            img {
               width: 34px;
               height: 34px;
               padding: 6px;
               box-sizing: content-box;
               &:hover {
                  background-color: rgba(255, 255, 255, 0.2);
                  border-radius: 6px;
               }
            }
         }
      }
   }
   .posTools {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s;
      &.leftTools {
         background: rgba(0, 0, 0, 0.4);
         border-radius: 8px;
         left: 32px;
      }
      .posBtn {
         padding: 14px 6px;
         font-weight: 500;
         font-size: 16px;
         color: #ffffff;
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
         // &:hover {
         //    opacity: $opacity-hover;
         // }
         &.disabled {
            opacity: $opacity-disabled;
         }
         > img {
            width: 34px;
            height: 34px;
            padding: 6px;
            box-sizing: content-box;
            &:hover {
               background-color: rgba(255, 255, 255, 0.2);
               border-radius: 6px;
            }
         }
      }
   }
   .goPracticeBtn {
      position: absolute;
      right: 32px;
      bottom: 24px;
      width: 143px;
      height: 50px;
      background: url("@/img/coursewarePlay/goPracticeBtn.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
         opacity: $opacity-hover;
      }
   }
   &:deep(.elDrawer.el-drawer) {
      width: 348px !important;
      .el-drawer__header {
         height: 54px;
         background: #ededed;
         padding: 0 20px;
         margin-bottom: 0;
         .directory {
            flex-grow: 0;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
         }
         .tit {
            flex-grow: 1;
            margin-left: 10px;
            font-weight: 600;
            font-size: 18px;
            color: #333333;
         }
         .close {
            cursor: pointer;
            width: 14px;
            flex-shrink: 0;
            &:hover {
               opacity: $opacity-hover;
            }
         }

         .el-input {
            margin-right: 10px;
            font-size: 14px;
         }

         .btnSelect {
            width: 56px;
            height: 26px;
            line-height: 26px;
            font-size: 14px;
         }
      }
      .el-drawer__body {
         padding: 0;
         overflow: hidden;
         & > .elScrollbar {
            .el-scrollbar__view {
               padding: 0 22px;
               width: 100%;
            }
            .el-scrollbar__wrap {
               overflow-x: hidden;
            }
         }
      }
   }
   &:deep(.elDrawerHeader.el-drawer) {
      .el-drawer__header {
         padding: 0 10px;
      }
   }

   &:deep(.elCourseMenu.el-drawer) {
      width: 363px !important;
      .el-drawer__body {
         & > .elScrollbar {
            .el-scrollbar__view {
               padding: 0;
            }
         }
      }
   }
}
.empty {
   height: calc(100vh - 54px);
   :deep(.el-empty__image) {
      width: 228px;
   }

   :deep(.el-empty__description) {
      color: #aaa;
      p {
         font-size: 18px;
      }
   }
}
</style>