<template>
  <view class="person_center_box">
	<view class="person_center_top">
		<view class="return_box">
			<image 
				class="return_image" 
				src="../../../../static/homepages/community/personal_center/pictures/left_arrow.png" 
				mode="widthFix"
			></image>
		</view>
	</view>
	<view class="person_center_body">
		<view class="info_box">
			<view class="height_box">
				<view class="height_data">{{height}}cm</view>
				<view class="height_words">身高</view>
			</view>
			<image class="avatar_box" src="" mode="widthFix"></image>
			<view class="weight_box">
				<view class="weight_data">{{weight}}kg</view>
				<view class="weight_words">体重</view>
			</view>
			<view class="name_box">{{name}}</view>
			<view class="tip_box">{{tip}}</view>
		</view>
		<view class="btns_box">
			<button class="changeInfoBtn">个人中心修改信息</button>
			<button class="addPostBtn" @click="toAddPostPage">去发布帖子</button>
		</view>
		<view class="posts_box">
			<view class="post_nav_box">
				<view class="toMypost_box post_nav">
					<view class="toMypost" @click="myPostClick">我的帖子</view>
					<view class="bottom_line" v-if="isMyPost"></view>
				</view>
				<view class="toLikepost_box post_nav">
					<view class="toLikepost" @click="likePostClick">我的点赞</view>
					<view class="bottom_line" v-if="!isMyPost"></view>
				</view>
			</view>
			<view class="posts">
				<view class="post_box" v-for="(item, index) in posts" :key="index">
					<view class="post_top_box">
						<view class="post_avatar_box">
							<image class="post_avatar" :src=item.avatar mode="widthFix"></image>
						</view>
						<view class="post_info">
							<view class="post_name">{{item.name}}</view>
							<view class="post_date">{{item.date}}</view>
						</view>
					</view>
					<view class="post_word_box">{{item.word}}</view>
					<view class="post_images_box">
						<community_image_box class="post_images" :imgList='item.imgList' :num='item.imgList.length'></community_image_box>
					</view>
					<view class="post_bottom_box">
						<view class="comments_box">
							<image class="chat_icon" src="../../../../static/homepages/community/community/pictures/chat_icon.png" mode="widthFix"></image>
							<view class="comments_num">{{item.comments_num}}</view>
						</view>
						<view class="like_box">
							<image
								class="love_icon"
								:src=getLikeImage(index)
								mode="widthFix"
								@click="likeClick(index)"
							></image>					
							<view class="like_num">{{item.like_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
export default {
	components: {community_image_box},
	data() {
		return {
			name:'puppy',
			height:187,
			weight:71,
			tip:'这是一条个性签名',
			isMyPost:true,
			likePosts:[
				{
					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
					name:'cat',
					date:'2024年9月31日',
					word:'这是我喜欢的帖子',
					imgList:[
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
					],
					comments_num:1,
					like_num:100,
					islike:false,
				},
			],
			myPosts:[
				{
					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
					name:'cat',
					date:'2024年9月31日',
					word:'今天去海边锻炼看见的，真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
					imgList:[
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
					],
					comments_num:1,
					like_num:100,
					islike:false,
				},
				{
					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
					name:'puppy',
					date:'2024年11月13日',
					word:'今天去海边锻炼看见的，真是太美了',
					imgList:[
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
					],
					comments_num:12,
					like_num:17,
					islike:false,
				},
				{
					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
					name:'cat',
					date:'2024年10月13日',
					word:'今天去海边锻炼看见的',
					imgList:[
						'../../../../static/homepages/community/community/pictures/dog_image.png',
						'../../../../static/homepages/community/community/pictures/dog_image.png',
					],
					comments_num:10,
					like_num:100,
					islike:false,
				},
				{
					avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
					name:'cat',
					date:'2024年1月13日',
					word:'今天去锻炼',
					imgList:[
						'../../../../static/homepages/community/community/pictures/dog_image.png',
					],
					comments_num:10,
					like_num:100,
					islike:false,
				},
			],
			posts:[],
		};
	},
	mounted(){
		this.getAllPost()
		this.posts = this.myPosts
	},
	computed:{
		likeImages() {
		    return this.posts.map((post, index) => ({
		        index,
		        image: post.islike ? '../../../../static/homepages/community/community/pictures/red_love_image.png' : '../../../../static/homepages/community/community/pictures/love_image.png'
		    }));
		}
	},
	methods:{
		myPostClick(){
			this.isMyPost = true
			this.posts = this.myPosts
		},
		likePostClick(){
			this.isMyPost = false
			this.posts = this.likePosts
		},
		getLikeImage(index) {
				  //TODO:获取点赞的图片
			const item = this.likeImages.find(item => item.index === index);
			return item ? item.image : '';
		},
		getAllPost(){
			//TODO:获取所有的帖子
			const app = getApp()
			uni.request({
			url:app.globalData.fit_journey_community_address + '/post/getAll',
			method:"GET",
			success:(res) => {
				console.log('getAllPost')
				console.log(res)
			},
			fail: (err) => {
				console.log('getAllPost fail')
				console.log(err.log)
			},
			})
		},
		likeClick(index){
			//TODO:点赞
			if (this.posts[index].islike){
			  this.posts[index].islike = false
			  this.posts[index].like_num--
			}
			else{
				this.posts[index].islike = true
				this.posts[index].like_num++
			}
		},
		toAddPostPage(){
			uni.navigateTo({
				url:'/pages/homepages/community/add_post/add_post'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../../../static/homepages/community/personal_center/scss/personal_center.scss"
</style>
