<template>
	<view>
		<!-- 添加帖子按钮 -->
		<add-post-tag></add-post-tag>
		<!-- 标签栏 -->
		<u-tabs :list="list" lineWidth="30" lineColor="#F1992D" :activeStyle="{
		            color: '#F1992D',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabChange" :current="current">
		</u-tabs>
		<!-- 所有帖子 -->
		<view v-if="current == 1">
			<view v-for="(item,index) in allPost" :key="index">
				<!-- 单个帖子 -->
				<view class="one-post" @click="toDetial(item.postId)">
					<view class="icon-with-name">
						<image :src="item.usericon" class="icon" />
						<text class="name">{{item.username}}</text>
						<text class="add-time">{{item.date}}</text>
					</view>
					<view class="content">
						<text class="text-content">{{item.content}}</text>
						<view class="img-conetent">
							<!-- 多张图片 -->
							<view v-if="item.pictureList.length!=1" class="one-img"
								v-for="(img,imgIndex) in item.pictureList">
								<view class="post-pic" @click.stop="showPic(imgIndex,item.pictureList)"
									:style="'background: url('+img+') no-repeat center/cover #eeeeee;'"></view>
							</view>
							<!-- 单张图片 -->
							<view v-if="item.pictureList.length == 1" class="single-pic"
								@click.stop="showPic(0,item.pictureList)"
								:style="'background: url('+item.pictureList[0]+') no-repeat center/cover #eeeeee;'">
							</view>
						</view>
					</view>
					<!-- 点赞和评论 -->
					<view class="like-and-comment">
						<view class="icon-and-num">
							<image class="like-icon"
								:src="item.islike=='1'?'../../static/post/like2.png':'../../static/post/like.png'"
								style="width: 20px;height:20px;float: left;" @click.stop="changeAllPostLike(index)"
								:disabled="btnDisabled" />
							<text style="font-size: 15px;float: left;">{{item.likes}}</text>
							<image class="comment-icon" :src="'../../static/post/comment.png'"
								style="width: 20px;height: 20px;margin-left: 10px;float: left;" />
							<text style="font-size: 15px;float: left; ">{{item.comments}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的帖子 -->
		<view v-if="current == 0">

			<view class="message">
				您一共收到{{messageNum}}条消息~
			</view>

			<!-- 单个帖子 -->
			<view v-for="(item,index) in myPost" :key="index">
				<!-- 单个帖子 -->
				<view class="one-post" @click="toDetial(item.postId)">
					<view class="icon-with-name">
						<image :src="item.usericon" class="icon" />
						<text class="name">{{item.username}}</text>
						<text class="add-time">{{item.date}}</text>
					</view>
					<view class="content">
						<text class="text-content">{{item.content}}</text>
						<view class="img-conetent">
							<!-- 多张图片 -->
							<view v-if="item.pictureList.length!=1" class="one-img"
								v-for="(img,imgIndex) in item.pictureList">
								<view class="post-pic" @click.stop="showPic(imgIndex,item.pictureList)"
									:style="'background: url('+img+') no-repeat center/cover #eeeeee;'"></view>
							</view>
							<!-- 单张图片 -->
							<view v-if="item.pictureList.length == 1" class="single-pic"
								@click.stop="showPic(0,item.pictureList)"
								:style="'background: url('+item.pictureList[0]+') no-repeat center/cover #eeeeee;'">
							</view>
						</view>
					</view>
					<!-- 点赞和评论 -->
					<view class="like-and-comment">
						<view class="icon-and-num">
							<image class="like-icon"
								:src="item.islike=='1'?'../../static/post/like2.png':'../../static/post/like.png'"
								style="width: 20px;height:20px;float: left;" @click.stop="changeMyPostLike(index)"
								:disabled="btnDisabled" />
							<text style="font-size: 15px;float: left;">{{item.likes}}</text>
							<image class="comment-icon" :src="'../../static/post/comment.png'"
								style="width: 20px;height: 20px;margin-left: 10px;float: left;" />
							<text style="font-size: 15px;float: left; ">{{item.comments}}</text>
						</view>
					</view>

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

<script>
	export default {
		//下拉刷新
		onPullDownRefresh() {
			this.getAllPost();
			this.getMyPost();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.getAllPost();
			this.getMyPost();
		},
		onShow() {
			this.getAllPost();
			this.getMyPost();
		},
		data() {
			return {
				btnDisabled: false,
				current: 1,
				show: false,
				value1: "",
				list: [{
					name: '我的帖子'
				}, {
					name: '高校圈',

				}, ],
				allPost: [], //所有帖子数据
				myPost: [], //我的帖子数据
				name: '昵称',
				time: '2023.10.3 11:19',
				textContent: '今日打卡',
				like: 200,
				isLike: 1,
				comment: 120,
				messageNum:6,
				pictureList: [{
					picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
				}, ],
			};
		},
		methods: {
			toDetial(postId) {
				uni.navigateTo({
					url: '/pages/post/post-detail?postId=' + postId
				})
			},
			tabChange(index) {
				this.current = index.index;
				if (index.index == 0) {
					this.getMyPost();
				}
				if (index.index == 1) {
					this.getAllPost();
				}
			},
			//获得所有的帖子信息
			getAllPost() {
				//获得所有帖子
				uniCloud.callFunction({
						name: 'fe-college-postList',
						data: { //向云函数中传入的数据
							uid: getApp().globalData.userId
						},
					})
					.then(res => {
						this.allPost = res.result.data.postList;
						//console.log(res.result.data);
					});
			},
			//获得我的帖子
			getMyPost() {
				uniCloud.callFunction({
						name: 'fe-college-myPostList',
						data: { //向云函数中传入的数据
							userId: getApp().globalData.userId
						},
					})
					.then(res => {
						this.myPost = res.result.data.postList;
						console.log(res.result.data);
					});
			},
			// 图片放大
			showPic(index, list) {

				uni.previewImage({
					current: index,
					urls: list
				});
			},

			//点赞状态改变
			changeAllPostLike(index) {
				if (this.btnDisabled) {
					return
				}
				this.btnDisabled = true
				setTimeout(() => {
					this.btnDisabled = false
				}, 1000)
				//已经点赞
				if (this.allPost[index].islike == 1) {
					//取消点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.allPost[index].postId,
							},
						})
						.then(res => {
							if (res.result.code == 200) {
								this.allPost[index].islike = 0;
								this.allPost[index].likes = res.result.data.newlikes;
							}
						});
				} else {
					//点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.allPost[index].postId,
							},
						})
						.then(res => {
							if (res.result.code == 200) {
								this.allPost[index].islike = 1;
								this.allPost[index].likes = res.result.data.newlikes;
							}
						});
				}
			},
			//点赞状态改变（我的帖子部分）
			changeMyPostLike(index) {
				if (this.btnDisabled) {
					return
				}
				this.btnDisabled = true
				setTimeout(() => {
					this.btnDisabled = false
				}, 1000)
				//已经点赞
				if (this.myPost[index].islike == 1) {
					//取消点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.myPost[index].postId,
							},
						})
						.then(res => {
							if (res.result.code == 200) {
								this.myPost[index].islike = 0;
								this.myPost[index].likes = res.result.data.newlikes;
							}
						});
				} else {
					//点赞
					uniCloud.callFunction({
							name: 'fe-college-likePost',
							data: { //向云函数中传入的数据
								userId: getApp().globalData.userId,
								postId: this.myPost[index].postId,
							},
						})
						.then(res => {
							if (res.result.code == 200) {
								this.myPost[index].islike = 1;
								this.myPost[index].likes = res.result.data.newlikes;
							}
						});
				}
			}
		}
	}
</script>

<style>
	.message {
		/* border: 2px solid #000; */
		width: 60%;
		height: 40px;
		border-radius: 15px;
		margin-top: 15px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: rgb(245 154 35 / 30%);
	}

	.one-post {
		width: 90%;
		background-color: rgb(245 154 35 / 30%);
		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;
	}

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

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

	.text-content {
		float: left;
		margin-top: 5px;
		margin-left: 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: 80px;
		margin-left: 2px;
		margin-top: 2px;
	}

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

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

	.like-and-comment {
		float: left;
		margin-top: 5px;
		margin-left: 10%;
		overflow: auto;
		width: 80%;
	}


	.icon-and-num {
		float: right;
		margin-bottom: 10px;
	}
</style>