<template>
	<view class="w-body">
			<w-public />
			<w-navbar fixed title="通讯录"></w-navbar>
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<view class="mescroll-body">
					<view class="user-item" hover-class="w-hover-before" v-for="item in list" @click="$w.to('/pages/user/user?id='+item.userId)" :key="item.userId">
						<view>
							<u-avatar :src="$w.url(item.avatar)"></u-avatar>
						</view>
						<view style="justify-content: flex-start;">{{item.nickName}}</view>
						<view>
							<view class="phone" @click.stop.prevent="$w.uni.makePhoneCall({
	phoneNumber: item.phonenumber 
});" hover-class="w-hover-before"><u-icon size="25" color="var(--w-bg-dark-1)" name="phone"></u-icon></view>
						</view>
					</view>
				</view>
			</mescroll-body>

		<c-tabbar name="/pages/user/contacts" />
	</view>
</template>

<script setup>
import { onLoad,onShow } from '@dcloudio/uni-app'
import { ref,getCurrentInstance,nextTick } from 'vue'

const {proxy} = getCurrentInstance();
let eventChannel = undefined;




//分页逻辑
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { page } from '@/api/system/user.js'
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) 

const upOption = ref({
	page:{
		size:20
	}
});

const list = ref([]);
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = (mescroll)=>{
let ps = {pageNum:mescroll.num, pageSize:mescroll.size};
page(ps).then(res=>{
	console.log(res);
	const curPageData = res.rows || [] // 当前页数据

	if(mescroll.num == 1) list.value = []; // 第一页需手动制空列表
	list.value = list.value.concat(curPageData); //追加新数据

	mescroll.endBySize(curPageData.length,res.total); 
	// mescroll.endSuccess(curPageData.length,res.total); // 请求成功, 结束加载
}).catch(()=>{
	mescroll.endErr(); // 请求失败, 结束加载
})
}





</script>

<style lang="scss" scoped>
.w-body{
	.mescroll-body {
		border-top: solid .2rem var(--w-bg);
	}
	

	.user-item {
		display: grid;
		grid-template-columns: 50px 1fr 50px;
		position: relative;
		padding: .2rem;
		border-bottom: solid 1px var(--w-bg);
		
		&>view {
			display: flex;
			justify-content: center;
			align-items: center;
			
			.phone {
				width: 35px;
				height: 35px;
				border: solid 1px var(--w-bg-dark-1);
				border-radius: 40px;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}
		}
	}
	
	
}
</style>
