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

			<view class="prev_point" v-if="next_customs!=''" @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" -->
				<!-- 基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
				般于须子展新五复通可南成群置接。为技经再议制选时据派断这队片全府好。况感速记中上相组低拉素道北始论与。属书研置约适商才联太的七情力类。
				你理边率他次与关好期起金志单马切红。主严拉青民解格速七取学复才太马。前属口质次意指有研叫后先按此。
				省每前称非美事起也半专我料叫此没。学想象这志究反规空家很便老。位转信由江空能手立和级各素面亲。认安应活按开重细强说标将研力。生机除打万复办开不场始先值标清。 -->
				<u-parse :content="customcontent" @preview="preview" @navigate="navigate"></u-parse>

			</view>

			<!-- 按钮 -->
			<view class="point_btn" v-if="coursedetail.is_clock==1">已打卡</view>
			<view class="point_btn" @click="toSubmit()" v-else>{{coursedetail.course_is_clock==1?'已打卡':'我要打卡'}}</view>
		</view>
		<!-- 评论 -->
		<view class="theme_comment">
			<view class="comment_single" v-for="(item,index) in courselist"  :key="index" v-if="item.is_privacy==2||item.user==true">
				<!-- 人员信息 -->
				<view class="single_people layer_between">
					<!-- 左侧 -->
					<view class="people_l layer_nostar">
						<!-- 头像 -->
						<view class="touxiang">
							<image :src="item.user.avatar" mode="" @click="toRecord(item)"></image>
						</view>

						<view class="">
							<!-- 姓名 -->
							<view class="people_name">{{item.user.nickname}}</view>
							<!-- 课程进度 -->
							<view class="people_progress">已解锁{{item.unlock_customs_num}}课时</view>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="people_r" @click="changeclock(item)" :data-item="item" v-if="item.isuser==true">修改</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="">{{item.course_title}}</view>
					</view>
					<view class="layer_star  course_single">
						<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
						<view class="">{{item.customs_title}}</view>
					</view>
					<view class="layer_star no_icon_single">
						<view class="">学习时间：{{item.createtime}}</view>
					</view>
					<view class=" no_icon_single ganwu">
						<view>
							感悟：
						</view>
						<text class="">{{item.content}}</text>
					</view>
					
					<view class=" no_icon_single ganwu" v-if="item.images!=null">
						<view style="width:100rpx;">
							
						</view>
						<view class="imagebox flexone">
							<view class="iamgeitem" v-for="(item,indexk) in item.images" :key="indexk"  :data-url="item" :data-index="index" :data-indexk="indexk" @click="preivewimg">
								<image :src="item"></image>
							</view>
						</view>
					</view>
					
					<view class="layer_star no_icon_single" v-for="(itemsec,index) in item.clock_score" :key="index">
						{{itemsec.title}}：
						<view class="score_picker layer_between">{{itemsec.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" @click="comment(item)" :data-id="item.id">
							<image src="../../static/pinglun_icon@2x.png" mode="widthFix"></image>
							评论
						</view>
						<view class="course_btn justify_between" :class="{active:item.is_praise==1}" @click="changePoint(item,index)"
						 :data-id="item.id" :data-customsid='item.customs_id'>
							<image :src="item.is_praise==1?pointImg2:pointImg1" mode="widthFix"></image>
							<text v-if="item.is_praise==1">已赞</text>
							<text v-else>点赞</text>
						</view>
					</view>
					<!-- 评论、点赞信息 -->
					<view class="comment_msg">
						<!-- 点赞人员 -->
						<view class="point_people layer_nostar">
							<image src="../../static/dianzan_icon@2x.png" mode="widthFix" v-if="item.praise_user.length!=0"></image>
							<view class="point_detail flex_wrap_no">
								<view class="namedianzan" v-for="(itemone, index) in item.praise_user" :key="index">{{itemone.user.nickname}}</view>
							</view>
						</view>
						<view class="seemore" @click="seemore(item.id,index)" :data-id="item.id" v-if="item.is_comment==1">查看所有评论</view>
						<!-- 评论信息 -->
						<view class="msg_detail" v-if="item.showcomment">
							<view class="detail_single " v-for="(itemone,indexk) in commentlist" :key="indexk" @longtap="dele(itemone,indexk)"
							 :data-id="itemone.id">
								<view v-if="itemone.user2" @click="replay(item,itemnone)">						<text>{{itemone.user1.nickname}} <text class="huifu">回复</text> {{itemone.user2.nickname}}</text> {{itemone.content}}

									<view class="flexone">
										<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index" @click.stop="viewimg(itemimg)">
											<image class="add_img" :src="itemimg" mode=""></image>
										</view>
									</view>
								</view>

								<view v-else @click="replay(item,itemone)">
									<text>{{itemone.user1.nickname}}:</text>{{itemone.content}}

									<view class="flexone">
										<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index"  @click.stop="viewimg(itemimg)">
											<image class="add_img" :src="itemimg" mode=""></image>
										</view>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>

			</view>
		</view>
	
	
	<!-- 遮罩层 -->
	<view class="register" v-if="showimg" @click="hideshowimg">
		<view class="viewimg">
			<image :src="imgurl" mode="aspectFit"></image>
		</view>
	</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import app from "../../App.vue";
	export default {
		components: {
			uParse
		},
		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', '莫妮卡'],
				customs_id: '',
				coursedetail: '',
				next: '',
				pre: '',
				number: 1,
				//是否显示评论

				//所有用户课程列表
				courselist: [],
				//评论列表,
				commentlist: [],
				last_customs: '',
				next_customs: '',
				courseid: '',
				page: 1,
				customcontent: '',
				imgurl:'',
				showimg:false



			};
		},
		methods: {
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			
			// 预览图片
			viewimg(item){
				this.imgurl=item;
				this.showimg=true
			},
			hideshowimg(){
				this.showimg=false
			},
			text(details) {

				var texts = ''; //待拼接的内容

				while (details.indexOf('<img') != -1) { //寻找img 循环

					texts += details.substring('0', details.indexOf('<img') + 4); //截取到<img前面的内容

					details = details.substring(details.indexOf('<img') + 4); //<img 后面的内容

					if (details.indexOf('style=') != -1 && details.indexOf('style=') < details.indexOf('>')) {

						texts += details.substring(0, details.indexOf('style="') + 7) + "max-width:100%;height:auto;margin:0 auto;"; //从 <img 后面的内容 截取到style= 加上自己要加的内容

						details = details.substring(details.indexOf('style="') + 7); //style后面的内容拼接

					} else {

						texts += ' style="max-width:100%;height:auto;margin:0 auto;" ';

					}
				}

				texts += details; //最后拼接的内容

				return texts

			},
			//获关卡详情
			getcustomdetail() {
				let that = this;
				var url = '/api/course/customs_detail';
				var params = {
					customs_id: that.customs_id,

				}
				app.post(url, params).then((res) => {
					console.log('8909876654', res);
					that.coursedetail = res.present_customs;
					that.number = res.num;
					that.last_customs = res.last_customs;
					that.next_customs = res.next_customs;
					var text = this.text(res.present_customs.content);
					this.customcontent = text;
					console.log(this.customcontent)
					// that.getcordlist()
					that.page = 1;
					that.courselist = []
					that.getallcordlist()


				}).catch((err) => {

				})
			},

			//获取所有打卡记录
			getallcordlist() {
				let that = this;
				console.log(77889900)
				var url = '/api/course/user_clock_list';
				var params = {

					customs_id: that.coursedetail.id,
					page: that.page

				}
				app.post(url, params).then((res) => {
					console.log(res);
					var userid = uni.getStorageSync("userid");
					console.log('999887', userid)
					for (var obj of res) {
						obj.showcomment = false;
						obj.content=obj.content.split('&hc').join('\n');
						// obj.praise=false;
						if (obj.user_id == userid) {
							obj.isuser = true
						} else {
							obj.isuser = false
						}
					}


					that.courselist = that.courselist.concat(res);


					that.courselist = that.courselist;
					console.log(that.courselist, '90908080')


				}).catch((err) => {

				})
			},
			preivewimg(e){
				let that=this;
				console.log(e)
				let index=e.currentTarget.dataset.index;
				let indexk=e.currentTarget.dataset.indexk;
				console.log(index);
				console.log(indexk)
				
				console.log(that.courselist[index].images)
				uni.previewImage({
				current:that.courselist[index].images[indexk],
				urls: that.courselist[index].images,
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
				})
			},

			// 上一关
			prestep() {
				var that = this;
				
				var url = '/api/course/customs_detail';
				var params = {
					customs_id: that.last_customs.id
				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.last_customs = res.last_customs;
					that.next_customs = res.next_customs;
					that.coursedetail = res.present_customs;
					that.last_customs = res.last_customs;
					that.next_customs = res.next_customs
					that.number = that.number - 1;
					var text = that.text(res.present_customs.content);
					that.customcontent = text;
					console.log(this.customcontent)


					that.courselist = [];
					that.page = 1;
					that.getallcordlist();




				}).catch((err) => {

				})
			},
			// 下一关
			nextstep() {
				var that = this;
				if (that.coursedetail.is_clock == 0) {
					uni.showToast({
						title: '您还没有在这一关打卡，无法解锁下一关',
						icon: "none"
					})
					return false
				}

				if (that.next_customs == '') {

					uni.showToast({
						title: '没有下一关了',
						icon: "none"
					})
					return false
				}
				var url = '/api/course/customs_detail';
				var params = {
					customs_id: that.next_customs.id
				}
				app.post(url, params).then((res) => {
					console.log(res);

					// that.next = res.next;
					// that.per = res.pre

					that.coursedetail = res.present_customs;
					that.last_customs = res.last_customs;
					that.next_customs = res.next_customs
					that.number++;
					var text = that.text(res.present_customs.content);
					that.customcontent = text;
					console.log(this.customcontent)
					that.courselist = [];
					that.page = 1;
					that.getallcordlist()




				}).catch((err) => {

				})
			},

			// 去打卡记录页
			toRecord(item) {
				console.log('888', this.courseid)
				var item = item
				uni.navigateTo({
					url: "/pages/course/recordClock?courseid=" + this.courseid + '&user_id=' + item.user_id + '&customs_id=' + this.customs_id
				})
			},
			// 去提交打卡页
			toSubmit() {
				
				
				if(this.coursedetail.course_is_clock==1){
					wx.showToast({
						title:'您今天已经打过卡了',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url: '/pages/course/submitClock?courseid=' + this.courseid + '&custom_id=' + this.coursedetail.id
					})
				}

				
			},
			// 修改打卡
			changeclock(item) {
				// var item=JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/course/submitClock?clock_log_id=' + item.id + '&change=' + 1 + '&courseid=' + this.courseid +
						'&custom_id=' + this.coursedetail.id + "&changetype=" + 1

				})
			},
			// 完成事件打分
			changeComplete(e) {
				this.complete = e.detail.value;
			},
			// 放大图片
			enlargeImg() {
				this.isShowImg = true;
				this.img = this.themeImg;
			},
			// 关闭弹窗
			closeTheme() {
				this.isShowImg = false;
			},
			// 评论
			comment(item) {
				// console.log(e)
				let clock_log_id = item.id;

				uni.navigateTo({
					url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
						'&commenttype=' + 1
				})
			},

			// 回复评论
			replay(item, itemone) {
				console.log('0000', itemone,this.courseid)
				let clock_log_id = item.id;

				uni.navigateTo({
					url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
						'&commenttype=' + 1 + '&comments_id=' + itemone.id+'&courseid='+this.courseid
				})
			},

			//查看所有评论
			seemore(id, index) {
				let that = this;
				var url = '/api/comments/comments';
				var params = {
					clock_log_id: id,
				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.commentlist = res;
					if (res.length == 0) {
						uni.showToast({
							title: '暂无评论',
							icon: "none"
						})
					} else {
						that.showcomment = true
						that.courselist.forEach(function(value,indexk,array){
							if(index==indexk){
							that.courselist[index].showcomment = !that.courselist[index].showcomment;	
							}else{
								that.courselist[indexk].showcomment=false
							}
						})
						
						that.courselist = that.courselist;
					}



				}).catch((err) => {

				})
			},


			// 长按删除评论
			dele(item, index) {

				let that = this;

				uni.showModal({
					title: '提示',
					content: '删除此条评论',
					success: function(res) {

						if (res.confirm) {

							var url = '/api/comments/del';
							var params = {
								id: item.id
							}
							app.post(url, params).then((res) => {
								console.log(res);
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								setTimeout(function() {
									that.commentlist.splice(index, 1)
									that.commentlist = that.commentlist;
								}, 1500)



							}).catch((err) => {

							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},



			// 点赞
			changePoint(item, index) {
				console.log(item)
				let that = this;
				that.customs_id = item.customs_id;
				var nickname = uni.getStorageSync("nickname");
				console.log(nickname)

				var url = '/api/praise/praise';
				var params = {
					clock_log_id: item.id,

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.courselist[index].is_praise = !that.courselist[index].is_praise

					if (that.courselist[index].is_praise == 1) {
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						})
						var obj = {
							user: {
								nickname: nickname
							}
						}

						that.courselist[index].praise_user.push(obj);
						that.courselist = that.courselist;
						console.log('998877',that.courselist)


						// that.getcustomdetail()


					} else {
						uni.showToast({
							title: '取消点赞成功',
							icon: 'none'
						})
						console.log(that.courselist)

						that.courselist[index].praise_user.forEach(function(value, indexk, array) {
							console.log(that.courselist[index].praise_user[indexk].user.nickname)
							if (that.courselist[index].praise_user[indexk].user.nickname == nickname) {
								
								that.courselist[index].praise_user.splice(indexk, 1)
							}
						})

						that.courselist = that.courselist;
						console.log('998877',that.courselist)


					}



				}).catch((err) => {

				})

			},


		},
		onShow() {
			this.getcustomdetail();

		},
		onLoad(options) {
			console.log(options)
			this.customs_id = options.id;
			this.courseid = options.courseid;


		},
		onReachBottom() {
			var newpage = this.page;
			newpage++;
			this.page = newpage
			this.getallcordlist()
		},
		onShareAppMessage(res) {
				 let that=this;
		   if (res.from === 'button') {// 来自页面内分享按钮
		     console.log(res.target)
		   }
		   return {
		     title: '关卡详情',
		     path:'/pages/course/courseIntro?id='+that.courseid
		   }
		 }
	};
</script>

<style lang="scss">
	page {
		background-color: #fafbfd;
	}
	.imagebox{
		flex-wrap: wrap;
		width:479rpx;
	}
	.iamgeitem{
		width:140rpx;
		height:140rpx;
		font-size: 0;
		margin-right:20rpx;
		margin-bottom:20rpx;
	}
	.ganwu{
		display:flex;
	}

	.addimg {
		width: 100rpx;
		height: 100rpx;
		font-size: 0;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.namedianzan {
		margin-right: 10rpx;
	}

	.layer_noend {
		padding-bottom: 32rpx;
		box-sizing: border-box;
	}

	.touxiang {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		font-size: 0;
		margin-right: 0.32rem;
	}

	.touxiang image {
		border-radius: 50%;
	}

	.seemore {
		color: #ee8b27;
		font-weight: 600;
		font-size: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;

	}

	.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;
				margin-top:30rpx;
			}

			// 按钮
			.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;
				margin-top:46rpx;
			}
		}

		// 课程评论
		.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 0 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 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;
					padding-bottom: 20upx;

					// 点赞人员
					.point_people {

						margin-bottom: 20upx;

						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>