<template>
	<view class="wrap">
		<view class="banner-wrap bg-wh">
			<image class="pic" :src="form.mall.coverDrawing" mode="widthFix"></image>
		</view>
		
		<view class="detail">
			<ul class="tabs">
				<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li>
			</ul>
			
			<!-- 课程介绍 -->
			<view v-show="!curTab" class="des">
				<mp-html class="des-html" :tag-style="mpStyle" :content="briefIntroduction"/>
			</view>
			
			<!-- 课程目录 -->
			<view v-show="curTab === 1">
				<uni-search-bar class="search" radius="30" placeholder="请输入章节名称" v-model="keyword" clearButton="auto" cancelButton="none" />
				
				<view v-if="chapterList.length" class="chapters">
					<view class="chapter" v-for="(item, i) in chapterList" :key="i">
					    <view class="chapterName">
							{{ item.name }}
							<uni-icons class="arrow" type="bottom" color="#909090"></uni-icons>
						</view>
					    <view class="section" v-if="item.subsectionList.length">
							<view class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }"
							  v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
							  <image v-if="section.fileType === 'pptx'" class="ext" src="https://izhixinyun.com/images/exts/ppt.png" alt="">
							  <image v-else-if="section.fileType === 'mp4'" class="ext" src="https://izhixinyun.com/images/exts/video.png" alt="">
							  <image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext"
								src="https://izhixinyun.com/images/exts/word.png" alt="">
							  <image v-else-if="section.fileType === 'txt'" class="ext" src="https://izhixinyun.com/images/exts/txt.png" alt="">
							  <image v-else-if="section.fileType === 'pdf'" class="ext" src="https://izhixinyun.com/images/exts/pdf.png" alt="">
							  <image v-else class="ext" src="https://izhixinyun.com/images/exts/pic.png" alt="">
							  {{ section.name }}
							</view>
					    </view>
					</view>
				</view>
			</view>
			
			<!-- 练习成绩 -->
			<view v-show="curTab === 2 && practices.length" class="list">
				<view v-for="(item, i) in practices" :key="i" class="item" @click="toPrac(item)">
					<view class="c-name">{{ item.projectName }}</view>
					<view class="line">最高分：{{ item.hightScore }}&emsp;&emsp;练习次数：{{ item.practiceNum }}</view>
					<view class="line">累计练习时长（小时）：{{ item.hightScore }}</view>
					<view class="line">最近练习时间：{{ item.lastTime }}</view>
					<view class="btn">练习情况</view>
				</view>
			</view>
			
			<!-- 考核成绩 -->
			<view v-show="curTab === 3 && ass.length" class="list">
				<view v-for="(item, i) in ass" :key="i" class="item" @click="toDetail(item)">
					<view class="c-name">{{ item.experimentalName }}</view>
					<view class="line">得分：{{ item.score }}&emsp;&emsp;耗时：{{ item.timeSum }}min</view>
					<view class="line">考核开始时间：{{ item.startTime }}</view>
					<view class="line">考核结束时间：{{ item.lastTime }}</view>
					<view class="btn">成绩报告</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryChaptersAndSubsections, curriculumDetail, queryPracticeByStudent, queryAssessmentByStudent } from '@/apis/modules/course.js'
	export default {
		data() {
			return {
				cid: '',
				mallId: '',
				curTab: 1,
				tabs: [
					{
						name: '课程介绍',
						id: 0
					},
					{
						name: '课程目录',
						id: 1
					},
					{
						name: '练习成绩',
						id: 2
					},
					{
						name: '考核成绩',
						id: 3
					}
				],
				searchTimer: null,
				keyword: '',
				chapterList: [],
				briefIntroduction: '',
				
				practices: [],
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				page: 1,
				pageSize: 10,
				
				ass: [],
				reachBottomAss: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				statusAss: 'more', // 上拉加载状态 more|loading|noMore
				pageAss: 1,
				pageSizeAss: 10,
				
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				mpStyle: {
					p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
					span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
				}
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.getChapter()
				}, 500)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.curTab === 2 && this.initPrac()
			this.curTab === 3 && this.initAss()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		// 上拉加载
		onReachBottom() {
			if (this.curTab === 2) {
				// 练习
				if (this.reachBottom >= 0) {
					this.reachBottom = 1
					this.status = 'loading'
					this.getPractices()
				}
			} else if (this.curTab === 3) {
				// 练习
				if (this.reachBottomAss >= 0) {
					this.reachBottomAss = 1
					this.statusAss = 'loading'
					this.getAss()
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.cid = options.cid
			this.mallId = options.mallId
			this.getChapter()
		},
		methods: {
			// 获取章节小节
			async getChapter () {
			    if (this.cid) {
					const res = await queryChaptersAndSubsections(this.cid)
					this.chapterList = res.chapterList
					// if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length && !this.commentId) {
					//   this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1);
					// }
			    }
			},
			// 获取介绍
			async getInfo () {
			  if (this.cid && this.mallId) {
				const { data } = await curriculumDetail(this.cid, this.mallId)
				this.briefIntroduction = data.briefIntroduction
			  }
			},
			// 练习成绩
			async getPractices () {
			    const { page } = await queryPracticeByStudent({
					pageNum: this.page,
					pageSize: this.pageSize,
					mallId: this.mallId,
					curriculumId: this.cid
				})
				this.practices = this.reachBottom > 0 ? [...this.practices, ...page.records] : page.records
				this.page++ // 每次获取了数据后page+1
				const noMore = this.practices.length === page.total // 是否加载完所有数据
				this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
				this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
			},
			// 考核成绩
			async getAss () {
			    const { page } = await queryAssessmentByStudent({
					pageNum: this.pageAss,
					pageSize: this.pageSizeAss,
					mallId: this.mallId,
					curriculumId: this.cid
				})
				this.ass = this.reachBottom > 0 ? [...this.ass, ...page.records] : page.records
				this.pageAss++ // 每次获取了数据后page+1
				const noMore = this.ass.length === page.total // 是否加载完所有数据
				this.statusAss = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
				this.reachBottomAss = noMore ? -1 : 0 // 加载完了则设置为-1
			},
			initPrac() {
				this.page = 1
				this.reachBottom = 0
				this.getPractices()
			},
			initAss() {
				this.pageAss = 1
				this.reachBottomAss = 0
				this.getAss()
			},
			// tab切换
			tabChange(id) {
				this.curTab = id
				!id && !this.briefIntroduction && this.getInfo()
				id === 2 && !this.practices.length && this.initPrac()
				id === 3 && !this.ass.length && this.initAss()
			},
			// 练习跳转
			toPrac(row) {
				this.$util.to(`../practiceDetail/practiceDetail?cid=${this.cid}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`)
			},
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding-bottom: 140rpx;
}
.banner-wrap {
	width: 100%;
	.pic {
		width: 100%;
	}
}
.tabs {
	display: flex;
	justify-content: space-between;
	margin-bottom: 32rpx;
	li {
		position: relative;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
	}
	.active {
		color: #007EFF;
		&:after {
			content: '';
			position: absolute;
			bottom: -12rpx;
			left: 50%;
			width: 116%;
			height: 4rpx;
			margin: 10rpx auto 0;
			background-color: #007EFF;
			transform: translateX(-50%);
		}
	}
}
.detail {
	padding: 34rpx 32rpx;
	background-color: #fff;
	.chapters {
		margin-top: 20rpx;
	}
	.chapter {
		margin-bottom: 40rpx;
		.chapterName {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333;
		}
		.arrow {
			font-size: 28rpx;
		}
		.section {
			margin: 20rpx 0;
		}
		.sectionName {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			font-size: 26rpx;
			color: #333;
		}
		.ext {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}
	.list {
		.item {
			position: relative;
			padding: 20rpx 0;
			border-bottom: 1px solid #e6e6e6;
		}
		.c-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		.line {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: #828282;
		}
		.btn {
			position: absolute;
			bottom: 20rpx;
			right: 0;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #007EFF;
			border-radius: 36rpx;
		}
	}
}
</style>
