<template>

	<view>
		<!-- 页头 -->
		<view class="top">
			<image @click="back" class="back" src="/static/discover/back.png"></image>
			<view class="title">消息列表</view>
			<span class="empty"></span>
		</view>

		<view v-for="(item,index) in messages" :key="index">
			<view class="one-post" @click="toDetial(item.post_id)">
				<view class="icon-with-name">
					<image
						:src="item.user_icon"
						class="icon" />
					<text class="name">{{item.user_name}}</text></br>
					<view v-if="item.types=='评论'" class="message">{{item.content}}</view>
					<image v-if="item.types=='点赞'" class="message" src="/static//post/like2.png" style="width:20px;height:20px;"></image>
				
				</view>
				<image
					:src="item.picture"
					class="post-img" />
				<text class="text-content">{{item.time}}</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return{
				messages: []
			}
			
		},
		
		//下拉刷新
		onPullDownRefresh() {
			this.getAllMessage();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.getAllMessage();
		},
		
		methods: {
			//转到帖子的详情页面
			toDetial(postId) {
				uni.navigateTo({
					url: '/pages/post/post-detail?postId=' + postId
				})
			},
			back(){
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			//获得所有的消息信息
			getAllMessage() {
				uniCloud.callFunction({
						name: 'fe-message-readMessage',
						data: { //向云函数中传入的数据
							userId: getApp().globalData.userId
						},
					})
					.then(res => {
						this.messages = res.result.data.messages;
						console.log(res.result.data.messages);
					});
			},
		}
	}
</script>

<style>
	.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 {
		font-size: 20px;
		margin-top: 15px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.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: 70%;

		margin-left: 10px;
		margin-top: 15px;
		float: left;
		overflow: auto;
	}

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

	.post-img {
		width: 60px;
		height: 60px;
		border-radius: 15%;
		float: right;
		margin-top: 10px;
		margin-right: 10px;
	}

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

	.message {
		float: left;
		font-size: 12px;
		margin-left: 10px;
		width: 70%;
		word-wrap: break-word;
	}

	.text-content {
		float: left;
		margin-top: 5px;
		margin-left: 5%;
		overflow: auto;
		font-size: 12px;
		transform: scale(0.7);
	}
</style>