<template>
	<div class="pb_content">
		<div class="pb_content_body">
			<div class="body_student">
				<div class="student_head">
					<div class="box_course">
						<div class="wheel">
							<img
								:src="
									studentMessage.headportrait != null
										? studentMessage.headportrait
										: tx
								"
								alt=""
							/>
						</div>
						<div class="right_box">
							<div class="right_box_title">{{ studentMessage.name }}</div>
							<div class="people">
								<div>
									<span>班级：</span
									><span style="color: #999">{{ studentMessage.cname }}</span>
								</div>
								<div style="margin-left: 50px">
									<span>所属学校：</span
									><span style="color: #999">{{ studentMessage.sname }}</span>
								</div>
							</div>
							<div>
								<span>手机号码：</span
								><span style="color: #999">{{
									studentMessage.phonenumber
								}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="student_body">
					<div style="padding: 20px 30px">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/mine' }"
								>个人中心</el-breadcrumb-item
							>
							<el-breadcrumb-item>我的课程</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div class="project_box">
						<div
							class="three_box_inthis"
							v-for="(item, index) in myCourse"
							:key="index"
						>
							<div
								class="project"
								@click="goTo('/courseDetail?courseId=' + item.courseid)"
							>
								<img
									:src="
										item.cover != null && item.cover != ''
											? JSON.parse(item.cover)[0].url
											: mpj
									"
									alt=""
								/>
							</div>
							<div class="projct_nav">
								<div
									style="font-size: 18px"
									@click="goTo('/courseDetail?courseId=' + item.courseid)"
								>
									{{ item.title }}
								</div>
								<div>
									<span>时间：</span
									><span style="color: #999">{{ item.createTime }}</span>
								</div>
								<div style="color: #999">
									共{{ JSON.parse(item.chapters).length }}讲
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				myCourse: [],
				studentMessage: [],
				tx: require("../assets/tx.png"),
				mpj: require("../assets/project.png"),
			};
		},
		methods: {
			goTo(path) {
				this.$router.push(path);
			},
			selectSDetail() {
				let params = {
					uid: this.$store.state.studentInfo.userid,
				};
				this.ajax
					.get(this.$store.state.api + "selectSDetail", params)
					.then((res) => {
						this.studentMessage = res.data[0][0];
					})
					.catch((err) => {
						this.isLoading = false;
						console.error(err);
					});
			},
			selectMyCourse() {
				let params = {
					uid: this.$store.state.studentInfo.userid,
				};
				this.ajax
					.get(this.$store.state.api + "selectMyCourseBycid", params)
					.then((res) => {
						this.myCourse = res.data[0];
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
		created() {
			this.selectSDetail();
			this.selectMyCourse();
			document.scrollingElement.scrollTop = 0;
		},
	};
</script>

<style scoped>
	.body_student {
		margin: 0px auto;
		width: 80%;
		height: 100%;
	}
	.student_head {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		height: 30%;
	}
	.wheel > img,
	.project > img {
		width: 100%;
		height: 100%;
	}
	.box_course {
		display: flex;
		padding: 35px 0 25px 60px;
		align-items: center;
	}
	.wheel {
		width: 210px;
	}
	.right_box {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
		/* justify-content: space-around; */
	}
	.right_box_title {
		font-size: 23px;
	}
	.people {
		display: flex;
		margin: 30px 0 20px 0px;
	}
	.student_body {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 0 0 20px;
		min-height: 1000px;
	}
	.project {
		width: 165px;
		height: 109px;
		cursor: pointer;
	}
	.project_box {
		/* margin: 0 0 10px 30px; */
	}
	.three_box_inthis {
		display: flex;
		padding: 40px 30px;
		border-bottom: 1px solid #cecece;
	}
	.projct_nav {
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
	}
	.projct_nav > div:nth-child(1) {
		cursor: pointer;
	}
</style>
