<template>
	<view>
		<navBar leftText="我的点赞"></navBar>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="list fixed" :style="'top:'+navH+'px;'">
			<view class="item" v-for="(item,index) in myLikeList" :key="index">
				<image class="avatar" :src="item.author.avatar_url" mode="aspectFill"></image>
				<view class="flex1">
					<view class="nickname">{{item.author.nickname}}</view>
					<rich-text class="content" :nodes="item.post_content"></rich-text>
					<view class="timeReplyLikeC flex between">
						<view class="timeReplyC flex">
							<view class="time">{{getLocaleHourMinute(item.like_time)}}</view>
							<!-- <view class="reply">回复</view> -->
						</view>
						<view class="likeC flex" @click="clickLikeComment(item.like_id,index)">
							<image class="icon" src="/static/icon/home/like_s.png" mode="widthFix"></image>
							<!-- <view class="num">85</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { userActivityList, likeEventComment } from '@/request/api';
	import { getLocaleHourMinute } from '@/utils/util';

	export default {
		data() {
			return {
				navH:inject('navHeight'),
				myLikeList:[],
				page:1,
				loadAll:false,
				getLocaleHourMinute:getLocaleHourMinute
			}
		},
		onLoad() {
			this.getMyLikeListData()
		},
		onPullDownRefresh() {
			this.page = 1 
			this.getMyLikeListData()
		},
		onReachBottom() {
			if(!this.loadAll)
			{
				this.page ++ 
				this.getMyLikeListData()
			}
		},
		methods: {
			/**
			 * 点赞评论
			 */
			clickLikeComment(id,index)
			{
				likeEventComment(id).then(res=>{
					uni.showToast({
						title:res.message,
					})
					this.myLikeList.splice(index,1)
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取我的点赞列表数据
			 */
			getMyLikeListData()
			{
				let param = {page:this.page,type:'likes'}
				userActivityList(param).then(res=>{
					if (res.code==200) {
						if(res.data.current_page==1)
						{
							this.myLikeList = res.data.activities
						}else
							this.myLikeList = this.myLikeList.concat(res.data.activities)
							
						if(res.data.current_page==res.data.pages)
						{
							this.loadAll = true
						}
					} else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.list 
{
	background-color: white;
	margin-top: 10rpx;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	.item 
	{
		display: flex;
		padding: 30rpx 25rpx;
		border-bottom: solid 1rpx #E4E4E4;
		.avatar
		{
			margin-right: 23rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.nickname 
		{
			font-size: 28rpx;
			font-weight: bold;
			color: #111;
		}
		.content 
		{
			margin-top: 10rpx;
			line-height: 1.2rem;
			font-size: 24rpx;
			font-weight: 500;
			color: #666;
		}
		.timeReplyLikeC
		{
			.time
			{
				margin-right: 36rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #aaa;
			}
			.reply
			{
				font-size: 26rpx;
				font-weight: 500;
				color: #F97316;
			}
			.likeC 
			{
				padding: 14rpx 0;
				font-size: 28rpx;
				font-weight: bold;
				color: #999;
				.icon 
				{
					margin-right: 12rpx;
					width: 27rpx;
					height: auto;
				}
			}
			.likeC.like
			{
				color: #F97316;
			}
		}
		.totalCommentNumC
		{
			padding: 14rpx 0 22rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #999;
			.line 
			{
				background-color: #aaa;
				margin-right: 18rpx;
				width: 30rpx;
				height: 2rpx;
			}
			.arrow 
			{
				margin-left: 14rpx;
				width: 13rpx;
				height: auto;
			}
		}
	}
}
</style>
