<template>
	<div class="pb_content">
		<div class="pb_content_body" style="height: 100%">
			<div class="body_student">
				<div class="student_head">
					<div class="box_course">
						<div class="wheel">
							<img
								:src="
									this.courseDetail.cover != null &&
									this.courseDetail.cover != ''
										? JSON.parse(this.courseDetail.cover).length > 0
											? JSON.parse(this.courseDetail.cover)[0].url
											: mr
										: mr
								"
								alt=""
							/>
						</div>
						<div class="right_box">
							<div class="right_box_title">
								{{ courseDetail.title }}
							</div>
							<div class="people">
								<div class="man">
									<img src="../assets/people.png" alt="" />
								</div>
								<div class="person">
									{{ courseDetail.vcount != null ? courseDetail.vcount : 0 }}人
								</div>
							</div>
							<div class="now_study" @click="dialogVisible = true">
								立即学习
							</div>
						</div>
					</div>
					<div class="choose_who">
						<div
							class="who_choose"
							:class="choose == 0 ? 'choose' : ''"
							@click="choose = 0"
						>
							课程简介
						</div>
						<div
							class="who_choose"
							:class="choose == 1 ? 'choose' : ''"
							@click="choose = 1"
						>
							课程学员
						</div>
					</div>
				</div>
				<div class="student_body" v-if="choose == 0">
					<div class="nav">
						{{
							courseDetail.brief != null ? courseDetail.brief : "暂无课程简介"
						}}
					</div>
				</div>
				<div class="student_body_one" v-else>
					<div class="student" v-if="aStudentName.length > 0">
						<div v-for="(item, index) in aStudentName" :key="index">
							{{ item.name }}
						</div>
					</div>
					<div class="student" v-else>暂无课程学员</div>
				</div>
				<!-- <div
          style="
            text-align: center;
            padding: 30px 0 20px 0;
            box-sizing: border-box;
          "
        >
          此处滚动加载..
        </div> -->
				<el-dialog
					title="阶段选择"
					:visible.sync="dialogVisible"
					:append-to-body="true"
					width="700px"
					:before-close="handleClose"
					class="dialog_change"
				>
					<div style="font-size: 20px">请选择阶段</div>
					<div
						style="
							padding: 20px 30px;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
						"
					>
						<div
							class="blue_box"
							v-for="(item, index) in chapInfo"
							:key="index"
							@click="addUserRate(index)"
						>
							<div>第{{ index + 1 }}阶段</div>
							<div>{{ item.dyName }}</div>
						</div>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				choose: 0,
				dialogVisible: false,
				id: this.$route.query.courseId,
				courseDetail: {},
				aStudentName: [],
				chapInfo: [],
				mr: require("../assets/icon/wheel.png"),
			};
		},
		methods: {
			handleClose(done) {
				done();
			},
			goTo(path) {
				this.$router.push(path);
			},
			addUserRate(i) {
				var suid = this.$store.state.studentInfo.userid;
				if (JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1 && JSON.parse(this.courseDetail.userid) != suid) {
					this.$message.error("你没有该权限");
					return;
				}
				let params = {
					uid: this.$store.state.studentInfo.userid,
					cid: this.id,
				};
				this.ajax
					.get(this.$store.state.api + "addUserR", params)
					.then((res) => {
						console.log(res.data);
						this.updateVc();
						this.goTo("/study?type=" + i + "&courseId=" + this.id);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			updateVc() {
				let params = {
					cid: this.id,
				};
				this.ajax
					.get(this.$store.state.api + "updateVc", params)
					.then((res) => {
						console.log(res.data);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			getCourseDetail() {
				const loading = this.$loading.service({
					background: "rgba(255, 255, 255, 0.7)",
					target: document.querySelector(".student_table"),
				});
				let params = {
					courseId: this.id,
				};
				this.ajax
					.get(this.$store.state.api + "selectCourseDetail", params)
					.then((res) => {
						loading.close();
						// this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
						this.courseDetail = res.data[0][0];
						this.aStudentName = res.data[1];
						this.chapInfo = JSON.parse(this.courseDetail.chapters);
					})
					.catch((err) => {
						loading.close();
						console.error(err);
					});
			},
			// getSName() {
			// 	let params = {
			// 		uid: JSON.stringify(this.courseDetail.course_student),
			// 	};
			// 	this.ajax
			// 		.get(this.$store.state.api + "selectSName", params)
			// 		.then((res) => {
			// 			this.aStudentName = res.data[0];
			// 		})
			// 		.catch((err) => {
			// 			console.error(err);
			// 		});
			// },
		},
		created() {
			this.getCourseDetail();
			document.scrollingElement.scrollTop = 0;
			// this.getSName();
		},
	};
</script>

<style scoped>
	.body_student {
		margin: 0px auto;
		width: 80%;
		height: 100%;
	}
	.student_head {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		height: 30%;
	}
	.wheel {
		width: 210px;
	}
	.man {
		width: 16px;
		height: 16px;
	}
	.wheel > img,
	.man > img {
		width: 100%;
		height: 100%;
	}
	.box_course {
		display: flex;
		padding: 35px 0 0 60px;
	}
	.right_box {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
	}
	.right_box_title {
		font-size: 23px;
	}
	.people {
		display: flex;
		margin-top: 20px;
	}
	.person {
		margin-left: 10px;
		line-height: 18px;
	}
	.now_study {
		width: 150px;
		height: 35px;
		color: #fff;
		background: #0e71e6;
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-size: 13px;
		cursor: pointer;
		margin-top: 60px;
	}
	.choose_who {
		display: flex;
		margin: 30px 0 0 60px;
	}
	.who_choose {
		height: 28px;
		cursor: pointer;
	}
	.choose_who > div:nth-child(2) {
		margin-left: 35px;
	}
	.choose {
		border-bottom: 5px solid #d7d7d7;
	}
	.student_body {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 0 0 20px;
		min-height: 1000px;
	}
	.nav {
		margin: 0 auto;
		width: 80%;
		padding-top: 20px;
		text-indent: 25px;
	}
	.pic {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		height: 100%;
		justify-content: space-evenly;
	}
	.Img {
		/*width: 30%; */
		width: 300px;
		margin: 20px 50px;
		margin: 20px 10px;
		border: 1px solid #dbdbdb;
		border-radius: 5px;
		overflow: hidden;
	}
	.Img > img {
		width: 100%;
		height: 100%;
	}
	.student_body_one {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		height: 100%;
		margin-top: 20px;
		min-height: 1000px;
	}
	.student {
		width: 85%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 auto;
		padding: 20px 0;
	}
	.student > div {
		width: 12%;
		height: 35px;
		background: #e3759a;
		text-align: center;
		border: 1px solid #e3759a;
		border-radius: 5px;
		color: #fff;
		line-height: 35px;
		margin: 10px;
	}
	.dialog_change >>> .el-dialog {
		border-radius: 5px;
	}
	.dialog_change >>> .el-dialog__header {
		background: #537bb8;
	}
	.dialog_change >>> .el-dialog__title {
		color: #fff;
		line-height: 5px;
	}
	.dialog_change >>> .el-dialog__body {
		background: #f5f5f5;
	}
	.blue_box {
		width: 30%;
		height: 100px;
		text-align: center;
		color: #fff;
		background-image: linear-gradient(to right, #35bafd, #0ba2f4);
		border-radius: 7px;
		margin: 10px;
		cursor: pointer;
	}
	.blue_box > div:nth-child(1) {
		font-size: 17px;
		line-height: 65px;
	}
	.blue_box > div:nth-child(2) {
		line-height: 0px;
	}
</style>
