<template>
    <view class="follow">
       <scroll-view scroll-y :style="{ height: viewHeight }" @scrolltolower="loadmore" class="container">
		    <view class="sosuo" @click="searchValue">
				<image src="/static/image/common/10.png"></image>
				<text>输入达人名称</text>
			</view>
			<view class="list" style="margin-left:-20rpx">
				<darenItem style="margin-top:20rpx;margin-left:20rpx;" v-for="item in recommendList" :key="item.id" :info="item"  v-on:pChangeType="changeType"></darenItem>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#ECECEC" font-size="14" margin-top="40" margin-bottom="20" v-if="recommendList.length > pageSize" @loadmore="loadmore"></u-loadmore>
	   </scroll-view>
    </view>
</template>
<style lang="scss" scoped>
.follow{
    background-color: #ECECEC;
    min-height: calc(100vh - var(--window-top));
	.container {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.sosuo{
			width: 100%;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			>image{
				width: 29rpx;
				height: 29rpx;
			}
			>text{
				font-size: 24rpx;
				color: #999;
				margin-left: 15rpx;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			width: calc(100% + 23rpx);
			margin-right: -23rpx;
		}
	}
}
</style>
<script>
import darenItem from "@/components/index/daren-item/index" 

export default {
    name:"follow",
    components:{
        darenItem
    },
    data(){
        return{
			pageSize: 2,
			recommendList: [], // 推荐达人
			page: 1,
			loadStatus: 'loadmore',
			timer: true,
			viewHeight: '',
        }
	},
	onLoad() {
		this.setViewHeight();
	},
	onShow() {
		this.getRecommendList();
	},
	methods: {
		async getRecommendList({ load = 'reload' } = {}) {
			const res = await this.$u.api.getAllRecommendList({ page: this.page });
			this.timer = true;
			if(res.errCode == 0) {
				if(load == 'reload') this.recommendList = res.data.list;
				if(load == 'loadmore') this.recommendList.push(...res.data.list);
			}
			return res.data.list.length;
		},
		loadmore() {
			if(!this.timer) return false;
			this.timer = false;
			this.loadStatus = "loading";
			this.page++;
			this.getRecommendList({ load: "loadmore" }).then(length => {
				this.loadStatus = "nomore";
				if(length == 0) this.page--;
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		},
		changeType(member_id){
			// console.log(member_id);
			this.$emit("pChangeType")
			this.$u.api.attentionMember({
				member_id: member_id
			}).then((res)=>{
				console.log(res)
				this.getRecommendList();
			})
		},
		searchValue() {
			uni.navigateTo({
				url: '/pageB/search/index?type=2&curent=1'
			})
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.viewHeight = res.windowHeight + 'px';
		}
	},
}
</script>