<template>
	<view class="">
		<u-navbar title="评论" :border-bottom="false" :background="bgc" title-color='#333' back-icon-color="#333"
			title-size='36' height='38'></u-navbar>
		<view class="xian"> </view>
		<scroll-view class="listbox" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="list" v-for="(item,index) in zmlist" :key="index" @click="btnitemxq(item)">
				<view class="lt">
					<image @click.stop="btngr(item)" :src="item.avatar" mode="aspectFill"></image>
					<view class="cen">
						<view class="pl">
							<text style="margin-right: 24rpx;color: #333;">{{item.nickName}} 回复了你的评论 </text> 
							<text style="display: block;">@ {{item.bstContent}}</text>
							<text style="font-size: 24rpx;display:block;">{{item.createTime}}</text>
						</view>
					</view>
				</view>
				<view class="rt">
					<image :src="item.bstPicture.split(',')[0]" mode="aspectFill"></image>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;color: #999;margin-top: 20rpx;">
				暂无更多评论信息了...
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				zmlist:[],
				pageNum:1,
				total:0,
				isRefreshing:false
			}
		},
		onLoad() {
			this.getlist()
			this.getqkwd()
		},
		methods: {
			// 清空未读消息
			getqkwd(){
				let data = {
					type:1
				}
				this.$u.post(`/app/message/read`,data).then(res => {})
			},
			// 请求新关注列表
			getlist(){
				this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=1`).then(res => {
					if(res.code == 200){
						if(this.pageNum == 1){
							this.zmlist = res.rows
							this.pageNum++
						}else{
							this.zmlist = this.zmlist.concat(res.rows)
							this.pageNum++
						}
					}
				})
			},
			// 上拉加载更多数据
			handqixing() {
				console.log('底部');
				if(this.zmlist.length < this.total){
					this.getlist()
				}
			},
			// 下拉刷新最新的数据
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.pageNum = 1
					this.isRefreshing = false
					this.getlist()
				}, 300)
			},
			// 点击跳转到别人主页
			btngr(item){
				uni.navigateTo({
					url:'/page_newyemian/gereninfo/tareninfo?id=' + item.userId
				})
			},
			// 点击跳转到回复评论动态详情
			btnitemxq(item){
				uni.navigateTo({
					url:'/page_user/dongtai/dongtaixq?id=' + item.jumpId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		// background-image: url('https://api.ccttiot.com/smartmeter/img/static/uiTBZmxkIcOcXyY8I2fl');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.listbox {
			height: 87vh;
			overflow: scroll;
			padding-bottom: 100rpx;
			box-sizing: border-box;
		}

		.list {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(216, 216, 216, 0.3);

			.lt {
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				box-sizing: border-box;

				image {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					margin-right: 34rpx;
				}

				.cen {
					.top {
						font-weight: 500;
						font-size: 36rpx;
						color: #333;
					}

					.pl {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}

			.rt {
				padding: 22rpx 0;
				box-sizing: border-box;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}
			}
		}

		.xian {
			width: 750rpx;
			height: 0rpx;
			border-top: 1rpx solid rgba(216, 216, 216, 0.3);
			margin-top: 24rpx;
		}
	}
</style>