learning-system-mobile/pages/study/courseStudy.vue

<template>
  <!--新的课程学习页面，没有中间的详细页面了，课程点过来就是这个，用户未报名就直接报名-->
  <view>
    <page-title :showBack="true" :sticky="true" v-if="showNavbar" @go="goBack">详情</page-title>
    <watermark></watermark>
    <u-toast ref="messager"></u-toast>
    <!-- <page-title :showBack="true"></page-title> -->
    <view class="playbox" v-if="isShowPdt"><!--内容播放区域-->
      <view v-if="renderCourse">
        <view style="min-height: 440upx;" >
          <view v-if="curContent.contentType==10" style="background-color: #000000;">
            <!--视频-->
            <view style="position: relative;">
              <video-player
                  :url="blobUrl"
                  :blobId="blobId"
                  controls
                  :enable-play-gesture="true"
                  :inittime="curContent.lastStudyTime"
                  @play="onPlayerPlay"
                  @pause="onPlayerPause"
                  @ended="onPlayerEnded"
                  @timeupdate="onPlayerPlaying"
                  @fullscreenchange="onFullScreen"
                  :drag="curriculumData.isDrag"
                  style="width: 100%; object-fit: fill">
              >
            </video-player>
              <view class="player-box" v-if="playerBoxShow">
                <view class="player-praise">
                  <view @click="praiseContent" style="cursor: pointer;">
                    <image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png" />
                    <image class="icon-small" v-else src="/static/images/icon/praise1.png" />
                    <!-- {{ courseInfo.praises }} -->
                    <view style="color:#fff;cursor: pointer;">赞</view>
                  </view>
                  <view style="margin-left: 15px;cursor: pointer;" @click="treadContent">
                    <image class="icon-small" v-if="isTrample" src="/static/images/icon/trample-active.png" />
                    <image class="icon-small" v-else src="/static/images/icon/trample.png" />
                    <!-- {{ courseInfo.trampleCount }} -->
                    <view style="color:#fff;cursor: pointer;">踩</view>
                  </view>
                </view>
                <!--以下部分，已经移到下面了-->
                <!-- <view v-if="!scoreInfo.has" class="player-rate">
                <u-rate v-model="scoreInfo.score" active-color="#f7ba2a" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></u-rate>
                </view>
                <view v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
                <view class="player-rate" style="padding-left: 5px;">
                  <u-rate readonly :count="5" active-color="#f7ba2a" v-model="scoreInfo.score"></u-rate>
                </view>
                <view class="score-text" style="margin-top:20px">
                  <text style="color:#ffb30f;">{{ toScore(scoreInfo.score) }}</text>
                  <text style="font-size: 12px;color: #fff">分</text>
                </view>
               </view> -->
              </view>
            </view>
          </view>
          <!---->
          <view v-if="curContent.contentType==20">
            <!--音频播放-->
            <view style="text-align: center;padding-top: 40px;background-color: #FFFFFF;">
              <audio-player
                  :src="blobUrl"
                  :name="curContent.contentName"
                  :drag="curriculumData.isDrag"
                  @onPlay="audioPlay"
                  @onPause="audioPause"
                  @onPlaying="audioPlaying"
                  @onEnded="audioEnd">
              </audio-player>
            </view>
          </view>
          <view v-if="curContent.contentType==30">
            <image :src="fileBaseUrl+curContent.content" style="width: 100%;"></image>
          </view>
          <view v-if="curContent.contentType==40">
            <!--pdf文档-->
            <view style="min-height: 500px;padding-top: 200upx;position: relative;">
            <pdf-preview v-if="curContent.content && curContent.content!=''"
                         :src="curContent.content ? fileBaseUrl+curContent.content : ''"></pdf-preview>
            </view>
          </view>
          <view v-if="curContent.contentType==41">
          <view class="about-gongsi-info" :style="{height:articleMore? '500upx':'auto'}"
                style="padding: 15px;text-indent:40px;line-height: 28px;position: relative;">
              <u-parse :content="curContent.content"></u-parse>
            </view>
          <view v-if="articleMore" @click="showMore" style="text-align: center;color: #387DF7;">
            <text>查看更多∨</text>
          </view>
          </view>
          <div v-if="curContent.contentType == 50" style="min-height: 500px;">
            <!--因为web-view 动态切换地址不好用，所以这里先使用iframe-->
          <iframe id="iframe-scorm" v-if="scormUrl" :src="scormUrl" @load="iframeScormLoad()" frameborder="0"
                  scrolling="no" border="0px" style="width:100%;min-height:500px;border:0px;"></iframe>
          </div>
          <view v-if="curContent.contentType==52">
            <!--外连接-->
            <view v-if="conLink.openType == 1">
              <view v-if="conLink.url!=''" style="min-height: 400px;position: relative;">
                <web-view :src="conLink.url"></web-view>
              </view>
            </view>
            <view v-else>
              <div style="text-align: center;padding: 20px;">{{ curContent.contentName }}</div>
              <div style="text-align: center;padding: 20px;">{{ conLink.url }}</div>
            </view>
          </view>
          <!--作业-->
          <view v-if="curContent.contentType==60">
            <course-homework :content="curContent" :studyId="studyId"></course-homework>
          </view>
          <!--考试-->
          <view v-if="curContent.contentType==61">
            <course-exam  :courseType="courseInfo.type" :content="curContent" :studyId="studyId"></course-exam>
          </view>
          <!--评估-->
          <view v-if="curContent.contentType==62">
            <course-assess :content="curContent" :studyId="studyId"></course-assess>
          </view>
        </view>
      </view>
      <view v-if="!renderCourse && Internet ==2">
        <div style="margin-top:40px">
          <span style="font-size: large">十分抱歉，您当前的网络环境不符合观看要求。为了保障课程信息的安全，您需要接入公司内网才能观看。</span>
        </div>
      </view>
    </view>
		<view class="contentbox" v-if="courseInfo.name">
			<view v-if="!catalogShow">
				<view class="tabrow">
					<view class="tabrow-item" @click="goTop">目录({{totalContent}})</view>
          <view class="tabrow-item" @click="changeTab(1)">
            <text :class="{'tabrow-active':tabIndex==1}">简介</text>
          </view>
          <view class="tabrow-item" @click="changeTab(2)">
            <text :class="{'tabrow-active':tabIndex==2}">评论</text>
          </view>
          <view class="player-box-tabrow">
            <view class="player-praise">
              <view @click="praiseContent" style="cursor: pointer;">
                <image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png"/>
                <image class="icon-small" v-else src="/static/images/icon/praise1.png"/>
                <!-- {{ courseInfo.praises }} -->
                <text style="cursor: pointer;">赞</text>
              </view>
              <view style="margin-left: 15px;cursor: pointer;" @click="treadContent">
                <image class="icon-small" v-if="isTrample" src="/static/images/icon/trample-active.png"/>
                <image class="icon-small" v-else src="/static/images/icon/trample.png"/>
                <!-- {{ courseInfo.trampleCount }} -->
                <text style="cursor: pointer;">踩</text>
              </view>
            </view>
          </view>
        </view>
        <!--简介内容-->
        <view v-if="tabIndex==1" class="cinfo">
          <view class="cinfo-title" style="display: flex;flex-wrap: wrap;">
            <view>
              {{ courseInfo.name }}
            </view>
            <view>
              <text class="cinfo-tag1">{{ convertTypeName(courseInfo.sysType1) }}</text>
              <text v-if="courseInfo.sysType2!= '' && courseInfo.sysType2!= '0'" class="cinfo-tag2">
                {{ convertTypeName(courseInfo.sysType2) }}
              </text>
              <text v-if="courseInfo.sysType3!= '' && courseInfo.sysType3!= '0'" class="cinfo-tag2">
                {{ convertTypeName(courseInfo.sysType3) }}
              </text>

            </view>
          </view>
          <view class="desrow">
            <view>
              <text class="desrow-name">目标人群：</text>
              <text class="desrow-value">{{ courseInfo.forUsers }}</text>
            </view>
            <view style="color: #999999;min-width: 160upx;text-align: right;font-size: 24upx;">
              {{ formatUserNumber(courseInfo.studys) }}人学习
            </view>
          </view>
          <view class="desrow" style="justify-content: flex-start;">
            <view style="line-height: 60upx;">
              <text class="desrow-name">讲师：</text>
            </view>
            <view style="flex: 1;">
              <view v-for="(tea,teaIdx) in teachers" :key="tea.id"
                    style="display: flex;justify-content: space-between;line-height: 60upx;">
                <view>
                  <text class="desrow-value">{{ tea.teacherName }}</text>
                  <text class="desrow-value" style="font-size: 24upx;margin-left: 6upx;color: #999999;">
                    ({{ tea.orgInfo }})
                  </text>
                </view>
                <view @click="followUser(tea)" style="color: #387DF7;">
                  <text class="concern" v-if="tea.followed">已关注</text>
                  <text v-else class="concern">+关注</text>
                </view>
              </view>
            </view>
          </view>
          <view class="desrow">
            <view style="display: flex;">
              <text class="desrow-name">课程评分：</text>
              <u-rate readonly v-if="courseInfo.score>0" :count="5" activeColor="#F37101" :size="16"
                      v-model="courseInfo.score"></u-rate>
              <text class="score">{{ toScore(courseInfo.score) }}</text>
            </view>

          </view>
          <view class="desrow" v-if="myScore>0">
            <view style="display: flex;">
              <text class="desrow-name">我的评分：</text>
              <u-rate readonly :count="5" activeColor="#F37101" :size="16" v-model="myScore"></u-rate>
              <text class="score">{{ toScore(myScore) }}</text>
            </view>
          </view>
          <view v-if="totalContent>1" class="desrow">
            <view style="font-size: 32upx;color: #333333;">目录</view>
            <view v-if="totalContent>2" @click="showAllCatalog" style="font-size: 28upx;color: #666666;">全部&gt;</view>
          </view>
          <view v-if="totalContent>1"><!--单个内容时，不显示内容名称-->
            <view v-if="totalContent==2">
              <view v-if="courseInfo.type==10">
                <view class="citembox1">
                  <view v-for="(con,conIdx) in contentList" :key="conIdx" class="citembox1-item">
                    <view class="citem" @click="playContent(con,conIdx,0)">
                      <view class="citem-body" :class="{'box-studying':con.id==curContent.id}">
                        <text :class="{'color-studying':con.id==curContent.id}">{{ con.contentName }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-else><!--有目录的，但是只有两项内容-->
                <view class="citembox1">
                  <view v-for="(con,conIdx) in scrollList" :key="conIdx" class="citembox1-item">
                    <view class="citem" @click="playContent(con,conIdx,0)">
                      <view class="citem-body" :class="{'box-studying':con.id==curContent.id}">
                        <text :class="{'color-studying':con.id==curContent.id}">{{ con.contentName }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view v-else>
              <view v-if="courseInfo.type==10">
                <view v-if="scrollItemWidth>0" class="main-cata-active">
                  <scroll-view scroll-x :scroll-y="false"
                               style="min-height:180upx;white-space: nowrap;overflow: hidden;"
                               :scroll-left="scrollInfo.scrollLeft" @scroll="scrollHandler">
                    <!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
                    <view v-for="(con,conIdx) in contentList" :key="conIdx" style="display: inline-block;" :id="con.id"
                          @click="playContent(con,conIdx,0)">
                      <!---->
                      <view :style="{width:scrollItemWidth+'px'}" class="scroll-item"
                            :class="{'box-studying':curContent.id==con.id}">
                        <view class="scroll-item-con">
                          <view class="scroll-item-name">
                            {{ con.contentName }}
                          </view>
                          <!-- 	<view class="scroll-item-type">
																<view class="square-border">
																	<view :class="statusClass(con.status)">
																		{{getConType(con.contentType)}}
																	</view>
																</view>
																<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">未开始</text>
																<text v-if="con.status==2" class="status-tag" :class="statusClass(con.status)">进行中</text>
																<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text>
															</view> -->
                        </view>
                      </view>
                    </view>
                    <!-- </view> -->
                  </scroll-view>
                </view>
              </view>
              <view v-else>
                <view v-if="scrollItemWidth>0" class="main-cata-active">
                  <scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;"
                               :scroll-left="scrollInfo.scrollLeft" @scroll="scrollHandler">
                    <!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
                    <view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id"
                          @click="playContent(con,conIdx,0)">
                      <!---->
                      <view :style="{width:scrollItemWidth+'px'}" class="scroll-item"
                            :class="{'color-studying':curContent.id==con.id}">
                        <view class="scroll-item-sec">{{ con.cataName }}
                          <!-- <text v-if="con.cataStatus && con.cataStatus==1" class="status-tag" :class="statusClass(con.cataStatus)">未开始</text>
														<text v-if="con.cataStatus && con.cataStatus==2" class="status-tag" :class="statusClass(con.cataStatus)">进行中</text>
														<text v-if="con.cataStatus && con.cataStatus==9" class="status-tag" :class="statusClass(con.cataStatus)">已完成</text> -->
                        </view>
                        <view class="scroll-item-con" :class="{'box-studying':curContent.id==con.id}">
                          <view class="scroll-item-name">
                            {{ con.contentName }}
                          </view>
                          <!-- 	<view class="scroll-item-type">
																<view class="square-border">
																	<view :class="statusClass(con.status)">
																		{{getConType(con.contentType)}}
																	</view>
																</view>
																<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">未开始</text>
																<text v-if="con.status==2" class="status-tag" :class="statusClass(con.status)">进行中</text>
																<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text>
															</view> -->
                        </view>
                      </view>
                    </view>
                    <!-- </view> -->
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>
          <!--交互-->
          <view class="cinfo-btns">
            <view class="cinfo-btn" @click="openScore()">
              <view>
                <image src="/static/images/course/c_comment.png" style="width: 80upx;height: 80upx;"></image>
              </view>
              <view>评价</view>
            </view>
            <view class="cinfo-btn" @click="addFavorite()">
              <view>
                <image v-if="isFavorite" src="/static/images/course/c_favorite_2.png"
                       style="width: 80upx;height: 80upx;">
                  <image v-else src="/static/images/course/c_favorite.png" style="width: 80upx;height: 80upx;">
              </view>
              <view>
                <text v-if="isFavorite">已收藏</text>
                <text v-else>收藏</text>
              </view>
            </view>
            <view class="cinfo-btn" @click="openShare()">
              <view>
                <image src="/static/images/course/c_share.png" style="width: 80upx;height: 80upx;">
              </view>
              <view>转发</view>
            </view>
          </view>
        </view>
        <!--评论-->
        <view v-show="tabIndex==2" class="pinglun">
          <comments ref="comments" v-if="courseId && courseId!=''" :objType="1" :objId="courseId"></comments>
          <interact-fixed ref="fiexdbar" :type="1" :data="courseInfo" :users="teachers" :praises="false"
                          :favorites="false" :shares="false" :comments="false" @comment-success="refreshComments"
                          @share-success="shareSuccess"></interact-fixed>
        </view>
      </view>
      <!--全部目录-->
      <view v-else>
        <view class="tabrow" style="justify-content: space-between;">
          <view class="tabrow-item">
            <text class="tabrow-active">目录</text>
          </view>
          <view @click="closeAllCatalog">
            <image src="/static/images/close.png" style="width: 50upx;height: 50upx;"></image>
          </view>
        </view>
        <view class="catalogbox">
          <view v-if="courseInfo.type>10" class="catalog">
            <view v-for="(cata,catIdx) in catalogTree" :key="catIdx"
                  style="border-bottom: 1px solid #ebebeb;padding-bottom: 30upx;">
              <view class="catalog-sec" style="margin-bottom: 20rpx;">
                <view class="catalog-sec-name">
                  <!-- <text>{{catIdx+1}}, </text> -->
                  <text class="text-ellipsis">{{ cata.section.name }}</text>
                </view>
                <view :class="{'color-studying':cata.section.status==2}">
                  <text v-if="cata.section.status==1" style="font-size: 14px;">未开始</text>
                  <text v-if="cata.section.status==2" style="font-size: 14px;">进行中</text>
                  <text v-if="cata.section.status==9" style="font-size: 14px;">已完成</text>
                </view>
              </view>
              <view>
                <view v-for="(con,conIdx) in cata.children" :key="conIdx" class="catalog-con"
                      @click="playContent(con,conIdx,catIdx)">
                  <view class="catalog-con-name" :class="{'color-studying':curContent.id==con.id}">
                    <text>{{ catIdx + 1 }}.{{ conIdx + 1 }}.</text>
                    <!-- <text class="square-border">{{getConType(con.contentType)}}</text> -->
                    <text class="text-ellipsis" style="font-size: 14px;">{{ con.contentName }}</text>
                  </view>
                  <view>
                    <text v-if="con.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
                    <text v-if="con.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text>
                    <text v-if="con.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="catalog">
            <view>
              <view v-for="(con,conIdx) in contentList" :key="conIdx" class="catalog-con"
                    @click="playContent(con,conIdx)">
                <view class="catalog-con-name" :class="{'color-studying':curContent.id==con.id}">
                  <text>{{ conIdx + 1 }}.</text>
                  <!-- <text class="square-border">{{getConType(con.contentType)}}</text> -->
                  <text class="text-ellipsis" style="font-size: 14px;">{{ con.contentName }}</text>
                </view>
                <view>
                  <text v-if="con.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
                  <text v-if="con.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text>
                  <text v-if="con.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>

    </view>
    <!--推荐课程-->
    <view v-if="tabIndex==1 && !catalogShow" style="padding: 30upx;background-color: #fff;">
      <view style="color: #333333; font-size: 32upx;font-weight: 600;padding-bottom: 20upx;">课程推荐</view>
      <course-list :items="recommendCourses"></course-list>
    </view>
    <!--弹出窗口-->
    <!--课程简介-->
    <u-popup :show="summarylogShow" mode="right" @close="summaryCatalog" :safeAreaInsetTop="true" :closeable="true">
      <view class="summary-log" :style="`width: ${treePopupWidth};padding-top: 20px;`"
            style="height: 100vh; overflow: auto;">
        <!-- <view class=""> -->
        <view class="particulars">课程详情</view>
        <view class="matter">
          <u-parse v-if="courseInfo.summary" :content="courseInfo.summary"></u-parse>
          <text v-else>暂无</text>
        </view>
        <!-- </view> -->
      </view>
    </u-popup>
    <!-- 评分，赞和踩 -->
    <u-popup :show="scoreInfo.dlgShow" mode="center" :closeable="false" :closeOnClickOverlay="false" :round="14"
             @close="closeScore" @open="openScore">
      <view class="dlgscore">
        <view class="dlgscore-top">
          <view class="dlgscore-title">课程评价</view>
          <view class="dlgscore-desc">对课程进行评分吧！</view>
          <view class="dlgscore-score">
            <u-rate :count="5" :size="35" activeColor="#F37101" v-model="scoreInfo.score"></u-rate>
          </view>
        </view>
        <view class="dlgscore-btns">
          <view class="dlgscore-cancel">
            <text @click="closeScore">取消</text>
          </view>
          <view class="dlgscore-submit">
            <text @click="addScore()">提交</text>
          </view>
          <!-- <u-button type="primary" @click="addScore()" text="提交评分"></u-button> -->
        </view>
      </view>
    </u-popup>
    <interact-share ref="comShare" :data="courseInfo" :type="1"></interact-share>
  </view>
<!--  <u-popup :show="protocolDialogVisible" mode="center" :closeable="false" :closeOnClickOverlay="false" :round="14" @close="closeDialog">-->
<!--    <view class="dlgscore">-->
<!--      <view class="dlgscore-top">-->
<!--        <view class="dlgscore-title">{{warnTitle}}</view>-->
<!--        <view class="dlgscore-desc">{{warn}}</view>-->
<!--      </view>-->
<!--      <view  class="dlgscore-btns">-->
<!--        <view class="dlgscore-submit">-->
<!--          <text @click="addScore()">确认</text>-->
<!--        </view>-->
<!--        &lt;!&ndash; <u-button type="primary" @click="addScore()" text="提交评分"></u-button> &ndash;&gt;-->
<!--      </view>-->
<!--    </view>-->
<!--  </u-popup>-->
</template>

<script>
import config from '@/config/index.js'
import apiCoursePortal from '@/api/modules/coursePortal.js'
import apiCourseStudy from '@/api/modules/courseStudy.js'
import apiVideoStudy from "@/api/modules/videoStudy.js";
import apiCourseGrade from "@/api/modules/courseGrade.js";
import apiCourseFile from "@/api/modules/courseFile.js";
import apiUser from '@/api/system/user.js';
import apiUserFollow from '@/api/phase2/userfollow.js'
import apiStat from '@/api/phase2/stat.js'
import apiResOwner from '@/api/modules/resowner.js'
import apiPraises from "@/api/modules/praises.js";
import apiTrample from "@/api/modules/trample.js";
import apiMessage from '@/api/system/message.js'
import apiFavorites from '@/api/modules/favorites.js'
import {getContentType} from "@/utils/tools.js";
import studyUtil from '@/utils/study.js';
import {toScore, cutOrgNamePath, formatUserNumber} from '@/utils/tools.js';
import {mapGetters, mapActions} from 'vuex'

export default {
  data() {
    return {
      tentative: false,
      isShowPdt: true,
      progressData: 0,
      contentTypeV: '',
      trueFalse: true,
      loading: false,//加载中
      courseId: '',//当前课程的id
      studyId: '',//当前学习的id
      initContentId: '',//初始化的内容id
      courseInfo: {id: '', name: '', score: 0},//课程信息
      teachers: [],//课程老师列表
      recommendCourses: [],//推荐课程列表
      catalogShow: false,//是否显示目录
      totalContent: 0,//课程内容数量
      hasSection: false,//是否有目录
      tabIndex: 1,//显示的tab内容
      scoreInfo: {dlgShow: false, score: 0, has: false},//评分控制项
      isPraise: false,//是否已点赞
      isTrample: false,//是否已踩
      isFavorite: false,//是否已收藏
      isFollow: false,//是否已关注
      myScore: 0,//我的评分，如果是0表未评分
      toScore: toScore,
      formatUserNumber: formatUserNumber,
      getConType: getContentType,
      onplay: false,
      touchNum: 0,
      playerBoxShow: false,
      summarylogShow: false,
      scrollItemWidth: this.$width,
      treePopupWidth: '400px',
      fileBaseUrl: this.$config.fileUrl,
      curSection: {},//当前所在的章
      curContent: {id: '', studyItemId: '', status: 1},//当前的内容
      conLink: {openType: 1, url: ''},//外连接内容
      curriculumData: {url: '', isDrag: true, completeSetup: 1, setupTage: 0, second: 0},// 课件内容

      authorInfo: {aid: '', name: '', code: '', orgInfo: ''},

      sectionList: [],
      contentList: [],
      videoScore: 3,
      videoPlayingTime: 0,
      speedListShow: false,
      speedList: ["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
      videoSpeed: 1.0, // 当前倍速:

      interactRuning: false,
      scrollInfo: {
        scrollLeft: 0,
        scrollWidth: 0
      },
      handleTimeout: null,
      isAppendTime: true,
      appendStartTime: null, //记录追加的开始时间
      appendHandle: null,//追加学习时长的timeout句柄
      appentId: '',//当前追加的学习时长的id
      appentInterval: 15,//追加学习时间的间隔 3秒加一次
      preTime: -1,
      blobUrl: '',//音视频的播放地址
      blobId: '',
      localTimeKey: 'boeu-study-time',//本地存储的学习时长的key   json格式
      localTimeValue: 0,//计算的时间
      appendStudyOtherHandle: null,
      articleMore: true,
      scormUrl: '',
      maxDuration: 0, //非音频最大时长
      cumulativeDuration: 0, //非音频累计时长
      defaultMaxTime: 1800, //非音频默认最大时间
        Internet: 3,//1是成功 2是是失败 3是检测中
        protocolDialogVisible:false,
        warn:"测试内容",
        warnTitle:"测试提示",
        renderCourse:true,
      showNavbar: true
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'sysTypeMap']),
    catalogTree() {
      let treeList = [];
      let $this = this;
      $this.sectionList.forEach(sec => {
        let treeNode = {section: sec, children: []}
        sec.status = 1;
        let finishCount = 0;
        $this.contentList.forEach(c => {
          if (c.csectionId == sec.id) {
            if (c.status > 1) {
              sec.status = 2;
              if (c.status == 9) {
                finishCount++;
              }
            }
            treeNode.children.push(c);
          }
        });
        if (finishCount == treeNode.children.length) {
          sec.status = 9;
        }
        treeList.push(treeNode);
      })
      return treeList;
    },
    scrollList() {
      let list = [];
      this.catalogTree.forEach((cata) => {
        cata.children.forEach((child, childIdx) => {
          if (childIdx == 0) {
            child.cataName = cata.section.name;
            child.cataStatus = cata.section.status;
          } else {
            child.cataName = '';
          }
          list.push(child)
        })
      });
      return list;
    },
  },
  onLoad(options) {
      this.getInternet();
    //this.$watermark.set(this.userInfo.name+ this.userInfo.loginName);
    this.scrollItemWidth = (this.$width - 100) / 2;//横向滚动的内容块宽度
    this.treePopupWidth = (this.$width - 100) + 'px'; //右边出来的抽屉宽度控制
    if (options.contentId) {
      this.initContentId = options.contentId;
    }
    this.courseId = options.id;
    this.courseInfo.id = options.id;
    this.loadDetail();//加载课程数据
    this.getSysTypeTree();
    this.loadSysTypes();
    this.loadReCourses();//加载推荐课程
    this.loadIsData();//加载关注，收藏，评价等信息
    this.loadMyScore();
  },
  onShow() {
    uni.setNavigationBarTitle({title: '\u200E'})

    //实时渲染当前的播放状态
  },
  onReady() {

  },
  onHide() {
    //清除定时任务,隐藏的时候不清除，因为没有停止播放
    // this.clearTimeHandle();
    console.log('触发onHide');
  },
  destroyed() {
    this.clearTimeHandle();
  },
  methods: {
    ...mapActions({
      // getResOwnerTree:'resOwner/getResOwnerTree',
      // loadResOwners:'resOwner/loadResOwners',
      getSysTypeTree: 'sysType/getSysTypeTree',
      loadSysTypes: 'sysType/loadSysTypes'
    }),

    // 没有写播放时间
    onPlayerPlay() {
      console.log(`start play`)
      this.playerBoxShow = false;
      this.isAppendTime = true;
      this.appendStudyTime();//启动追加学习时长
    },
    convertTypeName(code) {
      if (!code) {
        return '';
      }
      return this.sysTypeMap.get(code);
    },
    clearTimeHandle() {
      if (this.appendStudyOtherHandle != null) {
        window.clearTimeout(this.appendStudyOtherHandle);
      }
      if (this.appendHandle != null) {
        window.clearTimeout(this.appendHandle);
      }
      if (this.handleTimeout != null) {
        window.clearTimeout(this.handleTimeout);
      }
    },
      getXmlHttpRequest() {
        if (window.XMLHttpRequest) {
          return new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
      },
      // 检测是否为内网
      getInternet() {
        this.Internet = 3;
        let $this = this;
        let xmlhttp = this.getXmlHttpRequest();
        let timedOut = false;
        let timer = setTimeout(function () {
          timedOut = true;
          xmlhttp.abort();
        }, 1000);
        xmlhttp.open("HEAD", window.location.protocol + "//uapi.boe.com.cn/500.html", true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
              clearTimeout(timer);
              $this.Internet = 1;
            } else {
              clearTimeout(timer);
              // $this.protocolDialogVisible=true
              $this.Internet = 2;
            }
          } else {
            if (timedOut) return;//忽略中止请求
            clearTimeout(timer);//取消等待的超时
          }
        }
      },
    iframeScormLoad() {
      setTimeout(function () {
        var scormIframe = document.getElementById('iframe-scorm');
        if (scormIframe) {
          let iframeWin = scormIframe.contentWindow;
          let iframeDoc = scormIframe.contentDocument || scormIframe.document;

          let cHeight = Math.max(iframeDoc.body.clientHeight, iframeDoc.documentElement.clientHeight);
          let sHeight = Math.max(iframeDoc.body.scrollHeight, iframeDoc.documentElement.scrollHeight);
          let winHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;

          let lheight = Math.max(cHeight, sHeight);
          let finalHeight = Math.max(lheight, winHeight);

          scormIframe.height = finalHeight;
          console.log('scormIframe.height', scormIframe.height);
        }
      }, 1500);

    },
    loadMyScore() {
      apiCourseGrade.score({courseId: this.courseId}).then(rs => {
        if (rs.status == 200) {
          this.myScore = rs.result.scores;
          this.scoreInfo.has = true;
        }
      })
    },
    loadDetail() {
      let $this = this;
      uni.showLoading({title: '加载中...'})
      apiCourseStudy.studyIndex(this.courseId).then(rs => {
          console.log("是这个")
        if (rs.status != 200) {
          uni.hideLoading();
          uni.showToast({title: rs.message, type: 'fail'});
          //$this.$refs.messager.show({message:rs.message,type:'error'});
          return;
        }
        if (rs.result.contents.length == 0) {
          //$this.$refs.messager.show({message:'课程内容已删除或课程已不再使用',type:'error'});
          uni.showToast({title: '课程内容已删除或课程已不再使用', type: 'fail'});
          return;
        }
        if (!rs.result.course.enabled) {
          uni.showToast({title: '十分抱歉，此课程已停用，如需使用，请联系管理员。', type: 'fail'});
          //$this.$refs.messager.show({message:'十分抱歉，此课程已停用，如需使用，请联系管理员。',type:'error'});
          return;
        }
          if (!rs.result.isPermission || (rs.result.isPermission && this.Internet==1)){
            // this.getInternet()
            this.renderCourse = true
          }else{
            // this.Internet=1;
            this.renderCourse = false
            // this.protocolDialogVisible=true
          }
        $this.courseInfo = rs.result.course;
        //$this.scoreInfo.score=rs.result.course.score;
        //处理老师数据
        if (rs.result.teachers && rs.result.teachers.length > 0) {
          let userIds = [];
          //let ctoUsers = [];
          rs.result.teachers.forEach(item => {
            item.followed = false;
            item.name = '';
            item.orgInfo = '';
            item.avatar = '';
            item.code = '';
            item.sex = null;
            userIds.push(item.teacherId);
            //检查是否已关注
            apiUserFollow.has(item.teacherId).then(followRs => {
              if (followRs.status == 200 && followRs.result) {
                item.followed = true;
              }
            })
          });

          $this.loadAuthorInfo(rs.result.teachers, userIds);
          $this.teachers = rs.result.teachers;
        }

        let showConId = this.initContentId;
        //console.log(showConId,'showConId');
        if (rs.result.course.type > 10) {
          rs.result.sections.forEach(sec => {
            sec.status = 1;//加入状态表未开始
            rs.result.contents.forEach(c => {
              c.status = 1;//初始化状态 ，未开始
              c.studyItemId = '';//初始化字段，学习条目id
              c.lastStudyTime = 0;

              if (showConId != '' && c.id == showConId) {
                $this.curContent = c;
                $this.curSection = sec;
              }
            });
          })
        } else if (rs.result.course.type == 10) {
          let indexNum = 0;
          let delIndexs = [];
          rs.result.contents.forEach((c, cidx) => {
            c.status = 0; //
            c.studyItemId = '';
            c.lastStudyTime = 0;
            if (c.sortIndex == 1) {
              c.contentName = rs.result.course.name;
              indexNum++;
              if (indexNum > 1) {
                delIndexs.push(cidx);
              }
            } else if (c.sortIndex == 2) {
              c.contentName = '作业';
            } else if (c.sortIndex == 3) {
              c.contentName = '考试';
            } else if (c.sortIndex == 4) {
              c.contentName = '评估';
            }
          });
          if (delIndexs.length > 0) {
            delIndexs.forEach(delIdx => {
              rs.result.contents.splice(delIdx, 1);
            })
          }
          //定位初始化数据
          rs.result.contents.forEach((c, cidx) => {
            if (showConId != '' && c.id == showConId) {
              $this.curContent = c;
            }
          })
        }
        this.contentList = rs.result.contents;//内容列表
        this.totalContent = rs.result.contents.length;//一共有向个可以播放的内容
        this.sectionList = rs.result.sections;
        //处理学习内容
        this.studyId = rs.result.studyId;
        this.contentList.forEach(con => {
          con.progressVideo = con.progressVideo || 0;
          rs.result.contentStudys.forEach((scon, sconIdx) => {
            //第一条就是最近学习的
            if (sconIdx == 0 && $this.initContentId == '') {
              //$this.curContent=con;
              //查询对应的章节
            }
            if (scon.contentId == con.id) {
              con.lastStudyTime = scon.lastStudyTime;
              con.progressVideo = scon.progressVideo || 0;
              //以下判断是为了兼容之前的问题，学习状态
              if (scon.status) {
                con.status = scon.status;
              } else {
                con.status = 9;
              }
              con.studyItemId = scon.id;//这个就是学习内容（条目）的id
            }
          })
        });
        //设置正在学习的章节
        if (this.curContent.id) {
          this.playContent(this.curContent, 0);
          //this.curSection=this.sectionList[0];
        } else {
          let treelist = this.catalogTree;
          //console.log(treelist,'treelist')
          if (treelist.length > 0) {
            this.curSection = treelist[0].sec;
            this.curContent = treelist[0].children[0];
          } else {
            this.curContent = this.contentList[0];
            this.curSection = this.sectionList[0];
          }
          //要不要在这里处理？
          // if(this.curContent.contentType==10 || this.curContent.contentType==20){
          // 	if(this.contentList[0].content.startsWith('\{')){
          // 	   this.curriculumData=JSON.parse(this.contentList[0].content);
          // 	}else{
          // 	   this.curriculumData.url=this.contentList[0].content;
          // 	}
          // }
          //this.curContent=this.contentList[0];
          this.playContent(this.curContent, 0);
        }
        uni.hideLoading();

      });
    },
    playContent(con, conIndex, catIndex) {
      this.isShowPdt = true
      // 视频设置禁用处理逻辑,如果用户已全部观看完该视频，则设置为能全部拖动的逻辑，把isDrag设置为true即可,同时删除本地存储的数据
      if (con.progressVideo === 1) {
        var obj = JSON.parse(con.content)
        obj.isDrag = true
        con.content = JSON.stringify(obj)

        var time = localStorage.getItem('videoProgressData')
        var arr = time && JSON.parse(time) || {}
        //alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr))
        delete arr[con.id];
        localStorage.setItem('videoProgressData', JSON.stringify(arr))
      }
      if (con.progressVideo > 0 && con.progressVideo !== 1) {
        var time = localStorage.getItem('videoProgressData')
        var arr = time && JSON.parse(time) || {}
        arr[con.id] = con.progressVideo
        localStorage.setItem('videoProgressData', JSON.stringify(arr))
      }

      console.log('更换播放内容 playContent::', con, conIndex, catIndex)
      //对于需要控制学习顺序的
      if (conIndex != undefined && catIndex != undefined) {
        if (this.courseInfo.orderStudy) {
          let hasIndex = -1;
          this.scrollList.some((one, idx) => {
            if (one.id == con.id) {
              hasIndex = idx;
              return true;
            }
            return false;
          })
          if (hasIndex > 0) {
            let pre = this.scrollList[hasIndex - 1];
            if (pre.status != 9) {
              //uni.showToast({title:'请按顺序学习',type:'fail'});
              this.$refs.messager.show({message: '请按顺序学习', type: 'error'});
              return;
            }
          }
        }
      }

      //切换播放内容
      this.changePlayRes(con);
    },
    loadReCourses() {
      let dto = {
        sysType1: this.courseInfo.sysType1,
        sysType2: this.courseInfo.sysType2,
        sysType3: this.courseInfo.sysType3
      }
      apiCoursePortal.recommendList(dto).then(rs => {
        if (rs.status == 200) {
          this.recommendCourses = rs.result;
        }
      })
    },
    loadAuthorInfo(list, ids) {
      //加载作者信息，头像，机构信息
      if (ids.length == 0) {
        return;
      }
      apiUser.getByIds(ids).then(res => {
        if (res.status == 200) {
          list.forEach((item, index) => {
            res.result.some(author => {
              if (author.aid == item.teacherId) {
                item.name = author.name;
                item.orgInfo = cutOrgNamePath(author.orgInfo);
                item.avatar = author.avatar;
                item.code = author.code;
                item.sex = author.sex;
                if (author.avatar != '') {
                  item.avatar = this.$config.fileUrl + author.avatar;
                }
                return true;
              } else {
                return false;
              }
            });
          });
        } else {
          //console.log('加载课程信息失败:'+res.error);
          //this.$message.error(res.message);
        }
      });
    },
    loadUserInfo(uid) {
      apiUser.getByIds([uid]).then(res => {
        if (res.status == 200) {
          this.authorInfo = res.result[0];
        }
      })
    },
    loadIsData() {
      //加载是否关注，是否收藏，是否评价等
      apiFavorites.has(1, this.courseId).then(rs => {
        if (rs.status == 200 && rs.result) {
          this.isFavorite = true;
        } else {
          this.isFavorite = false;
        }
      })
      // apiCourseGrade.has(this.courseId).then(rs=>{
      //   if(rs.status==200 && rs.result){
      //     this.scoreInfo.has=true;
      //   }
      // });
      apiPraises.has(1, this.courseId).then(rs => {
        if (rs.status == 200 && rs.result) {
          this.isPraise = true;
        }
      });
      apiTrample.has(this.courseId).then(rs => {
        if (rs.status == 200 && rs.result) {
          this.isTrample = true;
        }
      });

    },
    //更换播放内容
    changePlayRes(con) {
      this.tentative = false;
      this.trueFalse = true;
      this.videoPlayingTime = 0
      this.scormUrl = '';//清空地址
      this.articleMore = true;
      this.clearTimeHandle();
      //this.curContent=0;
      // console.log(con,'con');
      this.playerBoxShow = false;
      if (con.contentType == 40) {
        //如果是文档，需要再次加载pdf
        if (con.content != '' && con.content.indexOf('.pdf') == -1) {
          // 先置空，否则会有延迟
          con.content = '';
          apiCourseFile.detail(con.contentRefId).then(cfrs => {
            if (cfrs.status == 200) {
              con.content = cfrs.result.previewFilePath;
              //console.log(r.content);
            } else {
              $this.$refs.messager.show({message: '加载pdf课件文件失败', type: 'error'});
            }
          });
        }
        if (con.content == '') {
          apiCourseFile.detail(con.contentRefId).then(cfrs => {
            if (cfrs.status == 200) {
              con.content = cfrs.result.previewFilePath;
            } else {
              $this.$refs.messager.show({message: '加载pdf课件文件失败', type: 'error'});
            }
          });
        }
      } else if (con.contentType == 50) { //scorm课件的内容

        apiCourseFile.detail(con.contentRefId).then(cfrs => {
          if (cfrs.status == 200) {
            //this.curCFile = cfrs.result;
            //this.scormUrl=cfrs
            let pars = '?mode=normal&r=' + Math.random();
            pars += '&scormId=' + cfrs.result.id;
            pars += '&courseId=' + this.courseId;
            pars += '&contentId=' + con.id;
            pars += '&studentId=' + this.userInfo.aid;
            pars += '&studentName=' + encodeURIComponent(this.userInfo.name);
            pars += '&lmsId=' + this.studyId;
            pars += '&scoId=';//不指定，scorm模块自动根据学习记录定位
            pars += '&r=' + Math.random();//加一个随机数，以便重新加载
            let urlPre = window.location.protocol;
            let configUrl = config.scormPlayer;
            configUrl = urlPre + configUrl.substring(configUrl.indexOf(':') + 1);

            this.scormUrl = configUrl + pars;//播放的首页
            console.log(this.scormUrl, 'this.scormUrl')

          }
        });

      } else if (con.contentType == 52) {
        if (con.content.startsWith('\{')) {
          this.conLink = JSON.parse(con.content);
        } else {
          this.conLink.url = con.content;
          this.conLink.openType = 1;
        }
        // todo: 暂时不知道这个 52 是干嘛的， 先写死吧
        // if (this.conLink.openType == 2) {
        //新的窗口直接打开
        const url = this.conLink.url

        console.log(`------- current url is : `, url)
        if (url.includes("/mobile")) {
          setTimeout(() => window.open(url.replace("/mobile", ""), "_top"))
        } else {
          location.href = url
        }
        // }
      } else if (con.contentType == 10 || con.contentType == 20) {
        if (con.content.startsWith('\{')) {
          var d = JSON.parse(con.content)
          // if(d.url=="/course/2024/4/1224670812274712576.mp4") d.isDrag = false
          this.curriculumData = d;
        } else {
          this.curriculumData.url = con.content;
        }
        console.log('this.curriculumData:::', this.curriculumData)

        this.blobUrl = this.fileBaseUrl + this.curriculumData.url;
        this.blobId = con.id;
      }
      //console.log(con.contentType,'con.contentType');
      this.curContent = con;
      this.catalogShow = false;
      this.scoreInfo.itemId = con.id;
      if (this.curContent.status < 2) {
        this.curContent.status = 2; //设置状态 进行中
      }
      //横向滚动条定位
      let len = 0;
      this.scrollList.some((sitem, idx) => {
        if (sitem.id == con.id) {
          len = idx;
          return true;
        }
        return false;
      })
      this.scrollInfo.scrollLeft = len * this.scrollItemWidth + len * 6;
      //50事scorm项目单独计时
      if (con.contentType > 20 && con.contentType !== 50) {
        let $this = this;
        //用户的学习时长，音视频课程学习,单独的处理，不再追加学习时长
        this.isAppendTime = false;
        this.appendStudyOtherHandle = setTimeout(function () {
          // 开始之前把响应式清空
          $this.maxDuration = 0;
          $this.cumulativeDuration = 0;
          // 没有设置默认时长三十分钟，
          $this.maxDuration = con.duration !== 0 ? con.duration * 2 : $this.defaultMaxTime;
          //静默处理
          apiStat.sendEvent({
            "key": "StudyCourse",//课程学习的key
            "title": "学习课程",//事件的标题
            "parameters": "second:15",//second:value,total:value 本次的学习时长
            "content": "学习课程【" + $this.courseInfo.name + "】",//事件的内容
            "objId": $this.courseInfo.id,//课程的id
            "objType": "1",//类型
            "source": "h5",
            "objInfo": "" + $this.courseInfo.name,
            "aid": $this.userInfo.aid, //当前登录人的id
            "aname": $this.userInfo.name,//当前人的姓名
            "status": 1 //状态
          }).then(rs => {
            if (rs.status !== 200) {
              console.log(rs.message);
            }
          });
          $this.appendStudyOtherTime();
        }, 1000 * 15); //非音视频课程学习,15秒后记录，因为一次记录是60秒
        //this.appendStudyTime();
        //非视频，音频的5秒后学习完成
        if (con.contentType != 50) {
          this.handleTimeout = setTimeout(function () {
            $this.saveStudyInfo();
          }, 5000);//5秒后记录学习完成
        } else {
          //scorm课件不记录完成情况，由播放回调记录完成情况
          //当前先保存学习记录，未学习状态
          this.saveScormStudy();
        }

      }
      // 切换课程之后 studyItemId 没有及时清理， 导致 chrome 系列的浏览器
      // 切换课程之后不会重新计算观看时间位置
      this.curContent.studyItemId = ''
    },
    followUser(tea) {
      //实现关注处理
      if (tea.followed) {
        apiUserFollow.remove(tea.teacherId).then(rs => {
          if (rs.status == 200) {
            tea.followed = false;
            this.$refs.messager.show({message: '取消关注', type: 'success'});
          } else {
            this.$refs.messager.show({message: rs.message, type: 'error'});
          }
        })
      } else {
        apiUserFollow.save(tea.teacherId).then(rs => {
          if (rs.status == 200) {
            tea.followed = true;
            this.$refs.messager.show({message: '关注成功', type: 'success'});
          } else {
            this.$refs.messager.show({message: rs.message, type: 'error'});
          }
        })
      }
    },
    goTop() {
      window.scrollTo(0, 0);
      this.showAllCatalog()
      this.isShowPdt = false
    },
    changeTab(idx) {
      this.tabIndex = idx;
    },
    showAllCatalog() {
      this.catalogShow = true;
      //定位目录
    },
    closeAllCatalog() {
      this.catalogShow = false;
      this.isShowPdt = true
      //定位目录
    },
    openScore() {
      //显示评分弹窗
      if (this.scoreInfo.has) {
        this.$refs.messager.show({message: '您已评过分', type: 'error'});
        return;
      }
      this.scoreInfo.dlgShow = true;
    },
    closeScore() {
      this.scoreInfo.dlgShow = false;
    },
      closeDialog(){
        this.protocolDialogVisible=false;
      },
    addScore() {
      if (this.scoreInfo.has) {
        this.$refs.messager.show({message: '您已评过分', type: 'error'});
        this.scoreInfo.dlgShow = false;
        return;
      }
      let postData = {
        courseId: this.courseInfo.id,
        studyId: this.studyId,
        score: this.scoreInfo.score
      }
      if (this.scoreInfo.score > 0) {
        apiCourseGrade.grade(postData).then(rs => {
          if (rs.status == 200) {
            this.scoreInfo.dlgShow = false;
            this.scoreInfo.has = true;
            if (this.courseInfo.score == 0) {
              this.courseInfo.score = postData.score;
            }
            if (this.myScore == 0) {
              this.myScore = postData.score;
            }
            this.$refs.messager.show({message: '评分成功，谢谢您的评分', type: 'success'});
            //发送评分事件
            let event = {
              key: "ScoreCourse", //后台的事件key  发布文章且审核通过
              title: "完成课程评分", //事件的标题
              source: "h5",//移动端是2
              parameters: "", //用户自定义参数 name:value,name:value
              content: "给课程评分", //事件的内容
              objId: this.courseInfo.id, //关联的id
              objType: 1, //关联的类型
              objInfo: this.courseInfo.name,
              aid: this.userInfo.aid, //当前登录人的id
              aname: this.userInfo.name, //当前人的姓名
              status: 1 //状态，直接写1
            }
            apiStat.sendEvent(event);
          } else {
            this.$refs.messager.show({message: '评分分处理失败，请稍后再试', type: 'error'});
          }
        });
      }
    },
    openComment() {
      //打开评论窗口，调用组件内事件
      this.$refs.fiexdbar.openInput();
    },
    refreshComments() {
      this.$refs.comments.loadData(false);
    },
    openShare() {
      //console.log(this.$refs.fiexdbar,'this.$refs.fiexdbar');
      //因为开始是v-if控制的，所以这里获取不到，必须显示时才会获取到，所以需要单独的弄一个分享组件
      this.$refs.comShare.openShare();

    },
    shareSuccess(rs) {
      this.$refs.messager.show({message: '分享成功', type: 'success'});
    },
    addFavorite() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      uni.showLoading({title: '处理中...'})
      let firstTeacher = {};
      if (this.teachers.length > 0) {
        firstTeacher = this.teachers[0];
      }
      //需要判断是否已点赞，已点赞的不再加
      let postData = {
        objType: 1,
        objId: this.courseId,
        title: this.courseInfo.name,
      }
      if (this.isFavorite) {// 已经收藏，再次点击取消收藏
        apiFavorites.remove(1, this.courseId).then(res => {
          this.loading = false;
          if (res.status == 200) {
            this.isFavorite = false;
            this.$refs.messager.show({message: '已取消收藏', type: 'success'});
          } else {
            console.log('取消收藏失败：' + res.message);
          }
          uni.hideLoading();
        })
      } else {
        apiFavorites.save(postData).then(res => {
          this.loading = false;
          if (res.status == 200 && res.result) {
            this.isFavorite = true;
            this.$refs.messager.show({message: '已加入收藏', type: 'success'});
            //发送消息
            let message = {
              content: this.userInfo.name + '收藏了我的课程-' + this.courseInfo.name,
              refId: this.courseInfo.id,
              refType: 1,
              source: 1,
              pageType: 1,
              pageParams: this.courseInfo.id,
              sendAid: this.userInfo.aid,
              sendName: this.userInfo.name,
              acceptName: firstTeacher.teacherName,
              acceptId: firstTeacher.teacherId,
              title: '系统消息',
              sendType: 1,
              conType: this.courseInfo.type,
            }
            apiMessage.save(message).then(res => {
              if (res.status != 200) {
                console.log('发送消息失败')
              }
            })
          } else {
            this.$refs.messager.show({message: '收藏失败', type: 'error'});
            console.log('加入收藏失败：' + res.message);
          }
          uni.hideLoading();
        })
      }
    },
    praiseContent() {
      //赞和踩只能是一个
      if (this.isTrample) {
        this.$refs.messager.show({message: '已踩不能赞了', type: 'error'});
        return;
      }
      let postData = {
        objType: 1,
        objId: this.courseInfo.id,
        title: this.courseInfo.name
      }
      if (this.interactRuning) {
        return;
      }
      this.interactRuning = true;
      let firstTeacher = {};
      if (this.teachers.length > 0) {
        firstTeacher = this.teachers[0];
      }

      if (this.isPraise) {
        apiPraises.remove(1, this.courseInfo.id).then(rs => {
          this.interactRuning = false;
          if (rs.status == 200) {
            this.$refs.messager.show({message: '已取消点赞', type: 'success'});
            this.isPraise = false;
            this.courseInfo.praises--;
            let event = {
              key: "CancelPraise",//点赞
              title: "取消点赞",//事件的标题
              parameters: "author:" + firstTeacher.teacherId,//用户自定义参数 name:value,name:value
              content: "取消点赞课程",//事件的内容
              source: "h5",//移动端是2
              objId: this.courseId,//关联的id
              objType: "1",//关联的类型
              objInfo: this.courseInfo.name,
              aid: this.userInfo.aid, //当前登录人的id
              aname: this.userInfo.name,//当前人的姓名
              status: 1 //状态，直接写1
            }
            apiStat.sendEvent(event);
          } else {
            this.$refs.messager.show({message: '取消点赞失败,请稍后再试', type: 'success'});
          }
        })
      } else {
        apiPraises.save(postData).then(rs => {
          this.interactRuning = false;
          if (rs.status == 200) {
            this.$refs.messager.show({message: '点赞成功', type: 'success'});
            this.isPraise = true;
            this.courseInfo.praises++;

            let event = {
              key: "Praise",//点赞
              title: "点赞",//事件的标题
              parameters: "author:" + firstTeacher.teacherId,//用户自定义参数 name:value,name:value
              content: "点赞了课程",//事件的内容
              source: "h5",//移动端是2
              objId: this.courseInfo.id,//关联的id
              objType: "1",//关联的类型
              objInfo: this.courseInfo.name,
              aid: this.userInfo.aid, //当前登录人的id
              aname: this.userInfo.name,//当前人的姓名
              status: 1 //状态，直接写1
            }
            apiStat.sendEvent(event);
            let message = {
              content: this.userInfo.name + '点赞了我的课程-' + this.courseInfo.name,
              refId: this.courseInfo.id,
              refType: 1,
              source: 1,
              pageType: 1,
              pageParams: this.courseInfo.id,
              sendAid: this.userInfo.aid,
              sendName: this.userInfo.name,
              acceptName: firstTeacher.teacherName,
              acceptId: firstTeacher.teacherId,
              title: '系统消息',
              sendType: 1,
              conType: this.courseInfo.type,
            }
            apiMessage.save(message).then(res => {
              if (res.status != 200) {
                console.log('发送消息失败')
              }
            })
          } else {
            this.$refs.messager.show({message: '点赞失败,请稍后再试', type: 'success'});
          }
        })
      }
    },
    treadContent() {
      //赞和踩只能是一个
      if (this.isPraise) {
        this.$refs.messager.show({message: '已赞不能踩了', type: 'error'});
        return;
      }
      if (this.interactRuning) {
        return;
      }
      this.interactRuning = true;
      if (this.isTrample) {
        //取消
        apiTrample.remove(this.courseInfo.id).then(rs => {
          this.interactRuning = false;
          if (rs.status == 200) {
            this.$refs.messager.show({message: '已取消踩', type: 'success'});
            this.isTrample = false;
            this.courseInfo.trampleCount--;
          } else {
            this.$refs.messager.show({message: '取消踩失败,请稍后再试', type: 'error'});
          }
        })
      } else {
        apiTrample.trample(this.courseInfo.id).then(rs => {
          this.interactRuning = false;
          if (rs.status == 200) {
            this.$refs.messager.show({message: '已踩', type: 'success'});
            this.isTrample = true;
            this.courseInfo.trampleCount++;
          } else {
            this.$refs.messager.show({message: '踩失败,请稍后再试', type: 'error'});
          }
        })
      }
    },
    scrollHandler(e) {
      //console.log(e);
      this.scrollInfo = e.detail;
    },
    //以下是播放相关的处理
    saveStudyDuration(duration) { //保存本地存储的学习时长
      if (duration > 0) {
        //发送用户学习事件
        //console.log('保存到后台学习时长='+duration);
        let postData = {
          "key": "StudyCourse",//课程学习的key
          "title": "学习课程",//事件的标题
          "parameters": "second:" + duration,//second:value,total:value 本次的学习时长
          "content": "学习课程【" + this.courseInfo.name + "】",//事件的内容
          "objId": this.courseInfo.id,//课程的id
          "objType": "1",//类型
          "source": "h5",
          "objInfo": "" + this.courseInfo.name,
          "aid": this.userInfo.aid, //当前登录人的id
          "aname": this.userInfo.name,//当前人的姓名
          "status": 1 //状态
        }
        //静默处理
        apiStat.sendEvent(postData).then(rs => {
          if (rs.status == 200) {
            //this.appendStartTime = new Date();//重新计时
            studyUtil.clearStudyDuration(); //清除本地存储
          } else {
            console.log(rs.message);
          }
        });
      }
    },
    //结束追加学习时长
    stopStudyTime() {
      //console.log('停止追加学习时长');
      this.isAppendTime = false;
      //暂停让他为空 从新计时
      this.appendStartTime = null
      if (this.appendHandle != null) {
        window.clearTimeout(this.appendHandle);
      }
    },
    //追加学习时长， flag是否提交到后台
    appendStudyTime() {
      // 暂停的时候重新从十五秒开始
      if (!this.appendStartTime) {
        this.appentInterval = 15
      }
      //重新覆盖时间
      this.appendStartTime = new Date();
      //console.log('开始追加学习时长',this.isAppendTime);
      if (this.studyId == '') {
        console.warn(`this.studyId == ''`, this.studyId)
        return;
      }
      if (!this.curContent.id) {
        console.warn(`this.curContent.id`, this.studyId)
        return;
      }
      //清除之前的
      if (this.appendHandle != null) {
        console.warn(`timer clear`)
        window.clearTimeout(this.appendHandle);
      }
      if (!this.isAppendTime) {
        console.warn(`this.isAppendTime` , false)
        return;
      }
      //启动下次追加学习时长
      this.appendHandle = setTimeout(() => {
        let endTime = new Date().getTime();
        this.appentInterval = 60;
        let duration = Math.round((endTime - this.appendStartTime) / 1000);
        this.appendStudyTime();
        this.saveStudyDuration(duration);
      }, this.appentInterval * 1000);
    },
    // appendStudyTime() {
    //   //console.log('开始追加学习时长',this.isAppendTime);
    //   if (this.studyId == '') {
    //     return;
    //   }
    //   if (!this.curContent.id) {
    //     return;
    //   }
    //   //清除之前的
    //   if(this.appendHandle != null) {
    //     window.clearTimeout(this.appendHandle);
    //   }
    //   if (!this.isAppendTime) {
    //     this.appendStartTime = null;
    //     return;
    //   }
    //   //首先从本地读取
    //   let duration = studyUtil.getStudyDuration();
    //   //console.log('追加学习时长，当前本地积累的学习时长='+duration);
    //   //追加学习长
    //   let $this = this;
    //   if (this.appendStartTime == null) {
    //     this.appendStartTime = new Date();
    //     this.appendHandle = setTimeout(function() {
    // 		$this.appendStudyTime();
    //     }, $this.appentInterval); //设置定时追加学习时长
    //     //保存之前的
    //     if (duration >= 60 ) {
    //       this.saveStudyDuration(duration);
    //     }
    //     return;
    //   }
    //   //如果当前追加开始时间不为空
    //   let now = new Date();
    //   let m = now.getTime() - this.appendStartTime.getTime(); //相差的毫秒数
    //   let sen = Math.round(m / 1000); //计算秒数
    //    // 每次添加的是定时器计时的时间
    //   duration = duration + sen;//追加的是秒
    //   if (duration >= 60) { //一分钟保存一次
    //     this.saveStudyDuration(duration);
    //   } else {
    //     studyUtil.setStudyDuration(duration); //添加到本地存储中
    //   }
    //   //重新覆盖时间
    //   this.appendStartTime = new Date();
    //   //启动下次追加学习时长
    //   this.appendHandle = setTimeout(function() {
    //     $this.appendStudyTime();
    //   }, $this.appentInterval);
    // },
    appendStudyOtherTime() { //非音视频课学习时长的增加,每一分钟保存一次
      //console.log('开始追加学习时长',this.isAppendTime);
      if (this.studyId == '') {
        return;
      }

      if (!this.curContent.id) {
        return;
      }
      //每一分钟保存一次
      // 取消阅读的每分钟六十秒的计时，最多是设置的时间或默认时间
      let $this = this;
      let startTime = new Date().getTime();
      this.appendStudyOtherHandle = setTimeout(function () {
        let endTime = new Date().getTime();
        let totalTime = Math.round((endTime - startTime) / 1000);
        $this.cumulativeDuration += totalTime;
        if ($this.cumulativeDuration <= $this.maxDuration) {
          //静默处理
          $this.sendOtherTime(totalTime)
          $this.appendStudyOtherTime();
        } else {
          clearTimeout(this.appendStudyOtherHandle);
          $this.cumulativeDuration = 0;
          $this.maxDuration = 0;
        }
      }, 1000 * 60);

    },
    sendOtherTime(totalTime) {
      apiStat.sendEvent({
        "key": "StudyCourseOther",//课程学习的key
        "title": "非音视频课内容",//事件的标题
        "parameters": "second:" + totalTime,//second:value 本次的学习时长
        "content": "学习课程",//事件的内容
        "objId": this.courseInfo.id,//课程的id
        "objType": "1",//类型
        "source": "h5",
        "objInfo": "" + this.courseInfo.name,
        "aid": this.userInfo.aid, //当前登录人的id
        "aname": this.userInfo.name,//当前人的姓名
        "status": 1 //状态
      }).then(rs => {
        if (rs.status != 200) {
          console.log(rs.message);
        }
      });
    },
    //先保存学习的内容,针对于音视频的内容
    saveStudyItem() {
      if (this.curContent.studyItemId) {
        return;//已经有记录的，不需要再保存了
      }
      let params = {
        studyId: this.studyId, //学习id,
        courseId: this.courseId, //课程id,
        contentId: this.curContent.id, //内容id,
        contentType: this.curContent.contentType, //内容id,
        contentName: this.curContent.contentName, //内容名称
        progress: 0,
        lastStudyTime: 0,
        status: 2,
        studyDuration: 0,
        contentTotal: this.totalContent
      };
      apiVideoStudy.saveStudyItem(params).then(res => {
        if (res.status == 200) {
          this.curContent.studyItemId = res.result.id;
          this.curContent.status = 2;//进行中状态
        } else {
          console.log("记录学习失败:" + res.message + "，" + res.error);
        }
      });
    },
    finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
      if (!this.curContent.studyItemId) { 	//临时方案避免重复调用
        //这种可能没有，不过这里也是为了万中那个1
        !this.tentative && this.saveStudyInfo();
      } else {
        let params = {
          itemId: this.curContent.studyItemId,
          studyId: this.studyId,
          courseId: this.courseId,
          cnum: this.totalContent
        }
        apiVideoStudy.finishStudyItem(params).then(res => {
          if (res.status == 200) {
            this.curContent.status = 9;
            this.curContent.progress = 100;
          } else {
            console.log("记录完成学习失败:" + res.message + "，" + res.error);
          }
        });
      }
    },
    onFullScreen(screen) {
      console.log("video screen status", screen)
      // debugger
      this.showNavbar = !screen
    },

    onPlayerPause() {
      this.stopStudyTime();
    },
    onPlayerEnded() {
      this.playerBoxShow = true;
      this.stopStudyTime();
      if (this.curContent.status < 9) {
        this.finishStudyItem();
      }
    },
    onPlayerPlaying(e) {
      if (!this.curContent.studyItemId || (e.detail.currentTime > 2 && this.trueFalse && this.curContent.status < 9)) {
        let params = {
          studyId: this.studyId,//学习id,
          courseId: this.courseId,//课程id,
          contentId: this.curContent.id,//内容id,
          contentType: this.curContent.contentType,
          contentName: this.curContent.contentName,//内容名称
          progress: 1,
          status: 2,
          contentTotal: this.totalContent
        }
        apiCourseStudy.studyContent(params).then(res => {
          if (res.status == 200) {
            this.curContent.status = 9;//完成
            this.curContent.studyItemId = res.result;//学习记录id
          } else {
            console.log('记录学习失败:' + res.message + '，' + res.error);
          }
        })
        this.trueFalse = false
      }
      //console.log("当前播放11",itme);
      // console.log("当前播放11"+itme);
      let intTime = parseInt(e.detail.currentTime);
      if (intTime > this.videoPlayingTime) {
        this.videoPlayingTime = intTime;
        //判断是否完成
        let completeType = this.curriculumData.completeSetup;
        let completeSecond = this.curriculumData.second;
        if (!completeSecond || completeType == 0) {
          completeSecond = 5; //如果没有就采用默认的时间了
        }
        if (this.curContent.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
          if (completeType == 1) {
            let finishPercent = this.curriculumData.setupTage;
            let videDuration = this.curContent.duration;
            let percent = intTime * 100 / videDuration;
            if (percent >= finishPercent) {
              this.finishStudyItem();
            }
          } else {
            if (intTime >= completeSecond) {
              this.finishStudyItem();
            }
          }
        }

      }
      //以下是每隔10秒存储一下进度
      let saveTime = Math.floor(intTime % 10);
      console.warn(intTime,saveTime,'aa',this.curContent.studyItemId)
      if (this.preTime != intTime && saveTime == 0 && this.curContent.studyItemId != '') {
        this.preTime = intTime;
        this.curContent.lastStudyTime = intTime;
        //记录播放时间
        console.log('记录播放时间:'+intTime);
        let postData = {
          itemId: this.curContent.studyItemId,
          videoTime: intTime,
          id: this.appentId,
          studyId: this.studyId,
          courseId: this.curContent.courseId,
          contentId: this.curContent.id,
          studyInfo: this.courseInfo.name + "-" + this.curContent.contentName,
          duration: 10
        }

        //alert(3+'--'+this.curriculumData.isDrag +'---'+this.curContent.progressVideo)
        if (!this.curriculumData.isDrag && this.curContent.progressVideo != 1) {
          var time = localStorage.getItem('videoProgressData')
          var arr = time && JSON.parse(time) || {}
          console.log('this.curContent.progressVideo::', arr[this.blobId], this.curContent.progressVideo, arr[this.blobId])
          if (arr[this.blobId] && this.curContent.progressVideo < arr[this.blobId]) {
            postData.progressVideo = arr[this.blobId]
            // postData.contentId = this.curContent.id
            // postData.courseId = this.curContent.courseId
          }
        }
        //alert(intTime+'----'+this.videoPlayingTime)
        apiCourseStudy.updateStudyVideoTime(postData).then(rs => {
          if (rs.status != 200) {
            console.log('记录播放时间错误');
          } else {
            studyUtil.clearStudyDuration(); //清除本地存储
          }
        })
      }
    },
    audioPlay() {
      this.isAppendTime = true;//开始记录音视频的学习时长
      this.appendStudyTime();//开始追加学习时长
      // let $this=this;
      // if(this.curContent.status<9){
      //   let completeType=this.curriculumData.completeSetup;
      //   //console.log(completeType,'completeType');
      //   if(completeType==0){
      //     //默认5秒后学习完成.
      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
      //   }else{
      //     //先记录进行中的学习内容
      //     this.saveStudyItem();
      //   }
      // }
    },
    audioEnd() {
      this.stopStudyTime();
      if (this.curContent.status < 9) {
        this.finishStudyItem();
      }
    },
    audioPause() {
      this.stopStudyTime();
    },
    audioPlaying(e, second) {
      console.log("=======courseStudy");
      this.isAppendTime = true;//打开追加载学习时长

      let intTime = second;//当前播放时间
      let videDuration = e.duration;//音频总时长，秒
      if (!videDuration) {
        videDuration = this.curContent.duration;
      }
      //判断是否完成
      let completeType = this.curriculumData.completeSetup;
      let completeSecond = this.curriculumData.second;
      if (!completeSecond) {
        completeSecond = 5;//如果没有就采用默认的时间了
      }
      if (completeType > 0 && this.curContent.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
        if (completeType == 1) {
          let finishPercent = this.curriculumData.setupTage;
          let percent = intTime * 100 / videDuration;
          if (percent >= finishPercent) {
            this.finishStudyItem();
          }
        } else {
          if (intTime >= completeSecond) {
            this.finishStudyItem();
          }
        }
      }
      //以下是每隔10秒存储一下进度
      let saveTime = Math.floor(intTime % 10);
      //console.log(intTime,saveTime,'aa',this.curContent.studyItemId)

      if (this.preTime != intTime && saveTime == 0 && this.curContent.studyItemId != '') {

        this.preTime = intTime;
        this.curContent.lastStudyTime = intTime;
        //记录播放时间
        //console.log('记录播放时间:'+intTime);
        let postData = {
          itemId: this.curContent.studyItemId,
          videoTime: intTime,
          id: this.appentId,
          studyId: this.studyId,
          courseId: this.curContent.courseId,
          contentId: this.curContent.id,
          studyInfo: this.courseInfo.name + "-" + this.curContent.contentName,
          duration: 10
        }
        if (!this.curriculumData.isDrag && this.curContent.progressVideo != 1) {
          var time = localStorage.getItem('videoProgressData')
          var arr = time && JSON.parse(time) || {}
          if (arr[this.blobId] && this.curContent.progressVideo < arr[this.blobId]) {
            postData.progressVideo = arr[this.blobId]
            // postData.contentId = this.curContent.id
            // postData.courseId = this.curContent.courseId
          }
        }
        //alert(this.preTime!=intTime +'---'+ saveTime +'---'+ this.curContent.studyItemId)
        apiCourseStudy.updateStudyVideoTime(postData).then(rs => {
          if (rs.status != 200) {
            console.log('记录播放时间错误');
          } else {
            studyUtil.clearStudyDuration(); //清除本地存储
          }
        })
      }
    },
    saveScormStudy() {
      //只记录SCORM课件的学习
      if (this.curContent.contentType != 50) {
        return;
      }
      if (this.curContent.status == 9) {
        //已学习完的，不用再添加
        return;
      }
      let params = {
        studyId: this.studyId,//学习id,
        courseId: this.courseId,//课程id,
        contentId: this.curContent.id,//内容id,
        contentType: this.curContent.contentType,
        contentName: this.curContent.contentName,//内容名称
        progress: 1,
        status: 2,
        contentTotal: this.totalContent
      }
      apiCourseStudy.studyContent(params).then(res => {
        if (res.status == 200) {
          this.curContent.status = 2;//完成
          this.curContent.studyItemId = res.result;//学习记录id
        } else {
          console.log('记录学习失败:' + res.message + '，' + res.error);
        }
      })
    },
    //还需要记录播放时间
    saveStudyInfo() { //记录课件学习信息
      this.tentative = true;
      if (this.curContent.contentType >= 60) {
        //只有在课件页面停留超过5秒才会记录
        return;
      }
      if (this.curContent.status == 9) {
        //已学习完的，不用再添加
        return;
      }
      let params = {
        studyId: this.studyId,//学习id,
        courseId: this.courseId,//课程id,
        contentId: this.curContent.id,//内容id,
        contentType: this.curContent.contentType,
        contentName: this.curContent.contentName,//内容名称
        progress: 100,
        status: 9,
        contentTotal: this.totalContent
      }
      apiCourseStudy.studyContent(params).then(res => {
        if (res.status == 200) {
          this.curContent.status = 9;//完成
          this.curContent.studyItemId = res.result;//学习记录id
        } else {
          console.log('记录学习失败:' + res.message + '，' + res.error);
        }
      })
    },
    statusClass(status) {
      let statusObj = {
        1: 'nostart',
        2: 'studying',
        9: 'finish',
      }
      return statusObj[status]
    },
    showMore() {
      this.articleMore = false;
    },
    goBack() {
      history.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.concern {
  font-size: 24upx;
  border: 1upx solid #387DF7;
  padding: 3upx 20upx;
  border-radius: 30upx;
}

.pinglun {
  /deep/ .comments {
    padding: 0;

    .comments-top {
      display: none;
    }


  }

  /deep/ .interact-fixed {
    .interact-bar {
      padding-right: 40upx;
    }
  }

  /deep/ .interact-bar {
    padding-left: 0 !important;

  }

  /deep/ .field-right {
    width: 0 !important;
  }

  /deep/ .interact-bar-item {
    width: 100% !important;

    .field {
      width: 100% !important;
    }
  }

  // /deep/ .interact-bar{
  // 	// padding-left: 0;
  // }
  // /deep/ .field{
  // 	width: 448upx;
  // }
  // /deep/ .field-right{
  // 	margin-right: 60upx;
  // }
}

body {
  background-color: #fff;
}

.playbox {
  //padding: 10upx;
  background-color: #fff;
}

.contentbox {
  padding: 34upx;
  background-color: #fff;
}

.player-box {
  position: absolute;
  // top: 62px;
  // left: 184px;
  width: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 147px;
  background: #a9abb3;
  opacity: 0.8;
  border-radius: 33px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;

  image {
    width: 40px;
    height: 40px;
    margin: 0px 10px;
  }

  .player-praise {
    margin-top: 5px;
    display: flex;
    // justify-items: center;
    justify-content: center;
  }

  .player-rate {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}

.tabrow {
  display: flex;
  border-bottom: 1px solid rgba(153, 153, 153, 0.14);
  font-size: 28upx;
  position: relative;

  .tabrow-active {
    font-size: 32upx;
    color: #387DF7;
    border-bottom: 4upx solid #007DFF;
  }

  .tabrow-item {
    margin-right: 30upx;
    line-height: 60upx;
    font-weight: 600;

    text {
      padding-bottom: 10upx;
    }
  }

  .player-box-tabrow {
    position: absolute;
    top: -20px;
    right: -15px;
    // left: 184px;
    // width: 200px;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    // height: 147px;
    // background:#a9abb3;
    // opacity: 0.8;
    // border-radius: 33px;
    // text-align: center;
    padding: 20px;
    box-sizing: border-box;

    image {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin-right: 4px;
      // margin: 0px 10px;
    }

    .player-praise {
      margin-top: 5px;
      display: flex;
      // justify-items: center;
      justify-content: center;
    }

    .player-rate {
      margin-top: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
    }
  }
}

.cinfo {
  .cinfo-title {
    min-height: 18upx;
    color: #333333;
    font-size: 32upx;
    padding: 28upx 0upx;
  }

  .cinfo-tag1 {
    font-size: 22upx;
    color: #528CEC;
    background: rgba($color: #387DF7, $alpha: 0.1);
    border-radius: 16upx;
    margin-left: 12upx;
    margin-right: 12upx;
    padding: 2upx 12upx;
  }

  .cinfo-tag2 {
    font-size: 22upx;
    color: #D98135;
    background: rgba($color: #FF7900, $alpha: 0.1);
    border-radius: 16upx;
    margin-right: 12upx;
    padding: 4upx 12upx;
  }

  .desrow {
    display: flex;
    justify-content: space-between;
    padding: 26upx 0upx;

    .desrow-name {
      color: #333333;
      font-size: 28upx;
    }

    .desrow-value {
      color: #666666;
      font-size: 28upx;
    }

    .score {
      color: #FB7303;
      margin-left: 10upx;
      font-weight: 700;
      font-size: 32upx;
    }
  }

  .cinfo-btns {
    display: flex;
    justify-content: center;
    margin-top: 66upx;

    .cinfo-btn {
      flex: 1;
      font-size: 28upx;
      text-align: center;
      color: #999999;
    }
  }
}

.citembox1 {
  display: flex;

  .citembox1-item {
    width: 50%;
  }
}

.citem {
  margin: 10upx;

  .citem-title {
    color: #333333;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
  }

  .citem-body {
    background-color: #F7F8F9;
    border-radius: 4upx;
    color: #333333;
    height: 100upx;
    padding: 20upx 30upx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

  }

}

.scroll-item {
  // margin: 3px;
  margin-right: 20upx;

  .scroll-item-sec {
    height: 20px;
    // padding: 10upx;
    margin-bottom: 30upx;
    margin-right: 20upx;
    // word-wrap: break-word;
    // word-break:break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  .scroll-item-con {
    width: 220rpx;
    display: inline-flex;
    border-radius: 8upx;
    padding: 20upx 30upx;
    min-height: 100upx;
    // line-height: 60rpx;
    background-color: #f4f5f7;

    .scroll-item-name {
      width: 100%;
      height: 76rpx;
      // white-space: pre-wrap;
      word-break: break-all;
      line-height: 40rpx;
      overflow: hidden;
      white-space: pre-wrap;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      font-size: 28upx;
      // margin-bottom: 20upx;
    }

    .scroll-item-type {
      font-size: 26upx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 1;

      .square-border {
        margin-right: 20upx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        padding: 3px 5px;

        .finish {
          padding: 5upx;
        }

        .nostart {
          padding: 5upx;
        }
      }
    }
  }
}

.box-studying {
  //color:#FFB30F;
  color: #387DF7;
  border: 1upx solid rgba(56, 125, 247, 0.14);
}

.box-finish {
  color: #3C7EFF;
}

.box-nostart {
  color: #EE474A;
}

.color-studying {
  // background: #FDF1D7;
  //color: #FFB30F;
  color: #387DF7;
}

.color-finish {
  // background: #f3f9ff;
  color: #666666;
}

.color-nostart {
  // background: #ffe8e7;
  color: #666666;
}

.status-tag {
  height: 40upx;
  width: 44px;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  line-height: 40upx;
  padding: 2upx 10upx;
  border-radius: 14upx;
}

.tag-studying {
  // color: #FFB30F;
  color: #588AFC;
}

.tag-finish {
  // color: #00aaff;
  color: #08A890;
}

.tag-nostart {
  // color: #ff0000;
  color: #787878;
}

.text-ellipsis {
  //display: inline-block;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-controls-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  color: #e5e5e5;
  padding: 0 0.4rem;
  transition: color 0.3s;
  height: 22px;
}

.btn-speed:hover .speed-control {
  // visibility: visible;
}

.speed-control {
  position: absolute;
  top: 180px;
  right: -20px;
  transition: visibility 0.3s;
  transform: translate(-50%, -100%);
}

.speed-control .speed-control-list {
  list-style: none;
  color: #e5e5e5;
  width: 50px;
  font-size: 12px;
  text-align: left;
  padding: 0px 0px 0px 5px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(21, 21, 21, 0.8);
}

.speed-control .speed-control-list .li {
  position: relative;
  display: block;
  height: 25px;
  line-height: 25px;
}

.speed-control .speed-control-list .li:hover {
  color: #fff;
  background: rgba(99, 99, 99, 0.8);
}

.speed-control .speed-control-list .li.current {
  color: var(--primaryColor);
}

.catalog {
  background: #FFFFFF;
  padding: 20upx;

  .catalog-sec {
    display: flex;
    justify-content: space-between;
    // border-bottom: 2upx solid #FAFAFA;
    // padding:20upx;
    line-height: 40upx;

    .catalog-sec-name {
      max-width: 90%;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .catalog-con:last-child {
    border: none;
  }

  .catalog-con {
    display: flex;
    justify-content: space-between;
    padding: 30upx 0upx 30upx 30upx;
    padding-right: 0;

    border-bottom: 1px solid rgba(153, 153, 153, 0.08);

    .square-border {
      display: inline-block;
      border: 1px solid;
      padding: 4upx 6upx;
      font-size: 0.8em;
      margin: 0upx 8upx;
    }

    .catalog-con-name {
      padding-left: 0upx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.dlgscore { //评分的样式
  .dlgscore-top {
    text-align: center;
    padding: 50upx 100upx 0upx 100upx;

    .dlgscore-title {
      text-align: center;
      font-size: 36upx;
    }

    .dlgscore-desc {
      text-align: center;
      color: #999999;
      font-size: 24upx;
      padding-top: 10upx;
    }

    .dlgscore-score {
      padding-top: 40upx;
      display: flex;
      justify-content: center;
    }
  }

  .dlgscore-btns {
    margin-top: 60upx;
    height: 100upx;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(153, 153, 153, 0.14);

    .dlgscore-cancel {
      text-align: center;
      width: 49%;
      border-right: 1px solid rgba(153, 153, 153, 0.14);
      line-height: 100upx;
      color: #666666;
    }

    .dlgscore-submit {
      text-align: center;
      width: 50%;
      line-height: 100upx;
      color: #387DF7;
    }
  }
}

.about-gongsi-info {
  overflow: hidden;
  position: relative;
}

.about-gongsi-info::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 30px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
  bottom: 0;
  left: 0;
}
</style>