<template>
	<view style="width: 100%;">
		<!-- 页头 -->
		<view class="top">
			<image @click="back" class="back" :src="'../../static/icon/back.png'"></image>
			<view class="title">帖子详情</view>
			<span class="empty"></span>
		</view>
		<!-- 帖子内容 -->
		<view class="one-post">
			<view class="icon-with-name">
				<image :src="postDetail.ownerIcon" class="icon" />
				<text class="name">{{postDetail.ownerName}}</text><br />
				<text class="add-time">{{postDetail.datetime}}</text>
			</view>
			<view class="content">
				<text class="text-content">{{postDetail.content}}</text>
				<view class="img-conetent">
					<!-- 多张图片 -->
					<view class="one-img" v-for="img in postDetail.pictureList">
						<image :src="img" class="post-pic" @click="showPic(img)"></image>
					</view>

				</view>
			</view>

			<!-- 点赞和评论 -->
			<view class="like-and-comment">
				<!-- 删除键，只有我的帖子可见该组件 -->
				<text class="del" @click="delPost" v-if="userId==postDetail.ownerId">删除</text>
				<view class="icon-and-num">
					<image class="like-icon"
						:src="postDetail.islike==1?'../../static/post/like2.png':'../../static/post/like.png'" :disabled="btnDisabled"
						style="width: 20px;height:20px;float: left;" @click="changeLike" />
					<text style="font-size: 15px;float: left;">{{postDetail.likes}}</text>
					<image class="comment-icon" :src="'../../static/post/comment.png'"
						style="width: 20px;height: 20px;margin-left: 10px;float: left;" @click="addComment()" />
					<text style="font-size: 15px;float: left;">{{postDetail.comments}}</text>
				</view>
			</view>

		</view>

		<!-- 分隔线 -->
		<view class="parting-line"></view>

		<!-- 评论区 -->
		<view class="comment-content">
			<!-- 评论数 -->
			<text class="comment-size">评论 {{postDetail.comments}}</text>
			<!-- 点击进入评论 -->
			<view class="comment">
				<image
					:src="icon"
					class="icon-small" />
				<span @click="addComment" class="comment-buttun"><text
						style="margin-left:8px;margin-top: 5px;float: left">写评论</text></span>
			</view>

			<!-- 评论内容 -->
			<view v-for="(item,index) in postDetail.commentList">
				<view class="one-comment">
					<image :src="item.commenterIcon" class="icon-small" />
					<text class="name-small">{{item.commenterName}}</text><br />
					<text class="comment-text-content">{{item.commentContent}}</text><br />
					<!-- 时间和点赞 -->
					<view class="like-and-time">
						<text class="add-time">{{item.commentDatetime}}</text>
						<view class="icon-and-num">
							<image class="like-icon" :disabled="btnDisabled"
								:src="item.islike==1?'../../static/post/like2.png':'../../static/post/like.png'" 
								style="width: 16px;height:16px;" @click="changeCommentLike(index)" />
							<text style="font-size: 12px;">{{item.commentLikes}}</text>
						</view>
					</view>
					<u-line color="#EDEEF0"></u-line>
				</view>
			</view>
		</view>

		<!-- 弹出的评论框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="评论成功" title="评论" placeholder="请输入内容" :duration="2000"
				:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>


		<!-- 是否删除 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="警告" content="确定删除该帖子吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				btnDisabled: false,
				current: 1,
				show: false,
				value1: "",
				name: '昵称',
				time: '2023.10.3 11:19',
				textContent: '今日打卡',
				postId: "",
				like: 200,
				isLike: 1,
				comment: 120,
				pictureList: [{
						picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
					},
					{
						picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
					},
					{
						picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
					},

				],

				postDetail: [],
				userId:'',
				icon:'',
			};
		},

		methods: {

			onLoad(e) {
				//this.from=e.from;
				this.postId = e.postId;
				this.userId=getApp().globalData.userId;
				this.icon=getApp().globalData.icon;
				this.getData();
			},
			getData() {
				uniCloud.callFunction({
						name: 'fe-college-postDetail',
						data: { //向云函数中传入的数据
							userId: getApp().globalData.userId,
							postId: this.postId
						},
					})
					.then(res => {
						this.postDetail = res.result.data;
						console.log(res.result.data);
					});
			},
			//删除确认弹窗
			delPost() {
				this.$refs.alertDialog.open();
			},
			//删除帖子
			dialogConfirm() {
				uniCloud.callFunction({
						name: 'fe-college-deletePost',
						data: { //向云函数中传入的数据
							postId: this.postId
						},
					})
					.then(res => {
						if (res.result.code == 200) {
							uni.showToast({
								title: '删除成功',
								duration: 500,
								success: () => {
									setTimeout(() => {
										uni.navigateBack()
									}, 500)
								}
							})

						}
					});
				this.$refs.alertDialog.close();
			},

			dialogClose() {
				console.log('点击关闭')
				this.$refsalertDialog.close();
			},

			//发布评论
			confirm(value) {
				// 输入框的值
				console.log(value)
				if(value==''){
					uni.showToast({
						title: '空内容不能发布呦',
						duration: 1000,
						icon: 'error'
					})
				}
				else{
					uniCloud.callFunction({
						name: 'fe-college-commentPost',
						data: { //向云函数中传入的数据
							userId: getApp().globalData.userId,
							postId: this.postId,
							content: value
						},
					})
					.then(res => {
						// this.postDetail = res.result.data;
						this.getData();
						console.log(res.result.data);
					});
					this.$refs.popup.close();
				}
				
				
			},
			//评论窗口
			addComment() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			//返回键
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			// 图片放大
			showPic(imgUrl) {
				let arr = [];
				arr.push(imgUrl)
				console.log(arr, '图片的地址')
				uni.previewImage({
					current: 0,
					urls: arr
				});
			},
			//点赞状态改变
			changeLike() {
				if (this.isLike == 1) {
					this.isLike = 0;
				} else {
					this.isLike = 1;
				}
			},

			//点赞状态改变
			changeLike() {
				if (this.btnDisabled) {
					return
				}
				this.btnDisabled = true
				setTimeout(() => {
					this.btnDisabled = false
				}, 1000)
				//已经点赞
				if (this.postDetail.islike == 1) {
					//	console.log(this.allPost[index].postId);
					//取消点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.postId,
							},
						})
						.then(res => {
							// this.allPost=res.result.data.postList;
							if (res.result.code == 200) {
								this.postDetail.islike = 0;
								this.postDetail.likes = res.result.data.newlikes;

							}
							// console.log(res.result);
						});

				} else {
					//点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.postId,
							},
						})
						.then(res => {
							// this.allPost=res.result.data.postList;
							if (res.result.code == 200) {
								this.postDetail.islike = 1;
								this.postDetail.likes = res.result.data.newlikes;
							}
							// console.log(res.result);
						});
				}


			},

			//改变评论的点赞状态
			changeCommentLike(index) {
				if (this.btnDisabled) {
					return
				}
				this.btnDisabled = true
				setTimeout(() => {
					this.btnDisabled = false
				}, 1000)
				//已经点赞
				if (this.postDetail.commentList[index].islike == 1) {
					//	console.log(this.allPost[index].postId);
					//取消点赞
					uniCloud.callFunction({
							name: 'fe-college-likeComment',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								commentId: this.postDetail.commentList[index].commentId
							},
						})
						.then(res => {
							// this.allPost=res.result.data.postList;
							if (res.result.code == 200) {
								this.postDetail.commentList[index].islike = 0;
								console.log(res.result);
								this.postDetail.commentList[index].commentLikes = res.result.data.newlikes;

							}
							console.log(res.result);
						});

				} else {
					//点赞
					uniCloud.callFunction({
							name: 'fe-college-likeComment',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								commentId: this.postDetail.commentList[index].commentId
							},
						})
						.then(res => {
							// this.allPost=res.result.data.postList;
							if (res.result.code == 200) {
								this.postDetail.commentList[index].islike = 1;
								this.postDetail.commentList[index].commentLikes = res.result.data.newlikes;
							}
							// console.log(res.result);
						});
				}

			}


		}
	}
