<template>
	<!--新的课程学习页面，没有中间的详细页面了，课程点过来就是这个，用户未报名就直接报名-->
	<view>
		<watermark></watermark>
		<u-toast ref="messager"></u-toast>
		<page-title :showBack="true">{{courseInfo.name}}</page-title>
		<view class="playbox"><!--内容播放区域-->
			 <view style="min-height: 400upx;">
				 内容插入区域
			 </view>
		</view>
		<view class="contentbox">
			<view class="tabrow">
				<view class="tabrow-item"><text class="tabrow-active">简介</text></view>
				<view class="tabrow-item"><text>评论</text></view>
			</view>
			<!--简介内容-->
			<view class="cinfo">
				<view class="cinfo-title">
					{{courseInfo.name}}
					<text class="cinfo-tag1">通用力</text>
					<text class="cinfo-tag2">职场技能</text>
				</view>
				<view class="desrow">
					<view>
						<text class="desrow-name">目标人群：</text><text>所有群体</text>
					</view>
					<view style="color: #999999;;">200+人学习</view>
				</view>
				<view class="desrow">
					<view>
						<text class="desrow-name">讲师：</text><text>李玉冰</text><text>(显示事件)</text>
					</view>
					<view style="color: #387DF7;;">+关注</view>
				</view>
				<view class="desrow">
					<view style="display: flex;">
						<text class="desrow-name">课程评分：</text>
						<u-rate  :count="5" color="#FB7303" :size="16" v-model="scoreInfo.score"></u-rate>
						<text class="score">4.9</text>
					</view>
				</view>
				<view class="desrow">
					<view style="font-size: 32upx;color: #333333;">目录</view>
					<view style="font-size: 28upx;color: #666666;">全部&gt;</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>
				<!--交互-->
				<view class="cinfo-btns">
					<view class="cinfo-btn">
						<view>图标</view>
						<view>评价</view>
					</view>
					<view  class="cinfo-btn">
						<view>图标</view>
						<view>收藏</view>
					</view>
					<view  class="cinfo-btn">
						<view>图标</view>
						<view>转发</view>
					</view>
				</view>
			</view>
			
		</view>
		<!--推荐课程-->
		<view 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>
	</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 {
		data(){
			return{
				courseId:'',//当前课程的id
				studyId: '',//当前学习的id
				initContentId:'',//初始化的内容id
				courseInfo:{id:'',name:''},//课程信息
				teachers:[],//课程老师列表
				recommendCourses:[],//推荐课程列表
				isPlaying:false,
				onplay:false,
				touchNum : 0,
				playerBoxShow:false,
				toScore:toScore,
				summarylogShow: false,
				scrollItemWidth:this.$width,
				treePopupWidth:'400px',
				fileBaseUrl:this.$config.fileUrl,
				getConType:getContentType,
				
				curSection:{},//当前所在的章
				curContent:{
					studyItemId:'',
					status:1
				},//当前的内容
				conLink:{openType:1,url:''},//外连接内容
				curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
				
				totalContent:0,//课程内容数量
				authorInfo:{aid:'',name:'',code:'',orgInfo:''},
				
				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
			}
		},
		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;
			},
		},
		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.courseInfo.id=options.id;
			this.loadDetail();
			this.loadReCourses();
		},
		onShow(){
			uni.setNavigationBarTitle({ title:'\u200E' })
			//实时渲染当前的播放状态
		},
		onReady() {
			this.videoPlayer=uni.createVideoContext("myVideo", this);
		},
		methods:{
			loadDetail(){
				let $this=this;
				uni.showLoading({title:'加载中...'})
				apiCourseStudy.studyIndex(this.courseId).then(rs=>{
					if(rs.status != 200) {
						uni.hideLoading();
						$this.$refs.messager.show({message:rs.message,type:'error'});
						return;
					}
					if(rs.result.contents.length==0){
						$this.$refs.messager.show({message:'课程内容已删除或课程已不再使用',type:'error'});
						return;
					}
					if(!rs.result.course.enabled){
						$this.$refs.messager.show({message:'十分抱歉，此课程已停用，如需使用，请联系管理员。',type:'error'});
						return;
					}
					$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);
					}
					let showConId=this.initContentId;
					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);
						  })
						}
					}
					this.contentList=rs.result.contents;
					this.totalContent=rs.result.contents.length;
					this.sectionList=rs.result.sections;
					//设置正在学习的章节
					if(showConId==''){
						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;
							}
						}
						
					}
					uni.hideLoading();
					
				});
				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==''){
						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;
							}
						}
						
					}
				  }else{
					this.$refs.messager.show({message:rs.message,type:'error'});
				  }
				  
				})
			},
			loadReCourses(){
				let dto={
					sysType1:this.courseInfo.sysType1,
					sysType2:this.courseInfo.sysType2,
					sysType3:this.courseInfo.sysType3
				}
				apiCourseStudy.courseRecommends(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.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);
					}
				});
			},
			loadUserInfo(uid){
				apiUser.getByIds([uid]).then(res=>{
				  if(res.status==200){
					this.authorInfo=res.result[0];
				  }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background-color: #fff;
	}
	.playbox{
		padding: 34upx;
		background-color: #000000;
	}
	.contentbox{
		padding: 34upx;
		background-color: #fff;
	}
	.tabrow{
		display: flex;
		border-bottom:1px solid #999999;
		font-size: 28upx;
		.tabrow-active{
			font-size: 32upx;
			color: #387DF7;
			border-bottom: 4upx solid #007DFF;
		}
		.tabrow-item{
			margin-right: 20upx;
			line-height: 60upx;
			text{
				padding-bottom: 10upx;
			}
		}
	}
	.cinfo{
		.cinfo-title{
			color:#333333;
			font-size: 32upx;
			padding: 28upx 0upx;
		}
		.cinfo-tag1{
			font-size: 22upx;
			color: #6E7B84;
			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: #666666;
				font-size: 28upx;
			}
			.score{
				color:#FB7303;
				margin-left: 10upx;
				font-weight: 700; font-size: 32upx;
			}
		}
		.cinfo-btns{
			display: flex;
			justify-content: center;
			.cinfo-btn{
				margin:30upx 60upx;
			}
		}
	}
</style>