<template>
	<view class="my-fans">
		<view class="my-interest-topic overflow-hd" >
			<block v-for="(item, idx) in fansList" :key="item.id">
				<view class="topic-box flex j-between al-item-center" >
					<view class="my-interest-contx flex al-item-center" @click="goto" :data-url="'/diary/info/info?id='+item.id">
						<image v-if="item.headimg" class="conton-img border-rius-r" :src="item.headimg" mode=""></image>
						<text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-wode"></text>
						<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
							<view class="font-w text-overflow-tx conton-tex-tlt">{{item.nickname}}</view>
							<text class="color-gray text-overflow-tx fs12">笔记·{{item.zan_count}} | 粉丝·{{item.fans_count}}</text>	
						</view>
					</view>
					<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx)">关注</text>
					<view v-else  class="concern-btn  border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx)">
						已关注
					</view>
				</view>
			</block>
		</view>
		<loading v-if="loading"></loading>
		<nomore v-if="!isData"></nomore>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			
			return {
				fansList: [],
				pages: 1,
				loading:false,
				isData: true,
			}
		},
		onLoad() {
			this.getFansList()
		},
		onReachBottom() {
			if(this.isData) {
				this.getFansList()
			}
		},
		methods: {
			getFansList() {
				app.post('ApiMy/FansList',{pagenum: this.pages}, res => {
					if(res.datalist.length > 0) {
						this.fansList = [...this.fansList, ...res.datalist]
						this.pages++
					}else {
						this.isData = false
					}
				})
			},
			attention(id, idxs) {
				app.post('ApiMy/addFollow',{follow_id:id,type:'user'}, res => {
					if(res.msg == '已关注') {			
						this.fansList[idxs].is_member_follow = 1
						// this.$forceUpdate()
					}else {	
						this.fansList[idxs].is_member_follow = 0
						// this.$forceUpdate()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.flex {display: flex;}
	.flex1 {flex: 1;}
	.j-center {justify-content: center;}
	.j-between {justify-content: space-between;}
	.j-around {justify-content: space-around;}
	.j-evenly {justify-content: space-evenly;}
	.flex-colum{flex-direction: column;}
	.flex-w{flex-wrap: wrap;}
	.al-item-center {align-items: center;}
	.font-w {font-weight: bold;}
	.fs12 {font-size: 24rpx;}
	.color-gray {color: #999;}
	.color-white{color: #fff;}
	.bg-color-white {background-color: #fff;}
	.border-rius-r {border-radius: 800rpx;}
	.border-rius-5 {border-radius: 10rpx;}
	.border-rius-10 {border-radius: 20rpx;}
	.overflow-hd {overflow: hidden;}
	.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
	.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
	
	.my-fans {
		// padding: 20rpx;
	}
	.my-interest-topic {
		padding: 0 20rpx 20rpx;
		.topic-box {
			margin-top: 28rpx;
		}
		.my-interest-contx {
			width: 80%;
			.tip-c-l-img-t {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 50%;

			}
			
		}

	}
	.conton-img {
		width: 100rpx;
		height: 100rpx;
	}
	.conton-tex {
		height: 80rpx;
		padding-left: 30rpx;
		
		.conton-tex-tlt {
			font-size: 30rpx;
		}
	}
	.concern-btn {
		width: 124rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-width: 2rpx ;
		border-style: solid;
	}
</style>
