<template>
	<!-- 打卡记录 -->
	<view class="record_clock">
		<!-- 打卡人信息 -->
		<view class="record_people layer_nostar">
			<view class="people_l layer_nostar">
				<!-- 头像 -->
				<view class="touxiang">
					<image :src="user.avatar" mode="" @click="toRecord()"></image>
				</view>

				<view class="">
					<!-- 姓名 -->
					<view class="people_name">{{user.nickname}}</view>
					<!-- 课程进度 -->
					<view class="people_progress">已解锁{{unlock_customs_num}}课时</view>
				</view>
			</view>
		</view>
		<!-- 本次打卡记录 -->
		<view class="record_msg">
			<!-- 课程信息 -->
			<view class="record_course" v-for="(item,index) in courselist" :key="index">
				<!-- 右侧 -->
				<!-- <view class="people_r" @click="toSubmit()">修改</view> -->
				<!-- 课程名称 -->
				<view class="layer_star  course_name course_single">
					<image class="course_icon" src="../../static/icon_01.png" mode=""></image>
					<view class="coursetitle">{{item.course_title}}</view>
				</view>
				<view class="layer_star  course_single">
					<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
					<view class="coursetitle">{{item.customs_title}}</view>
				</view>
				<view class="layer_star no_icon_single">
					<view class="">学习时间:{{item.createtime}}</view>
				</view>
				<view class="layer_star no_icon_single">
					<view class="ganwu"><view>感悟：</view><text selectable="true">{{item.content}}</text> </view>
				</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>

				</view>



				<!-- 评论、点赞按钮 -->
				<view class="layer_noend">
					<view class="course_btn justify_between" @click="comment" :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">
						<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="msg_detail" v-if="item.is_comment==1&&item.showcomment==false">
						<view class="detail_single " v-for="(itemone,indexk) in item.comments" :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 class="seemore" @click="seemore(item.id,index)" :data-id="item.id"  v-if="item.is_comment==1&&item.showcomment==false&&item.is_comment2==1">查看所有评论</view>
					<!-- 评论信息 -->
					<view class="msg_detail" v-if="item.showcomment==true">
						<view class="detail_single " v-for="(itemone,indexk) in commentlist" :key="indexk" @longtap="del(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 class="register" v-if="showimg" @click="hideshowimg">
			<view class="viewimg">
				<image :src="imgurl" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				completeList: ['1', '2', '3'],
				complete: '',
				// 点赞
				isPoint: false,
				pointImg1: require("../../static/zan_icon@2x.png"),
				pointImg2: require("../../static/img_03.png"),
				page: 1,
				courseid: '',
				user_id: '',
				courselist: [],
				unlock_customs_num: '',
				user: '',
				customs_id: '',
				commentlist: [],
				imgurl:'',
				showimg:false
			};
		},
		methods: {

			// 获取打卡列表
			getcordlist() {
				let that = this;
				console.log(77889900)
				var url = '/api/course/course_clock_list';
				var params = {
					user_id: that.user_id,
					course_id: that.courseid,
					page: that.page
				}
				app.post(url, params).then((res) => {
					console.log(res);
					// let userid = uni.getStorageSync("userid")
					for (var obj of res.data) {
						obj.showcomment = false;


					}
					that.courselist = that.courselist.concat(res.data);
					that.user = res.user;
					that.unlock_customs_num = res.unlock_customs_num


					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) { },
				})
			},
			
			// 预览图片
			viewimg(item){
				this.imgurl=item;
				this.showimg=true
			},
			hideshowimg(){
				this.showimg=false
			},
			// 评论
			comment(e) {
				console.log(e)
				let clock_log_id = e.currentTarget.dataset.id;

				uni.navigateTo({
					url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + this.customs_id +
						'&commenttype=' + 2 + '&courseid=' + this.courseid + "&user_id=" + this.user_id
				})
			},

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

				uni.navigateTo({
					url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
						'&commenttype=' + 2 + '&comments_id=' + itemone.id + '&courseid=' + this.courseid + "&user_id=" + this.user_id
				})
			},
			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.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;
						console.log(that.courselist)
					}



				}).catch((err) => {

				})
			},




			// 长按删除评论
			del(item, index) {
				let that = this;

				console.log('87665', index)
				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'
								})
								that.commentlist.splice(index, 1)
								that.commentlist = that.commentlist;

							}).catch((err) => {

							})

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


			},

			// 点赞
			changePoint(item, index) {


				let that = this;
				var nickname = uni.getStorageSync("nickname");
				console.log('99887', that.user)
				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;
						// that.getcoursedetail

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

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

						that.courselist = that.courselist;
					}

				}).catch((err) => {

				})

			},

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

		},
		onReachBottom() {
			var newpage = this.page;
			newpage++;
			this.page = newpage
			this.getcordlist()
		},
	};
</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;
	}

	.namedianzan {
		margin-right: 10rpx;
	}

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

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

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

	.coursetitle {
		font-size: 28rpx;
	}

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

	}

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

	.record_clock {

		// 打卡人信息
		.record_people {
			padding: 62upx 32upx;
			height: 254upx;
			background-color: #ee8b27;

			// 左侧
			.people_l {
				color: #fff;

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

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

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

		// 本次打卡记录
		.record_msg {
			padding: 0 32upx;
			position: relative;
			margin-top: -172rpx;

			.record_course {
				position: relative;
				// margin-top: -172upx;
				background-color: #fff;
				box-shadow: 0 0 12upx rgba(0, 0, 0, 0.04);
				border-radius: 8upx;
				padding: 56upx 32upx 0;
				box-sizing: border-box;
				margin-bottom:26rpx;

				// 修改按钮
				.people_r {
					width: 112upx;
					height: 56upx;
					position: absolute;
					top: 56upx;
					right: 32upx;
					border: 1px solid rgba(238, 139, 39, 1);
					border-radius: 8upx;
					color: #ee8b27;
					font-size: 24upx;
					text-align: center;
					line-height: 56upx;
				}

				.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;
					color: #8C9198;
					font-size: 24upx;
					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-bottom: 20rpx;
					// padding-top: 30upx;

					// 点赞人员
					.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>