<template>
	<view class="content">
		<view class="zhuige-friends">
			<view class="zhuige-friends-box">
				<tab :tabs="tabs" :cur-tab="cur_tab" @clickTab="clickTab"></tab>
			</view>

			<view class="zhuige-block">
				<!-- 用户卡 基于发帖用户信息，增加用户列表专用 zhuige-friends-block -->
				<template v-if="userList.length>0">
					<view v-for="(user, index) in userList" :key="index" @click="goToPage(user)" class="zhuige-social-poster-blcok zhuige-friends-block">
						<view class="zhuige-social-poster">
							<block v-if="(cur_tab == 'follow')">
								<view class="zhuige-social-poster-avatar">
									<image mode="aspectFill" :src="user.avatar"></image>
								</view>
								<view class="zhuige-social-poster-info">
									<view>
										<text>{{user.username}}</text>
										<!-- 图2 认证-->
										<image mode="aspectFill" src="https://q.zhuige.com/wp-content/uploads/2022/08/lvv.png"></image>
										<!-- 图1 vip-->
										<image class="zhuige-social-vip" mode="aspectFit" src="https://q.zhuige.com/wp-content/uploads/2022/09/vv1-1.png"></image>
									</view>
									<view>
										<text>{{__('作品')}} {{user.post_count}}</text>
										<text>/</text>
										<text>{{__('粉丝')}} {{user.fans_count}}</text>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="zhuige-social-poster-avatar">
									<image mode="aspectFill" :src="user.user_avatar"></image>
								</view>
								<view class="zhuige-social-poster-info">
									<view>
										<text>{{user.user_nickname}}</text>
										<!-- 图2 认证-->
										<image mode="aspectFill" src="https://q.zhuige.com/wp-content/uploads/2022/08/lvv.png"></image>
										<!-- 图1 vip-->
										<image class="zhuige-social-vip" mode="aspectFit" src="https://q.zhuige.com/wp-content/uploads/2022/09/vv1-1.png"></image>
									</view>
									<view>
										<text>{{__('作品')}} {{user.post_count}}</text>
										<text>/</text>
										<text>{{__('粉丝')}} {{user.fans_count}}</text>
									</view>
								</view>
							</block>

						</view>
						<view class="zhuige-social-opt" v-if="(IsLoginUser)" @click.stop="clickFollowUser(user.user_id)">
							<view v-if="user.is_follow==1 && user.is_fans==1">已互关</view>
							<view v-else-if="user.is_follow==1 && user.is_fans==0">已关注</view>
							<view v-else-if="user.is_follow==0 && user.is_fans==1" class="active">回关</view>
							<view v-else class="active">+关注</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="m-nullpage">
						<view class="m-nullpage-middle">
							<label class="iconfont icon-sousuo-sousuo"></label>
							<view class="m-null-tip">
								<text>{{ __('亲~找不到您想要的信息') }}</text>
							</view>
						</view>
					</view>
				</template>
			</view>




		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Tab from '../components/tab.vue'

	export default {
		components: {
			Tab
		},

		data() {
			this.loginReload = false;

			return {
				userList: [],
				loadStatus: 'loadmore',
				page: 1,
				ispage: false,
				flag: true,
				current: 0,
				tabs: [{
						id: 'follow',
						title: '关注'
					},
					{
						id: 'fans',
						title: '粉丝'
					},
				],
				cur_tab: 'follow',
				IsLoginUser: false,

				loadMoreFollow: 'more',
				follows: [],
				loadedFollow: false,

				loadMoreFan: 'more',
				fans: [],
				loadedFan: false,

				noDataTip: '哇哦，什么也没有',
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad(options) {
			var that = this;
			if (options.user_id) {
				this.user_id = options.user_id;
			}
			this.uid == that.userInfo.user_id && that.setData({
				IsLoginUser: true
			});

			this.getUserList()


		},



		onShow() {
			// if (this.loginReload) {
			// 	this.loginReload = false;

			// 	this.refresh();
			// }


		},

		onShareAppMessage() {},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: '粉丝/关注-' + getApp().globalData.appName,
			};
		},
		// #endif

		onReachBottom() {

		},

		methods: {
			getUserList() {
				this.loadStatus = 'loading';
				var that = this;
				var params = {
					page: this.page,
					rows: 100,
					type: this.cur_tab,
					user_id: this.user_id
				};

				that.$.request({
					url: that.Config.URL.user.friend_lists,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							if (data.page >= data.total) {
								that.setData({
									flag: false,
									ispage: false,
									userList: that.userList.concat(data.items)
								});
							} else {
								that.setData({
									flag: true,
									ispage: true,
									userList: that.userList.concat(data.items)
								});
							}
						} else {
							that.setData({
								flag: false,
								ispage: false
							});
						}
					}
				});
			},
			goToPage: function(item) {
				var url = '';
				if (this.cur_tab == 'follow') {
					url = '/community/community/userspace?uid=' + item.friend_id
				} else {
					url = '/community/community/userspace?uid=' + item.user_id
				}
				this.$.navigateTo({
					url: url
				})
			},
			//----- event start -----
			/**
			 * 关注用户事件
			 */
			onFlollowUser(data) {
				// this.refresh();

			},





			/**
			 * 刷新
			 */
			refresh() {

			},

			/**
			 * 切换TAB
			 */
			clickTab(tab) {
				console.log(tab)
				this.cur_tab = tab.id;
				this.page = 1;
				this.userList = [];
				this.getUserList()
			},

			/**
			 * 点击关注用户
			 */
			clickFollowUser(user_id) {

			},

			/**
			 * 加载关注者
			 */
			loadFollows() {

			},

			/**
			 * 加载粉丝
			 */
			loadFans() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.zhuige-friends {
		padding: 0 20rpx;
	}

	.zhuige-friends-block {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.zhuige-friends-block:last-of-type {
		border: none;
	}

	.zhuige-social-opt {
		display: flex;
		flex-direction: row-reverse;
		width: 22% !important;
	}

	.zhuige-friends-block .zhuige-social-opt view {
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		text-align: center;
		background: #F3f3f3;
		font-size: 28rpx;
		font-weight: 300;
		border-radius: 60rpx;
		color: #999999;
	}

	.zhuige-friends-block .zhuige-social-opt view.active {
		background: #010101;
		color: #FFFFFF;
	}

	.zhuige-friends-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.zhuige-block {
		padding: 10px;
		border-radius: 6px;
		background: #FFFFFF;
		margin-bottom: 12px;
	}

	.zhuige-social-poster-blcok {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.zhuige-social-poster {
		width: 84%;
		display: flex;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.zhuige-social-poster-avatar {
		flex: 0 0 96rpx;
		height: 96rpx;
		width: 96rpx;
	}

	.zhuige-social-poster-avatar image {
		height: 96rpx;
		width: 96rpx;
		border-radius: 50%;
	}

	.zhuige-social-poster-info {
		padding-left: 20rpx;
		margin-bottom: -4rpx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999999;
	}

	.zhuige-social-poster-info view {
		padding: 12rpx 0;
		display: flex;
		align-items: center;
		height: 50rpx;

	}

	.zhuige-social-poster-info view:nth-child(1) text {
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 12rpx;
		color: #010101
	}

	.zhuige-social-poster-info view:nth-child(1) image:nth-child(2) {
		height: 28rpx;
		width: 28rpx;
		margin-right: 12rpx;
	}

	.zhuige-social-poster-info view:nth-child(1) image:nth-child(2).zhuige-social-vip,
	.zhuige-social-poster-info view:nth-child(1) image:nth-child(3).zhuige-social-vip {
		height: 28rpx;
		width: 56rpx;
	}

	.zhuige-social-poster-info view:nth-child(2) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.zhuige-social-poster-info view:nth-child(2) text {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		white-space: nowrap
	}

	.zhuige-social-poster-info view:nth-child(2) text:nth-child(2) {
		margin: 0 12rpx;
	}
</style>