<template>
	<view class="container">
		<u-sticky>
			<view class="search-wrapper">
					<u-search :showAction="true" border-color="#E8E8E8" actionText="搜索" :animation="false" v-model="where.keywords" @search="onSearch" :actionStyle="actionStyle"></u-search>
			</view>
		</u-sticky>
		<view class="user-list">
			<u-list :height="680" @scrolltolower="scrolltolower">
				<view class="list">
					<u-list-item v-for="(item, index) in list" :key="index">
						<u-cell :title="`${item.userInfo.nickname}`" :label="`粉丝：${ item.userInfo.fans }`" isLink
							@click="navTo('/sub_pages/member/detail/detail',{userId: item.userId})">
							<u-avatar slot="icon" size="50" :src="item.userInfo.avatar"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
							<view slot="right-icon" @click.stop="onFollow(item.userId,index)">
								<view v-if="item.follow" class="unfollow-btn">
									<!-- <u-icon name="heart" color="#ffffff" :size="15"></u-icon> -->
									<text>已关注</text>
								</view>
								<view v-else class="follow-btn">
									<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
									<text>关注</text>
								</view>
							</view>
						</u-cell>
					</u-list-item>
					<u-empty
							v-if="list.length == 0"
					        mode="search"
					        icon="http://cdn.uviewui.com/uview/empty/search.png"
					>
					</u-empty>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import * as UserProfileApi from '@/api/love-user-profile.js'
	import * as UserFollowApi from '@/api/user-follow.js'

	const userId = uni.getStorageSync('userId')

	export default {
		data() {
			return {
				list: [],
				page: 1,
				where: {
					showProfile: true
				},
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false,
				actionStyle: {
					background: '#8b004c',
					color: '#ffffff',
					padding: '12rpx 16rpx',
					borderRadius: '50rpx'
				},
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.where = options
			this.onRefreshList()
		},

		methods: {
			// 刷新会员列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.showFollow = true
				app.where.showProfile = true
				return new Promise((resolve, reject) => {
					UserProfileApi.pageUserProfile(app.where)
						.then(result => {
							const list = result.data.list
							// 合并新数据
							app.list = app.list.concat(list)
							if(result.data.count > app.list.length){
								app.canReset = true
							}else{
								app.canReset = false
							}
							resolve(list)
						})
				})
			},
			scrolltolower(e){
				console.log("e: ",e);
			},
			navTo(url,userId){
				this.$push(url,userId)
			},
			onFollow(shopId,index){
				if(userId == null || userId == 1101){
					this.$push('pages/login/index')
					return false
				}
				this.list[index].follow = !this.list[index].follow
				UserFollowApi.addFollow({shopId}).then(res => {
					this.$success(res.message)
				})
			},
			onSearch(){
				this.list = []
				this.where.page = 1
				this.onRefreshList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
	}

	.search-wrapper {
		display: flex;
		height: 64rpx;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		
		padding: 20rpx;
	}
	.user-list{
		padding: 0 20rpx;
	}

	.follow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		display: flex;
		background: linear-gradient(#47076b, #8d1a50);
		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}

	.unfollow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		display: flex;
		background: linear-gradient(#b3b3b3, #cccccc);
		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}

</style>
