<template>
	<view class="follow-info-page">
		<u-toast ref="messager"></u-toast>
		<view class="ub-content">
			<view>
				<view class="ub-tab" @click="ubtab(1)" :class="tab == 1 ? 'ub-tabactive' : ' ' ">关注我的<text></text></view>
				<view class="ub-tab" @click="ubtab(2)" :class="tab == 2 ? 'ub-tabactive' : ' ' ">我关注的<text></text></view>
			</view>
		</view>
		<view class="follow-list-box" v-show="tab == 1">
			<view class="follow-info-list" v-for="(item,idx) in followMe.list">
				<view class="img-info">
					<author-img :avatar="item.userFollow.authorInfo.avatar" :sex="item.userFollow.authorInfo.sex"></author-img>
				</view>
				<view class="name-and-sign">
					<view class="name-text">{{item.userFollow.authorInfo.name}}</view>
					<view class="name-sign">{{item.userFollow.authorInfo.sign}}</view>
				</view>
				<view class="isFollow-btn">
					<view class="is-follow" v-if="item.has" @click="showPopup(item,idx,1)">已关注</view>
					<view class="on-follow" v-else @click="toFollow(item,idx)">关注</view>
					
				</view>
			</view>
		</view>
		<view class="follow-list-box" v-show="tab == 2">
			<view class="follow-info-list" v-for="(follow,index) in follow.list">
				<view class="img-info">
					<author-img :avatar="follow.userFollow.authorInfo.avatar" :sex="follow.userFollow.authorInfo.sex"></author-img>
					<!-- <image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image> -->
				</view>
				<view class="name-and-sign">
					<view class="name-text">{{follow.userFollow.authorInfo.name}}</view>
					<view class="name-sign">{{follow.userFollow.authorInfo.sign}}</view>
				</view>
				<view class="isFollow-btn">
					<view class="is-follow" @click="showPopup(follow,index,2)">已关注</view>
					<!-- <view class="on-follow" v-else>关注</view> -->
				</view>
			</view>
		</view>
		<view >
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<u-popup :show="show">
		    <view class="cancel-pop">
		        <view class="btn" @click="cancel()">
		        	停止关注 {{cancelData.userFollow.authorInfo.name}}
		        </view>
				<view class="btn btn2" @click="show = false">
					取消
				</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import apiFollow from "@/api/phase2/userfollow.js"
	import apiUser from "@/api/system/user.js";
	export default {
		data() {
			return {
				cancelData:{
					userFollow:{
						authorInfo:{
							name:''
						}
					}
				},
				loadStatus: 'more',
				cancelIndex:0,
				cancelIdx:0,
				show:false,
				tab:1,
				userInfo:{},
				followMe:{
					aid:'',
					pageIndex:1,
					pageSize:10,
					list:[],
				},
				follow:{
					aid:'',
					pageIndex:1,
					pageSize:10,
					list:[],
				}
				
			}
		},
		onPullDownRefresh() {
		   this.onReachBottom();
		},
		onReachBottom() {
			if(this.tab == 1) {//关注我的
				this.followMe.pageIndex ++;
				this.getMyPage();
			} else {//我关注的
				this.follow.pageIndex ++;
				this.getPage();
			}
		},
		onLoad(options) {
			this.$store.dispatch('GetUserInfo').then(rs => {
				this.userInfo = rs;
				this.getMyPage();
				this.getPage();
			});
			
		},
		methods: {
			showPopup(item,index,idx) {
				this.cancelData = item;
				this.cancelIndex = index;
				this.cancelIdx = idx;
				this.show = true;
			},
			// index   列表下标
			// idx  哪个列表
			cancel() {
			    let $this=this;
			    let id = '';
			    if(this.cancelIdx == 1) {
			      id = this.cancelData.userFollow.aid;
			    } else {
			      id = this.cancelData.userFollow.followId;
			    }
			    apiFollow.remove(id).then(res=>{
			       if(res.status == 200) {
					   this.show = false;
			        if(this.cancelIdx == 1) {
						$this.followMe.list[this.cancelIndex].has = false;
			        } else {
					   $this.follow.list.splice(this.cancelIdx,1);
			        }
					this.$refs.messager.show({message:'停止关注成功',type:'success'});
			       }
			    })
			},
			toFollow(item,index) {
				 let $this=this;
			      apiFollow.save(item.userFollow.aid).then(res=>{
			        if(res.status == 200) {
					  $this.followMe.list[index].has = true;
			        } else {
			          this.$message.error(res.message);
			        }
			      })
			},
			ubtab(num){
				this.tab = num
			},
			getMyPage() {//关注我的，关注他的
			    this.followMe.aid = this.userInfo.aid;
			    let $this=this;
				uni.showLoading({title:'加载中...'});
			    apiFollow.mypage(this.followMe).then(res=>{
					setTimeout(function(){ uni.hideLoading() },100);
			        if(res.status== 200) {
			           if($this.followMe.pageIndex>=res.result.totalPages){
						   $this.loadStatus='noMore';
					   }
			           res.result.list.forEach(item=>{
			              item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
			           })
			           this.followMe.list.push(...res.result.list);
			           this.getUserData(res.result.list,1);
			        }else{
			          console.log('加载关注我数据错误:'+res.message);
			        }
			    })
			},
			getPage() { //我关注的，他关注的
			     this.follow.aid = this.userInfo.aid;
			    let $this=this;
				uni.showLoading({title:'加载中...'});
			    apiFollow.page(this.follow).then(res=>{
					setTimeout(function(){ uni.hideLoading() },100);
			      if(res.status== 200) {
			         if($this.follow.pageIndex>=res.result.totalPages){
			         	 $this.loadStatus='noMore';
			         }
			         res.result.list.forEach(item=>{
			            item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
			         })
			         this.follow.list.push(...res.result.list);
			         this.getUserData(res.result.list,2);
			      }
			    })
			},
			getUserData(list,tab) {
			    let ids = [];
			    if(tab == 1) {
			      ids = list.map(item=> item.userFollow.aid);
			    } else {
			      ids = list.map(item=> item.userFollow.followId);
			    }
			    
			    apiUser.getByIds(ids).then(res => {
			        if (res.status == 200) {
			            list.forEach((item, index) => {
			                res.result.some(author => {
			                  if (tab == 2 && author.aid == item.userFollow.followId) {
			                      item.userFollow.authorInfo = author;
			                      return true;
			                  } else if(tab == 1 && author.aid == item.userFollow.aid){
			                      item.userFollow.authorInfo = author;
			                      return true;
			                  } else {
			                      return false;
			                  }
			            });
			        });
			        } else {
			        this.$message.error(res.message);
			        }
			    });
			 },
		}
	}
