<style scoped>
	.pages{
        min-height: 100vh;
		background-color: #f6f6f6;
    }
	.addChild-header{
        flex-direction: column;
        align-items: center;
    }
    .addChild-header image{
        padding: 54rpx 0 31rpx 0;
    }
    .addChild-header text{
        font-size: 34rpx;
        font-weight: 800;
        color: #111111;
    }
    .header-text{
        padding: 22rpx 0 37rpx 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #BEBEBE;
    }
    .header-input {
        width: 100%;
		box-sizing: border-box;
		vertical-align: middle;
		display: flex;
		flex-direction: column;
		justify-content: center;
        padding: 0 51rpx;
        margin-bottom: 51rpx;
	}
	/deep/.van-cell {
        line-height: 120rpx;
        border-radius: 40rpx;
        border: 4rpx solid red;
	}
    .addChild-buttom{
        background: #C91727;
        border-radius: 44px;
        position: fixed;
        left: 50rpx;
        right: 50rpx;
        bottom: 34rpx;
        line-height: 88rpx;
        color: #ffffff;
        font-weight: 500;
        font-size: 30rpx;
        z-index: 999;
        text-align: center;
    }
    .addChild-buttom.active{
        background: rgba(201, 23, 39, .5);
    }
    .addChild .user-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 36rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        margin: 0 50rpx;
		padding: 42rpx 54rpx;
		margin-bottom: 40rpx;
	}
	.addChild .user-item .avatar{
		width: 100rpx;
		height: 100rpx;
		background: rgba(252, 238, 239, 1);
		border-radius: 40rpx;
		font-size: 46rpx;
		font-weight: 500;
		color: rgba(206, 128, 134, 1);
		display: flex;
		align-items: center;
		justify-content: center;
        font-weight: bold;
	}
	.addChild .user-item .uname{
		font-size: 28rpx;
		margin-left: 32rpx;
		font-weight: 500;
		color: #000000;
		width:1px;
		flex: 1;
	}
	.addChild .user-item .check{
		color: #000000;
		font-size: 36rpx;
	}
	/deep/.van-empty{
		padding: 0;
	}
</style>
<template>
	<view class="addChild pages">
        <scroll-view scroll-y="true" style="width:100%;height: 100%;margin-bottom: 70rpx;">
            <view class="addChild-header flex">
                <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664160541000_21.png"
                style="width: 352rpx;height: 218rpx;"></image>
                <text>请输入手机号</text>
                <view class="header-text">输入该账号注册的手机号</view>
                <view class="header-input">
                    <van-cell-group>
                        <van-field type="tel" :value="Account" placeholder="输入手机号"
						clearable input-align="center" right-icon="search" @blur="usernameInput" 
						@click-icon="clickIcon"/>
                    </van-cell-group>
                </view>
            </view>
            <view style="margin-bottom: 100rpx;">
                <view class="user-item" v-for="(item,index) in dataList" :key="index"
				@click="clickChecked(item)">
                    <view class="avatar">
						{{item.StuName.substring(0,1)}}
					</view>
                    <view class="uname">
                        {{item.StuName}}
                    </view>
                    <view class="check">
                        <van-icon :name="item.checked?'success':'circle'" />
                    </view>
                </view>
                <van-empty description="暂无小孩信息" v-if="dataList.length === 0" />
				<view v-if="dataList.length > 0">
					<Loadmore :state="pageState" />
				</view>
            </view>
        </scroll-view>
        <view v-if="loading" class="addChild-buttom" @click="addChild">
            已选{{list.length}}个，确认添加
        </view>
        <view v-else class="addChild-buttom active">
            已选{{list.length}}个，确认添加
        </view>
		
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import Loadmore from "../../components/loadmore.vue";
	import bottom from "../../components/bottom";
	import {
		GetStudentPageList,SetMyChild
	} from "../../api/erp";
	export default {
		components: {
			bottom,
			Loadmore,
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				statusBarHeight: 0,
                loading:true,
                Account:'',
				form:{
					StuId:'',
					WeChatName:'',
					WeChatImg:'',
					UnionId:''
				},
				msg: {
					pageIndex: 1,
					pageSize: 10,
					StuTel:'',//13823311062
				},
				pageCount: 0,
				dataList: [],
				list:[],
				pageState: "more",
				timer: null, //防抖
            });
			const methods = {
				clickChecked(item){
					data.list = []
					if(item.checked){
						data.list = []
						item.checked = false
						data.form = {
							StuId: '',
							UnionId: ''
						}
					}else{
						data.dataList.forEach(i=>{
							i.checked=false
							if(item.StuId==i.StuId){
								data.list.push(i)
							}
						})
						item.checked = true
						data.form = {
							StuId: item.StuId,
							UnionId: uni.getStorageSync('wxUserAuthInfo').unionid
						}
						
					}
				},
				clickIcon(){
					var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
					if (!phonereg.test(data.msg.StuTel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none',
							duration: 1000
						})
					} else {
						that.getData()
					}
				},
                usernameInput(val) {
					data.msg.StuTel = val.detail.value
				},
                async addChild(){
					if(!data.form.StuId){
						uni.showToast({
							title: '请选择需要添加的小孩',
							icon: 'none',
							duration: 1000
						})
						return
					}
                    data.loading = false
					uni.showLoading()
					let res = await SetMyChild(data.form);
					if (res) {
						uni.hideLoading()
						data.loading = true
                        uni.navigateBack({
                            delta: 1
                        });
					}
                },
				async getData() {
					uni.showLoading()
					let res = await GetStudentPageList(data.msg);
					if (res) {
						uni.hideLoading()
						let datas = res.Data.PageData
						let addList = function (arr) {
							arr.forEach(item => {
								item.checked = false
							});
						};
						addList(datas);  
						if (data.timer) data.timer = null;
						// data.dataList = res.Data&&res.Data.PageData;
						// return
						if (data.msg.pageIndex === 1) {
							data.dataList = res.Data.PageData;
						} else {
							data.dataList = [...data.dataList, ...res.Data.PageData];
						}
						data.pageCount = res.Data.PageCount
						if (data.msg.pageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
			};
			let that = methods;
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(options) {
			
		},
		onShow(){
			this.dataList = []
			this.msg.pageIndex = 1
		},
		onReachBottom() {
			if (this.msg.pageIndex < this.pageCount) {
				this.pageState = "loading";
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.msg.pageIndex++;
					this.getData();
				}, 1000);
			} else {
				this.pageState = "none";
			}
		}
	};
</script>
