<template>
	<!-- 课程详情 -->
	<view class="course_detail">
		<!-- 关卡 -->
		<view class="checkpoint_wrap layer_between">
			<view class="prev_point" v-if="pre!=''" @click="prestep">上一关</view>
			<view class="point_num">第 {{number}} 关</view>

			<view class="prev_point" @click="nextstep" wx:if="next!=''">下一关</view>
		</view>
		<!-- 主题 -->
		<view class="theme_wrap">
			<!-- 标题 -->
			<view class="theme_title layer_star">
				<image src="../../static/theme.png" mode="widthFix"></image>
				<view class="">{{coursedetail.title}}</view>
			</view>
			<!-- 图片 -->
			<view class="theme_pic" @click="enlargeImg()">
				<image :src="coursedetail.image" mode="widthFix"></image>
			</view>
			<!-- 内容 -->
			<view class="theme_content" v-html="coursedetail.content">
				<!-- 基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
				般于须子展新五复通可南成群置接。为技经再议制选时据派断这队片全府好。况感速记中上相组低拉素道北始论与。属书研置约适商才联太的七情力类。
				你理边率他次与关好期起金志单马切红。主严拉青民解格速七取学复才太马。前属口质次意指有研叫后先按此。
				省每前称非美事起也半专我料叫此没。学想象这志究反规空家很便老。位转信由江空能手立和级各素面亲。认安应活按开重细强说标将研力。生机除打万复办开不场始先值标清。 -->
			</view>
			<!-- 图片 -->
			<!-- <view class="theme_pic" @click="enlargeImg()">
				<image src="../../static/theme_01.png" mode="widthFix"></image>
			</view> -->
			<!-- 按钮 -->
			<view class="point_btn" @click="toSubmit()">我要打卡</view>
			<!-- 放大图片 -->
			<!-- <view class="tx_mask" v-if="isShowImg" @click="closeTheme"></view>
			<view class="mask_img" v-if="isShowImg">
				<image :src="img" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- 评论 -->
		<view class="theme_comment">
			<view class="comment_single" v-for="(item,index) in courselist" :key="index">
				<!-- 人员信息 -->
				<view class="single_people layer_between">
					<!-- 左侧 -->
					<view class="people_l layer_nostar">
						<!-- 头像 -->
						<image :src="item.avatar" mode="" @click="toRecord()"></image>
						<view class="">
							<!-- 姓名 -->
							<view class="people_name">{{item.nickname}}</view>
							<!-- 课程进度 -->
							<view class="people_progress">已解锁2课时</view>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="people_r" @click="toSubmit()">修改</view>
				</view>
				<!-- 课程信息 -->
				<view class="single_course">
					<!-- 课程名称 -->
					<view class="layer_star  course_name course_single">
						<image class="course_icon" src="../../static/icon_01.png" mode=""></image>
						<view class="">【深潜挑战】 21天专注力挑战</view>
					</view>
					<view class="layer_star  course_single">
						<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
						<view class="">第2课</view>
					</view>
					<view class="layer_star no_icon_single">
						<view class="">学习时间：2019年12月26日</view>
					</view>
					<view class="layer_star no_icon_single">
						<view class="">感悟：{{item.content}}</view>
					</view>
					<view class="layer_star no_icon_single">
						完成事件打分：
						<view class="score_picker layer_between">{{item.score[0].score}}</view>
						<!-- <picker mode="selector" :range="completeList" @change="changeComplete">
							<view class="score_picker layer_between">
								<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
								<image src="../../static/start_01.png" mode="widthFix"></image>
							</view>
						</picker> -->
					</view>
					<view class="layer_star no_icon_single">
						情绪状态打分：
						<view class="score_picker layer_between">{{item.score[1].score}}</view>
						<!-- <picker mode="selector" :range="completeList" @change="changeComplete">
							<view class="score_picker layer_between">
								<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
								<image src="../../static/start_01.png" mode="widthFix"></image>
							</view>
						</picker> -->
					</view>
					<!-- 评论、点赞按钮 -->
					<view class="layer_noend">
						<view class="course_btn justify_between">
							<image src="../../static/pinglun_icon@2x.png" mode="widthFix"></image>
							评论
						</view>
						<view class="course_btn justify_between" :class="{active:isPoint}" @click="changePoint()">
							<image :src="isPoint?pointImg2:pointImg1" mode="widthFix"></image>
							点赞
						</view>
					</view>
				</view>
				<!-- 评论、点赞信息 -->
				<view class="comment_msg">
					<!-- 点赞人员 -->
					<view class="point_people layer_nostar">
						<image src="../../static/dianzan_icon@2x.png" mode="widthFix"></image>
						<view class="point_detail flex_wrap_no">
							<view class="" v-for="(itemone, index) in item.praise_user" :key="index">{{itemone.nickname }},</view>
						</view>
					</view>
					<!-- 评论信息 -->
					<view class="msg_detail">
						<view class="detail_single ">
							<text>风格林:</text>
							有意义的人，并不就是年岁活得最大的人，而是对生活最有感受的人。
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				isShowImg: false,
				img: '',
				themeImg: require('../../static/banner_img@2x.png'),
				completeList: ['1', '2', '3'],
				complete: '',
				// 点赞
				isPoint: false,
				pointImg1: require("../../static/zan_icon@2x.png"),
				pointImg2: require("../../static/img_03.png"),
				// 点赞人员
				pointList: ['关心', '思想是根基', '陈cc', '莫妮卡', '莫妮卡', '大鹏', '思想是根基', '陈cc', '思想是根基', '陈cc', '莫妮卡'],
				courseid: '',
				coursedetail: '',
				next: '',
				pre: '',
				number: 1,
				//所有用户课程列表
				courselist: [],
				// 自己课程列表
				
			};
		},
		methods: {
			//获取课程详情
			getcoursedetail() {
				let that = this;
				var url = '/api/course/customs_detail';
				var params = {
					course_id: that.courseid,

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.coursedetail = res
					that.getcordlist()
					that.getallcordlist()


				}).catch((err) => {

				})
			},

			// 获取自己打卡记录
			getcordlist() {
				let that = this;
				console.log(77889900)
				var url = '/api/clock/clock_log';
				var params = {
					course_id: that.coursedetail.course_id,
					customs_id: that.coursedetail.id
				}
				app.post(url, params).then((res) => {
					console.log(res);
					 that.courselist = res.list



				}).catch((err) => {

				})
			},
			//获取所有打卡记录
			getallcordlist(){
				let that = this;
				console.log(77889900)
				var url = '/api/course/user_clock_list';
				var params = {
					course_id: that.coursedetail.course_id,
					customs_id: that.coursedetail.id
				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.courselist = that.courselist.concat(res.list)
				
				
				
				}).catch((err) => {
				
				})
			},
			
			// 上一关
			prestep() {
				var that = this;
				that.number++;
				var url = '/api/course/customs_choose';
				var params = {
					//    course_id: that.courseid,
					// customs_id:that.coursedetail.id
					course_id: 1,
					customs_id: 1

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.next = res.next;
					that.per = res.pre
					if (res.next != '') {
						that.coursedetail = res.next;
					} else(
						uni.showToast({
							title: '没有下一关了',
							icon: "none"
						})
					)



				}).catch((err) => {

				})
			},
			// 下一关
			nextstep() {
				var that = this;
				that.number++;
				var url = '/api/course/customs_choose';
				var params = {
					//    course_id: that.courseid,
					// customs_id:that.coursedetail.id
					course_id: 1,
					customs_id: 1

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.next = res.next;
					that.per = res.pre
					if (res.next != '') {
						that.coursedetail = res.next;
					} else(
						uni.showToast({
							title: '没有下一关了',
							icon: "none"
						})
					)



				}).catch((err) => {

				})
			},

			// 去打卡记录页


			toRecord() {
				uni.navigateTo({
					url: "/pages/course/recordClock"
				})
			},
			// 去提交打卡页
			toSubmit() {

				uni.navigateTo({
					url: '/pages/course/submitClock?courseid=' + this.courseid + '&custom_id=' + this.coursedetail.id
				})
			},
			// 完成事件打分
			changeComplete(e) {
				this.complete = e.detail.value;
			},
			// 放大图片
			enlargeImg() {
				this.isShowImg = true;
				this.img = this.themeImg;
			},
			// 关闭弹窗
			closeTheme() {
				this.isShowImg = false;
			},
			// 点赞
			changePoint() {
				this.isPoint = !this.isPoint
			},
		},
		onShow() {},
		onLoad(options) {
			console.log(options)
			this.courseid = options.id;
			this.getcoursedetail()
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fafbfd;
	}

	.course_detail {

		// 关卡
		.checkpoint_wrap {
			background-color: #fff;
			height: 100upx;
			padding: 0 32upx;
			border-bottom: 24upx solid #fafbfd;

			// 上下关卡
			.prev_point {
				width: 112upx;
				height: 48upx;
				border: 1px solid rgba(238, 139, 39, 1);
				border-radius: 8upx;
				text-align: center;
				line-height: 48upx;
				font-size: 24upx;
				color: #ee8b27;
			}

			// 第几关
			.point_num {
				color: #06121e;
				font-size: 28upx;
			}
		}

		// 主题
		.theme_wrap {
			background-color: #fff;
			padding: 50upx 32upx;

			.theme_title {
				color: #595959;
				font-size: 36upx;

				image {
					width: 32upx;
					margin-right: 18upx;
				}
			}

			// 图片
			.theme_pic {
				width: 100%;
				// height: 248upx;
				margin: 34upx 0;
			}

			// 内容
			.theme_content {
				color: #06121e;
				font-size: 24upx;
				text-align: left;
			}

			// 按钮
			.point_btn {
				width: 338upx;
				height: 96upx;
				background: rgba(238, 139, 39, 1);
				box-shadow: 0px 6upx 6upx rgba(238, 139, 39, 0.16);
				border-radius: 48upx;
				text-align: center;
				line-height: 96upx;
				color: #fff;
				font-size: 28upx;
				margin: 0 auto;
			}
		}

		// 课程评论
		.theme_comment {
			padding: 32upx;

			// 单个
			.comment_single {
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.04);
				border-radius: 8upx;
				padding: 56upx 32upx;
				margin-bottom: 32upx;

				// 人员信息
				.single_people {
					border-bottom: 1px solid #707070;
					padding-bottom: 42upx;

					// 左侧
					.people_l {

						// 头像
						image {
							width: 92upx;
							height: 92upx;
							margin-right: 32upx;
						}

						// 姓名
						.people_name {
							color: #06121e;
							font-size: 32upx;
							margin-bottom: 12upx;
						}

						// 课程进度
						.people_progress {
							color: #8c9198;
							font-size: 24upx;
						}
					}

					// 右侧
					.people_r {
						width: 112upx;
						height: 56upx;
						border: 1px solid rgba(238, 139, 39, 1);
						border-radius: 8upx;
						color: #ee8b27;
						font-size: 24upx;
						text-align: center;
						line-height: 56upx;
					}
				}

				// 课程信息
				.single_course {
					padding: 42upx 0;
					font-size: 28upx;
					color: #06121e;

					.course_icon {
						width: 32upx;
						height: 32upx;
					}

					.course_name {
						color: #ee8b27;
					}

					.course_single {
						margin-bottom: 14upx;

						image {
							margin-right: 20upx;
						}

						view {
							width: 432upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					// 无图标
					.no_icon_single {
						padding-left: 52upx;
						font-size: 28upx;
						color: #06121e;
						margin-bottom: 14upx;

						// 选择框
						.score_picker {
							width: 156upx;
							height: 46upx;
							background: rgba(249, 249, 249, 1);
							border-radius: 8upx;
							padding: 0 12upx 0 46upx;
							color: #bdc4ce;
							font-size: 24upx;

							image {
								width: 20upx;
							}
						}
					}

					// 评论、点赞图标
					.course_btn {
						padding: 12upx 28upx;
						border: 2upx solid rgba(140, 145, 152, 1);
						border-radius: 8upx;
						margin-left: 24upx;
						margin-top: 34upx;

						image {
							width: 32upx;
							margin-right: 14upx;
						}
					}

					.active {
						border-color: #FF7441;
						color: #FF7441;
					}
				}

				// 评论信息
				.comment_msg {
					border-top: 1px solid #eee;
					padding-top: 30upx;

					// 点赞人员
					.point_people {
						
						margin-bottom: 28upx;

						image {
							width: 32upx;
							width: 32upx;
							margin-right: 22upx;
							border-radius: 50%;
						}

						.point_detail {
							color: #bdc4ce;
							font-size: 28upx;
							width: 556upx;
						}
					}

					// 评论信息
					.msg_detail {
						color: #5b5e63;
						font-size: 28upx;

						.detail_single {
							margin-bottom: 16upx;

							text {
								color: #ee8b27;
								font-weight: 600;
								margin-right: 10upx;
							}
						}
					}
				}
			}
		}



	}
</style>