<template>
	<!--录播课学习页-->
	<view><watermark></watermark>
		<u-toast ref="messager"></u-toast>
		<page-title :showBack="true">{{courseInfo.name}}</page-title>
     	<view>
			<!--内容播放区-->
            <view style="min-height: 400upx;" >
            	<view v-if="curContent.contentType==10" >
            		<!--视频-->
            		<view style="position: relative;">
            			<video id="myVideo" 
						    @touchend="Double"
							:src="fileBaseUrl+curriculumData.url"
							controls
							:enable-play-gesture="true"
							:initial-time="curContent.lastStudyTime"
							@play="onPlayerPlay"
							@pause="onPlayerPause" 
							@ended="onPlayerEnded"
							@timeupdate="onPlayerPlaying"
							@fullscreenchange="onFullScreen"
							style="width: 100%; object-fit: fill">
            			</video>
						<!--倍速度-->
						<view id="myVideoSpeed" class="player-controls-btn cursor-pointer btn-speed">
						  <view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
						  <view class="speed-control" v-if="speedListShow">
						    <view class="speed-control-list">
								<view class="li"
									v-for="item in speedList"
									:key="item"
									@click="changeSpeed(item)"
									:data-value="item"
									:class="{'current': videoSpeed === Number(item)}">
									{{ item }}x
								</view>
						    </view>
						  </view>
						</view>
						<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 active-color="#f7ba2a" readonly v-model="courseInfo.score" :allow-half="true" ></u-rate> -->
								  <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="fileBaseUrl+curriculumData.url" 
							: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 style="padding: 15px;text-indent:40px;line-height: 28px;position: relative;">
						<u-parse :content="curContent.content"></u-parse>
					</view>
				</view>
				<view v-if="curContent.contentType==52">
					<!--外连接-->
					<view v-if="conLink.url!=''" style="min-height: 400px;position: relative;">
						<web-view :src="conLink.url"></web-view>
					</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>
            <!-- 评分，赞和踩 -->
			<u-popup :show="scoreInfo.dlgShow" mode="top"  @close="closeScore" @open="openScore">
				<view style="text-align: center;padding: 50upx;">
					<view style="text-align: center;">给课程打分</view>
					<view style="padding-top: 100upx;display: flex;justify-content: center;">
						<u-rate  :count="5" :size="25" v-model="scoreInfo.score"></u-rate>
					</view>
					<view  style="padding-top: 100upx;height: 100upx;">
						<u-button type="primary" @click="addScore()" text="提交评分"></u-button>
					</view>
				</view>
			</u-popup>
            <view class="main-footer">
				<view>
					<u-rate v-if="!scoreInfo.has" :count="5" :size="25" active-color="#f7ba2a" v-model="scoreInfo.score" @change="addScore()"></u-rate>
					<u-rate v-else readonly :count="5" :size="25" active-color="#f7ba2a" v-model="scoreInfo.score"></u-rate>
					<!-- <text v-if="!scoreInfo.has" @click="openScore()" class="main-scroe">去评分</text> -->
					<!-- <text v-else style="color: #ffaa00;font-size: 32upx;">{{changeScore(scoreInfo.score)}} 分 </text> -->
					<!-- <u-rate class="star-rate" :disabled="true" activeColor="#FA3534" :allowHalf="true" v-show="isPraise" :count="5" :size="25" v-model="courseInfo.score"></u-rate> -->
				</view>
				<view style="display: flex;justify-content: flex-end;">
					<view @click="praiseContent()">
						<image :src="'/static/images/icon/'+(isPraise? 'praise-active.png':'praise1.png')" style="width:35upx;height: 35upx;margin-right: 5px;"></image> {{courseInfo.praises}}
					</view>
					<view @click="treadContent()">
						<image :src="'/static/images/icon/'+(isTrample? 'trample-active.png':'trample.png')" style="width:35upx;height: 35upx;margin-left: 30upx;margin-right: 5px;"></image> {{ courseInfo.trampleCount }}
					</view>
				</view>
			</view>
        </view>
		<!--内容切换-->
		<view class="main-cata">
			<view class="main-cata-top" >
				<view style="font-size: 17px;">目录
				<!-- <text style="color: #666666;font-size: 22rpx;">（点击查看完整大纲）</text> -->
				</view>
				<!-- <view style="margin-top: 10rpx;" @click="showOrHideCatalog"> -->
					
					<!-- <u-icon v-if="!catalogShow" name="arrow-down" color="#b3b3b3" size="16"></u-icon>
					<u-icon v-if="catalogShow" name="arrow-up" color="#b3b3b3" size="16"></u-icon> -->
				<!-- </view> -->
				<!-- <text style="color: #666;font-size: 22rpx;margin-top: 8rpx;">（点击查看完整大纲）</text> -->
			<!-- 	<view class="course-xiang" @click="showSummarylog">
					课程详情
				</view> -->
				<view style="display: flex;font-size: 28rpx;color: #666666;" @click="showOrHideCatalog">
					<view style="line-height: 46rpx;">
						全部
					</view>
					<u-icon style="" name="arrow-right"></u-icon>
				</view>
				
			</view>
			<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"   @scrolltoupper="scrollLeft" @scrolltolower="scrollRight" @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.cataName,con,conIdx,0)">
								<!---->
								<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'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">
										<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 style="padding:15upx 20upx 10upx 0upx; display: flex;justify-content: space-between;">
					<view>{{curSection.name}}</view> 
					<view>
						<text v-if="curSection.status==0" class="status-tag nostart">未开始</text>
						<text v-if="curSection.status==1" class="status-tag studying">进行中</text> 
						<text v-if="curSection.status==9" class="status-tag finish">已完成</text> 
					</view>
				</view>
				<view :class="statusClass" style="padding:15upx 20upx 10upx 40upx; display: flex;justify-content: space-between;">
					<view>{{curContent.contentName}}</view> 
					<view>
						<text v-if="curContent.status==0" class="status-tag nostart">未开始</text>
						<text v-if="curContent.status==1" class="status-tag studying">进行中</text> 
						<text v-if="curContent.status==9" class="status-tag finish">已完成</text> 
					</view>
				</view> -->
			</view>
		</view>
        <!--评论-->
        <view>
            <comments ref="comments" v-if="courseId && courseId!=''" :objType="1" :objId="courseId"></comments>
        </view>
        <!--底部-->
		<interact-fixed :type="1" :data="courseInfo" :users="teachers" :praises="false" :comments="false" @comment-success="refreshComments" @share-success="shareSuccess"></interact-fixed>
		<u-popup :show="catalogShow" mode="right" @close="closeCatalog" :safeAreaInsetTop="true" :closeable="true">
			<view :style="`width: ${treePopupWidth};padding-top: 20px;`" style="height: 100vh; overflow: auto;">
				<view class="" style="padding: 5px 9px;color:#2d2d2d;font-weight: bold;margin-bottom: 20rpx;">
					目录
				</view>
				<view class="catalog">
					
					<view v-for="(cata,catIdx) in catalogTree" :key="catIdx" style="border-bottom: 1px solid #ebebeb;margin-bottom: 50rpx;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>
								<text v-if="cata.section.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
								<text v-if="cata.section.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text> 
								<text v-if="cata.section.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text> 
							</view>
						</view>
						<view >
							<view v-for="(con,conIdx) in cata.children" :key="conIdx" class="catalog-con" @click="playContent(cata.section,con,conIdx,catIdx)">
								<view class="catalog-con-name" :class="{'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 style="height: 50px;"></view>
			</view>
		</u-popup>
		<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>
	</view>
