<template>
	<view>
		<view class="title">
			课程简介
		</view>
		<view class="u-content">
			<u-parse :html="courseInfo.intro"></u-parse>
		</view>
		<view class="lecturer">
			<view class="" v-if="courseInfo.isTeachers">
				<view class="" style="font-size: 40rpx;font-weight: bold;margin: 30rpx 0;">
					讲师
				</view>
				<view class="" style="display: flex;">
					<image src="../../static/logo.png" mode=""></image>
					<view style="font-size: 30rpx;font-weight:1000;margin: 19px 24px;">{{ courseInfo.teacher.name }}</view>
				</view>
			</view>
			<view class="" style="margin: 36rpx 0;">
				<view class="" style="font-size: 40rpx;font-weight:1000">
					目录
				</view>
				<view v-for="(item,index) in list">
					<view class="chapter">
						{{item.name}}
					</view>
					<view class="video" v-for="(section,key) in item.section" @click=details(section.id)>
						<view class="video_1" >
							<view class="text" v-text="wareType(section.ware)">
							</view>
							<text class="texts">{{index+1}}-{{key+1}}</text>
							<text class="text2">{{section.name}}</text>
							<text class="text3" v-text="section.isLearned==false?'未开始':'完成'"></text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					course_id:0,
				},
				list:[],
				examId:1,
				courseInfo: {
					intro: '',
					isTeachers: false,
					teacher: {}
				}
			}
		},
		onLoad(a){
			getApp().trackPage('学习课程简介页')
			this.params.course_id=a.course_id
			this.getCapterDetails()
			this.getCourseInfo()
		},
		methods: {
			getCourseInfo() {
				let param = {
					course_id: this.params.course_id
				};
				this.$u.api
				.CourseList(param)
				.then((res) => {
					if (res.code == 200) {
						if (res.data) {
							this.courseInfo.intro = res.data.course.intro;
							this.courseInfo.isTeachers = res.data.course.teachers.length > 0;
							this.courseInfo.teacher = this.courseInfo.isTeachers ? res.data.course.teachers[0] : {};
						}
					}
				})
				.catch((err) => {
					uni.showToast({
						title: err,
						icon: "none",
					});
				});	
			},
			//获取章节详情
			getCapterDetails() {
				console.log('获取章节详情')
				this.$u.api
					.ChapterDetails(this.params)
					.then((res) => {
						if (res.code == 200) {
							if (res.data) {
								
								this.list = this.list.concat(res.data);
								console.log(this.list)
								if (res.data.length < 5) {
									//判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.isLoadMore = true;
									this.loadStatus = "nomore";
								} else {
									this.isLoadMore = false;
								}
							} else {
								this.isLoadMore = true;
								this.loadStatus = "nomore";
							}
						} else {
							//接口请求失败的处理
							uni.showToast({
								title: res.message,
								icon: "none"
							});
							this.isLoadMore = false;
							if (this.params.start > 0) {
								this.page -= 5;
							}
						}
					})
					.catch((err) => {
						uni.showToast({
							title: err,
							icon: "none",
						});
						this.isLoadMore = false;
						if (this.params.start > 0) {
							this.page -= 5;
						}
					});
			},
			//跳转到小节
			details(id){
				console.log(id)
				uni.navigateTo({
					url:"./section?section_id=" + id
				})
			},
			wareType(type){
				let res = "";
				switch (type) {
					case "":
						res = "图文";
						break;
					case "0":
					case "0,1":
					case "0,1,2":
						res = "视频";
						break;
					case "1":
						res = "ppt";
						break;
					case "2":
					case "1,2":
						res = "pdf";
						break;
				}
				return res;
			}
		}
	}
</script>

<style lang="scss">
	.title{
		height: 64rpx;
		font-size: 40rpx;
		font-weight: bold;
		margin: 24rpx 34rpx;
	}
	.lecturer{
		height: 264rpx;
		padding-left: 30rpx;
	}
	image{
		width: 128rpx;
		height: 128rpx;
	}
	.chapter{
		font-size: 37rpx;
		font-weight: 700;
	}
	.video{
		width: 100%;
	}
	.video_1{
		display: flex;
		margin: 20rpx 0;
		position: relative;
		width: 100%;
		.texts{
			border:1px solid #8F8F94;
			text-align: center;
			line-height: 38rpx;
			margin-right: 5rpx;
		}
		.text{
			width: 100rpx;
			height: 38rpx;
			border:1px solid #8F8F94;
			text-align: center;
			line-height: 38rpx;
			margin-right: 82rpx;
			
		}
		.text2{
			width: 397rpx;
			font-size: 33rpx;
			color: #82848A;
			margin-right: 0rpx;
		}
		.text3{
			float: right;
			position: relative;
			right: 0;
		}
	}
	.u-content {
		padding: 0rpx 34rpx;
	}
</style>
