<template>
	<!-- 客户列表 锁客列表 -->
	<view class="kehu">
		<view class="search">
			<view class='sear_01'>
				<!-- <uni-icon type="search" size="20" color="#A5A5A5"></uni-icon><span>搜索</span> -->
				<input class="input" type="text" placeholder="可通过关键词搜索" v-model="skeyword" >
			</view>

			<view class="sear_02"><button class="cu-btn round bg-grey sm  ali-c" @tap="tosearch">搜索</button></view>
		</view>
		<view class="counts">锁客统计:{{count}}</view>
		<block v-for="(item,index) of kehu" :key="index" >
			<view class="list" @click="jump_to_detail(item.id)">
				<view class="list_l"><img :src="item.face"></img></view>
				<view class="list_r">
					<view class="list_r_01">{{item.nickname}} </view>
					<view class="list_r_02">{{item.user_id}}</view>
				</view>
			</view>
		</block>
		
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		
	</view>
</template>

<script>
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
	import {lockGuest} from "@/utils/api/api.js";
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	export default {
		components:{
			pageScrollTo
		},
		data() {
			return {
				list: ['a', 'b', 'c', 'a', 'b', 'c'],
				c_index: 0,
				kehu: [],
				skeyword:"",//关键字
				page:0,
				isallshow:true,
				isshowtop:false,
				count:0,
			};
		},
		components: {
			uniIcon
		},
		onLoad() {  
			this.lockGuestFun();
		},
		//下拉刷新
		onPullDownRefresh(){
			this.kehu=[];
			this.page=0;//分页
			this.isallshow=true;//瀑布流开关
			this.lockGuestFun();
			// uni.stopPullDownRefresh();//结束下拉刷新
		},
		onPageScroll(e){
			//处理返回顶部
			if(e.scrollTop>400){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		onReachBottom() {
			//加载更多~
			if(this.isallshow){
				this.lockGuestFun();
			}
		},
		methods: {
			//搜索事件
			tosearch(){
				this.page = 0;
				this.kehu = [];
				this.isallshow =true;
				this.lockGuestFun();
			},
			jump_to_detail() {
				// uni.navigateTo({
				// 	url: '../kedetail/kedetail'
				// });
			},
			async lockGuestFun(){
				this.page++;
				let res = await lockGuest({
					page:this.page,//
					skeyword:this.skeyword,
				});
				uni.stopPullDownRefresh();//结束下拉刷新
				if(res.code==0){
					if(res.data.list){
						this.count  = res.data.count;
						if(res.data.list.length!=0){
							this.kehu = [...this.kehu,...res.data.list];
						}else{
							this.$api.msg("没有更多了哦~");
							this.isallshow =false;
						}
					}else{
						this.$api.msg("没有更多了哦~");
						this.isallshow =false;
					}
					
				}else{
					this.$api.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./kehu.scss";
</style>