</script>

<style>
	.one-comment {
		width: 100%;
		float: left;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		overflow: auto;
	}

	.del {
		float: left;
		font-size: 15px;
		color: lightskyblue;
	}

	.comment-buttun {
		background-color: #EDEEF0;
		float: left;
		margin-left: 10px;
		width: 80%;
		height: 25px;
		border-radius: 15px;
		font-size: 12px;

	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		margin-top: 15px;
		display: inline-block;
	}

	.one-post {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 15px;
		overflow: auto;
	}

	.icon-with-name {
		width: 80%;
		height: 40px;
		margin-left: 10px;
		margin-top: 15px;
		float: left;
		overflow: auto;

	}

	.icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		float: left;

	}

	.icon-small {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		float: left;
		margin-left: 10px;
	}



	.name {
		float: left;
		margin-bottom: auto;
		margin-left: 10px;
		margin-top: 5px;
		font-size: 12px;
		font-weight: bold;
		width: 60%;
	}

	.name-small {
		float: left;
		margin-bottom: auto;
		margin-left: 5px;
		margin-top: 8px;
		font-size: 12px;
		font-weight: bold;

	}

	.add-time {
		float: left;
		font-size: 12px;
		transform: scale(0.7);
	}

	.text-content {
		float: left;
		margin-top: 20px;
		margin-left: 10%;
		overflow: auto;
		width: 80%;
		word-wrap: break-word;
		font-size: 12px;
	}

	.comment-text-content {
		float: left;
		margin-top: 5px;
		margin-left: 10%;
		margin-right: 10%;
		overflow: auto;
		width: 80%;
		word-wrap: break-word;
		font-size: 12px;

	}


	.img-conetent {
		margin-top: 5px;
		margin-left: 10%;
		overflow: auto;
		width: 80%;
		float: left;
	}

	.one-img {
		float: left;
		width: 32%;
		height: 90px;
		margin-left: 2px;
		margin-top: 2px;
	}

	.single-pic {
		width: 100%;
		border-radius: 5px;
		height: 200px;
	}

	.post-pic {
		float: left;
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.like-and-comment {
		float: left;
		margin-top: 10px;
		margin-left: 10%;
		height: 25px;
		width: 80%;
	}

	.like-and-time {
		float: left;
		margin-top: 10px;
		margin-left: 5%;
		height: 25px;
		width: 90%;
	}


	.icon-and-num {
		float: right;
		margin-bottom: 10px;
	}

	.parting-line {
		width: 100%;
		margin-top: 10px;
		background-color: #EDEEF0;
		height: 10px;
	}

	.comment-size {
		margin-left: 10px;
		float: left;
		margin-top: 10px;
		font-size: 13px;
	}

	.comment {
		width: 100%;
		height: 25px;
		float: left;
		margin-top: 10px;
	}
</style>