</template>

<script>
	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 apiResOwner from '@/api/modules/resowner.js'
	import apiPraises from "@/api/modules/praises.js";
	import apiTrample from "@/api/modules/trample.js";
	import {getContentType} from "@/utils/tools.js";
	import studyUtil from '@/utils/study.js';
	import {toScore} from '@/utils/tools.js';
	import { mapGetters } from 'vuex'
	export default {
		components:{},
	    data() {
	        return {
				isPlaying:false,
				onplay:false,
				touchNum : 0,
				playerBoxShow:false,
				toScore:toScore,
				summarylogShow: false,
				scrollItemWidth:this.$width,
				treePopupWidth:'400px',
				fileBaseUrl:this.$config.fileUrl,
				getConType:getContentType,
				courseId:'',//当前课程的id
				studyId: '',//当前学习的id
				initContentId:'',//初始化的内容id
				curSection:{},//当前所在的章
				curContent:{
					studyItemId:'',
					status:1
				},//当前的内容
				conLink:{openType:1,url:''},//外连接内容
				curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
				courseInfo:{id:'',name:''},//课程信息
				totalContent:0,//课程内容数量
		     	authorInfo:{aid:'',name:'',code:'',orgInfo:''},
				teachers:[],
				sectionList:[],
				contentList:[],
				videoScore:3,
				videoPlayer:null,
				videoPlayingTime:0,
				speedListShow:false,
				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
				videoSpeed: 1.0, // 当前倍速:
                tabIndex:0,
				catalogShow:false,//是否显示目录
				scoreInfo:{
				  dlgShow:false,
				  score:5,
				  has:false,
				},
				isPraise:false,
				isTrample:false,
				interactRuning:false,
				scrollInfo:{
					scrollLeft: 0,
					scrollWidth: 0
				},
				handleTimeout:null,
				isAppendTime:true,
				appendStartTime: null, //记录追加的开始时间
				appendHandle:null,
				appentId:'',//当前追加的学习时长的id
				appentInterval:30000,//追加学习时间的间隔 30秒加一次
				preTime:-1
	        }
	    },
		onLoad(options) {
			//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.studyId=options.studyId;
			this.loadDetail();
		},
		onShow(){
			uni.setNavigationBarTitle({ title:'\u200E' })
			//实时渲染当前的播放状态
		},
		onReady() {
			this.videoPlayer=uni.createVideoContext("myVideo", this);
		},
		computed:{
			...mapGetters(['userInfo']),
		  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;
		  },
		},
	    methods: {
			Double(e){
				// this.onPlayerPause()
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum == 1){
						// console.log('单击')
					}else  if(this.touchNum >= 2){
						if(this.isPlaying){
							this.onPlayerPause()
						} else {
							this.onPlayerPlay()
						}
					}
					this.touchNum = 0
				},250)
			
			},
			changeScore(score){
				if(!score){
					return '0.0'
				}
				score=String(score)
				if(score.indexOf('.')!=-1){
					score=score.toFixed(1)
				}else{
					score=score+'.0'
				}
				return score
			},
			scrollLeft(e){
				//console.log(e);
				//this.scrollInfo.scrollLeft = 0
			},
			scrollRight(e){
				//console.log(e);
				//this.scrollLeft=e.detail.scrollLeft;
			},
			scrollHandler(e) {
				//console.log(e);
				this.scrollInfo = e.detail;
			},
			loadDetail(){
				let $this=this;
				uni.showLoading({title:'加载中...'})
				apiCoursePortal.detail(this.courseId).then(rs=>{
				  setTimeout(function(){uni.hideLoading()},1000);
				  if(rs.status==200){
					// uni.setNavigationBarTitle({ title:rs.result.course.name })
				    this.courseInfo=rs.result.course;
				    this.teachers=rs.result.teachers;
					if(rs.result.teachers && rs.result.teachers.length > 0) {
						let userIds = [];
						let ctoUsers = [];
						rs.result.teachers.forEach(item => {
							// item.aid='';
							item.name= '';
							item.orgInfo= '';
							item.avatar= '';
							item.code= '';
							item.sex=null;
							userIds.push(item.teacherId);
							ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
						});
											// this.toUsers = ctoUsers;
						this.loadAuthorInfo(rs.result.teachers, userIds);
					 }
					this.loadUserInfo(this.courseInfo.sysCreateAid);
				    //设置必须的字段
					let showConId=this.initContentId;
				    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;
						}
				      });
				    })
					this.contentList=rs.result.contents;
					this.totalContent=rs.result.contents.length;
					this.sectionList=rs.result.sections;
					//设置正在学习的章节
					if(showConId==''){
						//取第一条为正在学习的
						let treelist=this.catalogTree;
						this.curSection=treelist[0].sec;
						this.curContent=treelist[0].children[0];
						// 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;
							}
						}
						
					}
				    //study info
				    this.loadStudyInfo();
				  }else{
					this.$refs.messager.show({message:rs.message,type:'error'});
				  }
				  
				})
			},
			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.authorInfo = author;
							// item.aid=author;
							item.name= author.name;
							item.orgInfo= 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);
			        }
			      });
			    },
			loadStudyInfo() {
			  //获取学习信息
			  let $this = this;
			  apiCourseStudy.studyInfo(this.courseId).then(res=>{
			   if(res.status == 200) {
			     if(res.result.signup){
			         this.loadScorePraiseAndTrample();
			         this.studyId = res.result.studyId;
			         //对已学习的内容进行比对，重要的字段， 学习内容id，在后缀的
			         this.contentList.forEach(con=>{
			           res.result.contents.forEach((scon,sconIdx)=>{
						   //第一条就是最近学习的
						   if(sconIdx==0 && $this.initContentId==''){
							   //$this.curContent=con;
							   //查询对应的章节
						   }
			               if(scon.contentId==con.id){
							  con.lastStudyTime = scon.lastStudyTime;
							  //以下判断是为了兼容之前的问题，学习状态
							  if(scon.status){
							    con.status = scon.status;
							  }else{
							    con.status = 9;
							  }
			                  con.studyItemId=scon.id;//这个就是学习内容（条目）的id
			               }
			           })
			         });
			       }
			    } else {
				   this.$refs.messager.show({message:res.message,type:'error'});
			    }
			 })
			},
			loadUserInfo(uid){
				apiUser.getByIds([uid]).then(res=>{
				  if(res.status==200){
					this.authorInfo=res.result[0];
				  }
				})
			},
			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.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(e){
				//console.log(e,'e');
				let full=e.detail.fullScreen;
				let divId='videowatermark';
				setTimeout(() => {
					var div = document.getElementById('myVideo')
					var div1 = div.firstChild;
					var speedDiv=div1.querySelector("#myVideoSpeed");
					if(full){
						var div3 = document.createElement("div");
					    div3.id =divId;
					    div3.setAttribute("class", "fullmark");
						div3.innerHTML='';
					    // 从父组件传过来的水印内容
					    //div3.innerText =this.userInfo.name+this.userInfo.code;
						for(var i=0;i<4;i++){
							div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
						}
						
					    div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
					    //console.log(div3,'div3');
						div1.appendChild(div3);
						if(!speedDiv){
							var speedDiv=document.getElementById('myVideoSpeed');
							div1.appendChild(speedDiv)
						}
					}else{
						var markDiv=div1.querySelector("#"+divId);
						//var speedDiv=div1.querySelector("#myVideoSpeed");
						if(markDiv){
							div1.removeChild(markDiv);
						}
						if(speedDiv){
							//div1.removeChild(speedDiv);
						}
					}
				 }, 200);
			},
			onPlayerPlay(){
			 this.isPlaying = true;
			 this.videoPlayingTime=0;
			  // console.log("开始播放");
			  this.playerBoxShow=false;
			  this.isAppendTime=false;
			  this.videoSpeed=studyUtil.getVideoSpeed();
			  this.videoPlayer.playbackRate(this.videoSpeed);
			  this.videoPlayer.play();
			  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();
			    }
			  }
			},
			onPlayerPause(){
			  this.isPlaying = false;
			  this.videoPlayer.pause();
			},
			onPlayerEnded(){
				this.playerBoxShow=true;
			  //console.log("播放结束");
			  //this.isAppendTime=true;//开启追
			  //加学习时间
			  if(this.curContent.status<9){
				  this.finishStudyItem();
			  }
			},
			changeSpeed(e) {
			  // 获取选择的倍速
			  let value = e;
			  this.videoSpeed = Number(value);
			  this.videoPlayer.playbackRate(this.videoSpeed);
			  studyUtil.setVideoSpeed(this.videoSpeed);
			  this.speedListShow=false;
			},
			showSpeedCtrl(){
				if(this.speedListShow){
					this.speedListShow=false;
				}else{
					this.speedListShow=true;
				}
			},
			formatSeconds(a) {
				var hh = parseInt(a/3600);  
				var mm = parseInt((a-hh*3600)/60);  
				if(mm<10) mm = "0" + mm;  
				var ss = parseInt((a-hh*3600)%60);  
				if(ss<10) ss = "0" + ss;  
				if(hh<10) hh = hh == 0?'':`0${hh}:`;  
				var length = hh  + mm + ":" + ss;  
				if(a>=0){  
					return length;  
				}else{  
					return "00:00";  
				}  
			},
			onPlayerPlaying(e){
        console.log("=======在线课");
				//console.log("当前播放11",itme);
				this.isAppendTime=false;//禁止追加学习时间
				//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){
						completeSecond=5;//如果没有就采用默认的时间了
					}
					if(completeType>0 && 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(completeType==2){
							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
					}
					apiCourseStudy.updateStudyVideoTime(postData).then(rs=>{
						if(rs.status!=200){
						 console.log('记录播放时间错误');
						}
					})
				}
			},
			audioPlay(){
				 this.isAppendTime=false;
				 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(){
				if(this.curContent.status<9){
					this.finishStudyItem();
				}
			},
			audioPause(){
			},
			audioPlaying(e,second){
        console.log("=======在线课");
				this.isAppendTime=false;//禁止追加学习时间
				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(completeType==2){
						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
				  }
				  apiCourseStudy.updateStudyVideoTime(postData).then(rs=>{
				     if(rs.status!=200){
				       console.log('记录播放时间错误');
				     }
				  })
				}
			},
			//还需要记录播放时间
			saveStudyInfo() { //记录课件学习信息
			  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,
			     contentName: this.curContent.contentName,//内容名称
			     progress: 100,
			     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);
			      }
			  })
			},
			loadScorePraiseAndTrample(){
			    //加载是否请过分
			    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;
			      }
			    });
			},
			closeScore(){
				this.scoreInfo.dlgShow=false;
			},
			openScore(){
				if(this.scoreInfo.has){
					this.$refs.messager.show({message:'您已评过分',type:'error'});
					return;
				}
				this.scoreInfo.dlgShow=true;
			},
			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;
			          this.$refs.messager.show({message:'评分成功，谢谢您的评分',type:'success'});
			        }else{
			          this.$refs.messager.show({message:'评分分处理失败，请稍后再试',type:'error'});
			        }
			    });
			  }
			},
			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;
				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--;
					  }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++;
					  }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'});
					  }
					})
				}			  
			},
			showOrHideCatalog(){
				this.catalogShow=!this.catalogShow
			},
			showSummarylog() {
				this.summarylogShow=!this.summarylogShow
			},
			closeCatalog(){
				this.catalogShow=false;
			},
			summaryCatalog() {
				this.summarylogShow=false;
			},
			playContent(cata,con,conIndex,catIndex){
				
				if(conIndex && catIndex) {
					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){
								this.$refs.messager.show({message:'请按顺序学习',type:'error'});
								return;
							}
						}
					}
				}
				
				// console.log(con,'con');
				if(this.videoPlayer){
					//console.log('切换视频');
					this.videoPlayer.stop();
				}
				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'});
						  }
						});
					}
				}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;
					}
				} else if(con.contentType==10 || con.contentType==20) {
					if(con.content.startsWith('\{')){
					   this.curriculumData=JSON.parse(con.content);
					}else{
					   this.curriculumData.url=con.content;
					}
				}
				//this.curSection=cata;
				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;
				if(con.contentType>20){
					let $this=this;
					//非视频，音频的5秒后学习完成
					this.handleTimeout = setTimeout(function(){$this.saveStudyInfo();},5000);
				}
				
			},
			openComment(){
				//打开评论窗口，调用组件内事件
				this.$refs.fiexdbar.openInput();
			},
			refreshComments(){
				this.$refs.comments.loadData(false);
			},
			openShare(){
				this.$refs.fiexdbar.addShare();
			},
			shareSuccess(rs){
				this.$refs.messager.show({message:'分享成功',type:'success'});
			},
			openCatalog(){
				this.catalogShow=true;
				//同时暂停视频播放
			},
			closeCatalog(){
				this.catalogShow=false;
				//同时启动视频播放
			},
			statusClass(status){
				let statusObj={
					1:'nostart',
					2:'studying',
					9:'finish',
				}
				return statusObj[status]
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.player-box{
	  position: absolute;
	  // top: 62px;
	  // left: 184px;
	  width: 200px;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  height: 147px;
	  background:#a9abb3;
	  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;
	  }
	}
	
	/deep/ .u-popup__content{
		border-radius: 17px 0 0rpx 17px;
	}
	/deep/ .u-popup__content__close--top-right{
		.u-icon__icon{
			top: 10px !important;
		}
	}
	
	.summary-log{
		padding: 20rpx;
		.particulars{
			font-size: 32upx;
			color: #666666;
			margin-bottom: 20upx;
		}
		
	}
	.star-rate>>>.uicon-star-fill {
		color: rgb(230, 50, 50) !important
	}
	.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);
	}
	.studying{
		//正在学习的字体样式
		// color: #2c7eb6;
		color: #588AFC;
	}
	.scroll-item{
		// height: 125px;
		margin: 3px;
		.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;
			// height: 60rpx;
			// 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;
					}
				}
				>.studying{
					background-color: #FDF1D7;
					color:#FFB30F;
				}
				>.finish{
					background-color: #BED2F8;
					color: #3C7EFF;
				}
				>.nostart{
					background-color: #FFC8C8;
					color:#EE474A;
				}
				.status-tag{
					width: 88upx;
					height: 38upx;
					line-height: 38upx;
				}
			}
		}
		.color-studying{
			// background: #FDF1D7;
			color: #FFB30F;
		}
		.color-finish{
			// background: #f3f9ff;
			color: #666666;
		}
		.color-nostart{
			// background: #ffe8e7;
			color: #666666;
		}
	}
	.main-footer{
		background-color: #FFFFFF;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		.main-scroe{
			display: inline-block;
			background-color: #ecf5ff;
			font-size: 14px;
			padding: 14upx 24upx;
			border: 2rpx solid #409eff;
			color: #409eff;
		}
		.main-praise{
			
		}
		
	}
	.main-cata{
		margin-top: 20upx;
		.main-cata-top{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 10rpx 30rpx;
			// border-bottom: 1px solid #ececec;
			.course-xiang{
				color: #a8a8a8;
				// margin-left: 36%;/
			}
		}
		.main-cata-active{
			background-color: #FFFFFF;
			padding: 0upx 20upx 10upx 20upx;
		}
	}
	.active{
        font-size: 24upx;
		color: #ffaa00;
	}
    .tabbar{
    	height: 50px;
    	line-height: 50px;
    	background-color: #FFFFFF;
    	display: flex;
    	justify-content: space-around;
    	color: #575757;
    	.tabbar-item{
    		text-align: center;
    		line-height: 40px;
    		height: 40px;
    	}
    	.active{
    		border-bottom: 2px solid #00aaff;
    		color: #00aaff;
    	}
    }
	.toptitle{
		display: flex;
		justify-content: space-between;
		line-height: 50upx;
		border-bottom: 1px solid #e8e8e8;
		padding: 5px 10px;
		background-color: #FFFFFF;
		.inner{
			padding: 5px;
		}
	}
    .tags{
    	padding-top: 20upx;
    	.tags-item{
    		display: inline-block;
    		border: 1px solid #007AFF;
    		padding: 8upx 20upx;
    		margin: 6upx;
    		color: #8b8b8b;
    		font-size: 20upx;
    	}
    }
    .text-row{
    	margin-top: 6upx;
    	color: #494949;
    	line-height: 30px;
    	font-size: 26upx;
    	.text-row-label{
    		font-weight: 600;
    	}
    	.text-row-value{
    		color: #007AFF;
    	}
    }
	.video-div{
	  position: absolute;
	  z-index: 999999999;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #bcbcbc;
	}
	.paperinfo{
		padding-top: 10px;
		.paperinfo-title{
			text-align: center;
			font-size: 30upx;
			font-weight: 600;
			padding: 10px;
		}
		.paperinfo-item{
			background-color: #FFFFFF;
		}
	}
    .demand{
        display: flex;
    }
    /deep/.content{
        border-radius: 0px;
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        margin-top: 0px;
        
        .content-tit{
            font-size: 14px;
            margin-left: 10px;
        }
        .tags{
        	.tags-item{
        		display: inline-block;
        		background: #F6FAFD;
                border-radius: 14px;
        		padding: 8upx 20upx;
        		color: #6D99FC;
        		font-size: 20upx;
        	}
        }
        
        .ziy{
            font-size: 12px;
            color: #666666;
            margin-left: 12px;
            margin-top: 3px;
        }
        .learning{
            display: flex;
            justify-content: space-between;
            margin-left: 12px;
            margin-top: 3px;
            padding-bottom: 10px;
            
            .learning-left{
                font-size: 12px;
                color: #666666;
            }
            
            .learning-right{
                display: flex;
                font-size: 16px;
                color: #FFB30F;
                margin-top: -8px;
                
                .right-nav{
                    font-size: 12px;
                    color: #666666;
                    margin-top: 4px;
                }
            }
        }
    }
    .status-tag{
    	height: 40upx;
		width: 44px;
    	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;
	}
    .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{
    		display: flex;
    		justify-content: space-between;
    		padding:10upx;
			padding-right: 0;
			padding-left: 30rpx;
    		line-height: 40upx;
    		.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;
    		}
    	}
    }
</style>
