<template>
	<view class="w-body">
			<w-public />
			<w-navbar fixed left-back title="请选择"></w-navbar>
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="mescroll-body">
					<view class="user-item" hover-class="w-hover-before" v-for="item in list" @click="selectUser(item)" :key="item.userId">
						<view>
							<view class="checkbox" :class="{'selected':selectedUsers.includes(item.userId)}"></view>
						</view>
						<view>
							<u-avatar :src="$w.url(item.avatar)"></u-avatar>
						</view>
						<view>{{item.nickName}}</view>
					</view>
				</view>
			</mescroll-body>
			<view class="w-bottom-bar" style="grid-template-columns: 2fr 3fr;" :style="{'--w-bottom':$w.bottom+'px'}">
					<view>已选<text style="color:vaR(--w-error);">{{selectedUsers.length}}</text>人</view>
					<view hover-class="w-before" @click="end">确定</view>
			</view>
			<view style="height: 100px;"></view>
	</view>
</template>

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

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

const selectedUsers = ref([]);

onLoad(async()=>{
	await nextTick();
	eventChannel = proxy.getOpenerEventChannel();
	eventChannel.on("init",(data)=>{
		data = data || [];
		selectedUsers.value = [...data];
	});
});

//分页逻辑
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 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); // 请求成功, 结束加载
}).catch(()=>{
	mescroll.endErr(); // 请求失败, 结束加载
})
}


const selectUser = (item)=>{
	let i = selectedUsers.value.indexOf(item.userId);
	if(i==-1){
		selectedUsers.value.push(item.userId);
	}else{
		selectedUsers.value.splice(i,1);
	}
}

const end=()=>{
	eventChannel.emit("end",[...selectedUsers.value]);
	uni.navigateBack();
}

</script>

<style lang="scss" scoped>
.w-body{
	.mescroll-body {
		border-top: solid .2rem var(--w-bg);
	}
	
	.checkbox {
		width: 1rem;
		height: 1rem;
		border: solid .5px var(--w-bg-dark);
		border-radius: .2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--w-bg);
		font-size: .8rem;
		&.selected{
			border-color: var(--w-main);
			&:before{
				content: '';
				background-color: var(--w-main);
				width: .5rem;
				height: .5rem;
				border-radius: .1rem;
				display: block;
			}
		}
	}
	
	.user-item {
		display: grid;
		grid-template-columns: 40px 50px 1fr;
		position: relative;
		padding: .2rem;
		border-bottom: solid 1px var(--w-bg);
		
		
		
		&::after {
			content: "";
			position: absolute;
			top:0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #0000;
		}
		
		&>view {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			&:first-child {
				justify-content: center;
			}
		}
	}
	
}
</style>