</script>

<style lang="scss" scoped>
	.cancel-pop{
		// height: 142px;
		background: #F8F8F8;
		border-radius: 32upx 32upx 0 0;
		padding: 44upx 36upx 40upx 36upx;
		.btn{
			height: 88upx;
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			line-height: 88upx;
			box-shadow: 0 4upx 14upx 2upx rgba(104,102,102,0.08);
			text-align: center;
		}
		.btn2{
			margin-top: 22upx;
			border-radius: 44upx;
			
		}
	}
	.follow-info-page{
		
		background-color: #fff;
		.ub-content{
			// background-color: #fff;
			margin: 0 140upx;
			border-radius: 12upx;
			padding: 45upx 30upx;
			.ub-tab{
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
				float: left;
				font-size: 32upx;
				margin: 0 36upx;
				position: relative;
				text{
					width: 84upx;
					height: 8upx;
					background: linear-gradient(180deg, #007DFF  0%, #007DFF 100%);
					border-radius: 26upx;
					position: absolute;
					left: 15%;
					top: 120%;
					display: none;
					margin-top: 10upx;
				}
			}
			.ub-tabactive{
				font-weight: 500;
				color: #333333;
				text{
					display: inline-block;
				}
			}
		}
	.follow-list-box{
		margin-top: 26upx;
		 padding: 0 36upx 0 40upx;
	}
	.follow-info-list{
		padding: 40upx 0 32upx 0;
		display: flex;
		border-bottom:2upx solid rgba(153,153,153,0.1);
		.img-info{
			width: 80upx;
		}
		.name-and-sign{
			margin-left: 30upx;
			width: 100%;
			.name-text{
				font-size: 28upx;
				font-weight: 500;
				color: #333333;
			}
			.name-sign{
				margin-top: 4upx;
				font-size: 24upx;
				color: #999999;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical; 
				display: -webkit-box;-webkit-line-clamp: 1; 
				word-break:break-all;
			}
		}
		.isFollow-btn{
			width: 130upx;
			margin-top: 14upx;
			.on-follow{
				width: 130upx;
				height: 52upx;
				line-height: 52upx;
				border-radius: 26upx;
				border: 2upx solid #007DFF;
				text-align: center;
				font-size: 28upx;
				color: #387DF7;
			}
			.is-follow{
				width: 130upx;
				// padding: 0 30upx;
				height: 52upx;
				line-height: 52upx;
				border-radius: 26upx;
				border: 2upx solid #DCDCDC;
				text-align: center;
				font-size: 28upx;
				color:#999999;
			}
		}
	}
	}
</style>
