<template>
	<view class="page">
		<u-navbar title="评论和赞" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="tabs-wrap">
			<u-tabs :list="tabs" :current="current" @change="onTabChange" :active-color="'#3D3D3D'" :line-color="'#20C6B5'" :inactive-color="'#808080'" :item-style="{height: '88rpx'}" :is-scroll="false"></u-tabs>
		</view>
		<swiper class="swiper" :current="current" @change="onSwiperChange" :duration="200" :circular="false">
			<swiper-item>
				<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
					<view class="cell" v-for="(item,index) in commentList" :key="index" @click="btnplxq(item)">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="content">
							<view class="row1">
								<view class="" style="display: flex;align-items: center;justify-content: space-between;padding-right: 40rpx;">
									<text class="name">{{ item.nickName }}</text>
									<text class="time">{{ item.createTime }}</text>
								</view>
								<text class="tip">回复了我 {{item.bstContent}}</text>
							</view>
							<view class="row2">{{ item.content }}</view>
							<view class="row3">{{ item.bstName }}</view>
						</view>
						<image class="thumb" :src="item.bstPicture" mode="aspectFill"></image>
					</view>
					<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
						暂时没有更多消息咯
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
					<view class="cell" v-for="(item,index) in likeList" :key="index" @click="btnzanxq(item)">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="content">
							<view class="row1">
								<view class="" style="display: flex;align-items: center;justify-content: space-between;padding-right: 40rpx;">
									<text class="name">{{ item.nickName }}</text>
									<text class="time">{{ item.createTime }}</text>
								</view>
								<text class="tip">回复了我 {{item.bstContent}}</text>
							</view>
							<view class="row3">{{ item.bstName }}</view>
						</view>
						<image class="thumb" :src="item.bstPicture" mode="aspectFill"></image>
					</view>
					<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
						暂时没有更多消息咯
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				current: 0,
				tabs: [
					{ name: '我收到的评论' },
					{ name: '我收到的赞' }
				],
				commentList: [],
				likeList: [],
				isRefreshing:false,
				pageNum:1
			}
		},
		onLoad() {
            this.getpllist()
			this.getyidu()
		},
		methods: {
			// 点击评论跳转动态详情
			btnplxq(item){
				if(item.jumpType == 1){
					uni.navigateTo({
						url:'/page_fenbao/guangchang/dongtaixq?id=' + item.jumpId
					})
				}
			},
			// 点击赞的通知跳转到动态详情
			btnzanxq(item){
				if(item.jumpType == 1){
					uni.navigateTo({
						url:'/page_fenbao/guangchang/dongtaixq?id=' + item.jumpId
					})
				}
			},
			// 一进入已读所有消息
			getyidu(){
				this.$u.put(`/app/message/read?ids=`).then(res =>{})
			},
			// 获取收到评论列表
			getpllist(){
				this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=1`).then(res =>{
					if(res.code == 200){
						console.log(this.pageNum);
						if(this.pageNum == 1){
							this.pageNum++
							this.commentList = res.rows
						}else{
							this.pageNum++
							this.commentList = this.commentList.concat(res.rows) 
						}
					}
				})
			},
			// 获取收到赞列表
			getzanlist(){
				this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=2`).then(res =>{
					if(res.code == 200){
						if(this.pageNum == 1){
							this.pageNum++
							this.likeList = res.rows
						}else{
							this.pageNum++
							this.likeList = this.likeList.concat(res.rows) 
						}
					}
				})
			},
			// 上拉加载更多
			handqixing() {
				this.pageNum = 1
				if(this.current == 0){
					this.getpllist()
				}else{
					this.getzanlist()
				}
				console.log('加载更多')
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				setTimeout(() => {
					if(this.current == 0){
						this.getpllist()
					}else{
						this.getzanlist()
					}
					this.isRefreshing = false
				}, 100)
			},
			// 切换tab选项
			onTabChange(index) {
				this.current = index;
				// this.pageNum = 1
				// if(this.current == 0){
				// 	this.getpllist()
				// }else{
				// 	this.getzanlist()
				// }
			},
			// 切换tab选项
			onSwiperChange(e) {
				this.current = e.detail.current;
				this.pageNum = 1
				if(this.current == 0){
					this.getpllist()
				}else{
					this.getzanlist()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
    ::v-deep .u-tab-bar{
		background-color: #1EC28B !important;
	}
	::v-deep .u-tabs__wrapper__scroll-view__nav{
		justify-content: center !important;
	}
	::v-deep .u-tabs__wrapper{
		display: flex;
		justify-content: center;
	}
	.tabs-wrap {
		padding: 0 30rpx;
		background: #fff;
	}
	.swiper {
		height: 84vh;
	}
	.list {
		// padding: 20rpx 30rpx 40rpx;
		box-sizing: border-box;
		height: 84vh;
		overflow: scroll;
	}
	.cell {
		width: 680rpx;
		margin: auto;
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: 1px solid #F2F3F5;
	}
	.avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.thumb {
		width: 96rpx;
		height: 96rpx;
		border-radius: 8rpx;
		margin-left: auto;
	}
	.content {
		flex: 1;
		min-width: 0;
	}
	.row1 {
		color: #5F6368;
		font-size: 24rpx;
	}
	.name {
		color: #333;
		font-weight: 600;
		margin-right: 10rpx;
		font-size: 28rpx;
	}
	.tip {
		margin-right: 14rpx;
	}
	.time {
		color: #9AA0A6;
	}
	.row2 {
		margin: 12rpx 0 8rpx;
		color: #222;
		font-size: 28rpx;
	}
	.row3 {
		position: relative;
		padding-left: 24rpx;
		color: #9AA0A6;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.row3::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8rpx;
		bottom: 8rpx;
		width: 4rpx;
		background: #E6E8EB;
		border-radius: 2rpx;
	}
 
 </style>