<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>
		<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="list_item" v-for="(item,index) in zmlist" :key="index">
				<view class="lt" style="display: flex;">
					<image  @click="btngr(item)" style="margin-right: 20rpx;" :src="item.bstPicture" mode="aspectFill"></image>
					<view class="cen">
						<view class="cen_top">
							{{item.bstName}}
						</view>
						<view class="cen_bot">
							<view>{{item.createTime}} 关注了你</view>
						</view>
					</view>
				</view>
				<view class="rt">
					<view class="sx" @click="btnsx(item)">
						{{item.followStatus == true ? '已关注' : '回关'}}
					</view>
				</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:3
				}
				this.$u.post(`/app/message/read`,data).then(res => {})
			},
			// 请求新关注列表
			getlist(){
				this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=3`).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
				})
			},
			// 点击进行回关
			btnsx(item) {
				if(item.followStatus == false){
					this.$u.post(`/app/follow/add?followedId=${item.userId}`).then(res => {
						if(res.code == 200){
							uni.showToast({
								title: '关注成功',
								icon: 'success',
								duration: 3000
							})
							item.followStatus = true
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}else{
					this.$u.delete(`/app/follow/cancel?followedId=${item.userId}`).then(res => {
						if(res.code == 200){
							uni.showToast({
								title: '取关成功',
								icon: 'success',
								duration: 3000
							})
							item.followStatus = false
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.list {
			width: 750rpx;
			height: 87vh;
			margin-top: 24rpx;
			border-top: 1rpx solid rgba(216, 216, 216, 0.3);
			overflow: scroll;
			box-sizing: border-box;

			.list_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid rgba(216, 216, 216, 0.3);
				.lt {

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

				.cen {

					.cen_top {
						font-size: 34rpx;
						color: #333;
					}

					.cen_bot {
						font-size: 24rpx;
						display: flex;
						margin-top: 10rpx;

						view {
							margin-right: 20rpx;
							font-size: 24rpx;
							color: 999;
						}

						text {
							display: inline-block;
							margin-left: 8rpx;
						}
					}
				}

				.rt {
					margin-top: 21rpx;
					.sx {
						width: 164rpx;
						height: 66rpx;
						border-radius: 37rpx 37rpx 37rpx 37rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 32rpx;
						color: #333;
						border: 2rpx solid #d8d8d8;
					}

					.gz {
						width: 164rpx;
						height: 66rpx;
						border-radius: 37rpx 37rpx 37rpx 37rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						padding-left: 30rpx;
						box-sizing: border-box;

						text {
							font-size: 48rpx;
							margin-top: -4rpx;
						}
					}
				}
			}
		}
	}
</style>