<template>
	<view class="container">
			<!-- <image src="../../static/list.png" mode="" class="bigimg" @click="submit()"></image> -->
		<view class="searchbox">
			<image src="../../static/meishi_icon_sousuo.png" mode=""></image>
			<input class="search_input" v-model="searchValue" @input="changenr($event)" placeholder="请输入要搜索的姓名">
		</view>
		<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="lists_items" v-for="(it,i) in dataList" :key="i">
				<view class="bm">
					{{it.department}}
				</view>
					<view class="rylist" v-for="(item,index) in it.list" :key="index">
						<checkbox-group @change="checkSelectItem($event,item)" class="rylist1">
						<view class="rylists">
							<view class="rylist_left">
								<image src="../../static/tx.jpg" mode=""></image>
							</view>
							<view class="rylist_right">
								<view class="toptitle">
									{{item.name}}
								</view>
								<view class="zw">
									{{item.position}}
								</view>
							</view>
						</view>
						<view class="checked">
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						</checkbox-group>
					</view>
			</view>
			<view class="load">
				暂无更多~
			</view>
		</scroll-view>
		<view class="pagebot">
			
		</view>
		<view class="botadd">
			<view class="qxan">
				<checkbox-group @change="checkSelect" >
				<view class="allcheck">
					<view class="checkalls">
						<checkbox :checked="checkTrue"></checkbox>
					</view>
					<view class="qx">
						全选
					</view>
				</view>
				</checkbox-group>
			</view>
			<view class="btnsubmit">
				确定({{checkList.length}}/{{alllist.length}})
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchValue:'',
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				height:0,
				scorllheight:0,
				show:false,
				show1:false,
				top:0,
				checkTrue:false,
				checkList:[],
				alllist:[],
				dataList:[
					{
						department:'后勤部',
						list:[
							{
								value:0,
								name:'陈丽云',
								position:'部长',
								checked:false
							},
							{
								value:1,
								name:'陈丽云',
								position:'组员',
								checked:false
							}
						]
					},
					{
						department:'市场部',
						list:[
							{
								value:2,
								name:'陈丽云',
								position:'部长',
								checked:false
							},
							{
								value:3,
								name:'陈丽云',
								position:'组员',
								checked:false
							},
							{
								value:4,
								name:'陈丽云',
								position:'市场专员',
								checked:false
							}
						]
					},
					{
						department:'办公室',
						list:[
							{
								value:5,
								name:'陈丽云',
								position:'总经理',
								checked:false
							},
							{
								value:6,
								name:'陈丽云',
								position:'副经理',
								checked:false
							}
						]
					},
					{
						department:'技术部',
						list:[
							{
								value:7,
								name:'陈丽云',
								position:'部长',
								checked:false
							},
							{
								value:8,
								name:'陈丽云',
								position:'项目经理',
								checked:false
							},
							{
								value:9,
								name:'陈丽云',
								position:'员工',
								checked:false
							},
						]
					},
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx		
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height - 120
				}
			});
			this.allnumber()
		},
		methods:{
			allnumber(){
				this.alllist = []
				for(var i=0;i<this.dataList.length;i++){
					for(var j=0;j<this.dataList[i].list.length;j++){
						this.dataList[i].list[j].checked = false
						this.alllist.push(this.dataList[i].list[j])
					}
				}
			},
			 //全选
			checkSelect() {
				if (this.checkTrue == true) {
					this.checkTrue = false;
					// 遍历RecordList数组 取消全选
					this.alllist.forEach(item => {
						this.$set(item, 'checked', false)
					})
					this.checkList = []
				} else {
					this.checkTrue = true;
					// 遍历alllist数组 设置全选
					this.alllist.forEach(item => {
						this.$set(item, 'checked', true)
					})
					this.checkList = this.alllist
					console.log(this.checkList,156)
				}

			},
			checkSelectItem(e, item) {
				console.log(item,156)
				// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
				if (item.checked == true) {
					this.$set(item, 'checked', false)
					this.checkList = this.checkList.filter(items => (items.value !== item.value))
					console.log(this.checkList,'true')
				} else {
					this.$set(item, 'checked', true)
					this.checkList.push(item)
					console.log(this.checkList,'false')
				}
				// 过滤出数组中checked为true的项目，如果和原alllist长度相等，就全选显示
				let newArr = this.alllist.filter(item => (item.checked == true))
				if (newArr.length === this.alllist.length) {
					this.checkTrue = true;
				} else {
					this.checkTrue = false;
				}
				console.log(this.checkList,41561456)
			},
			submit(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.bigimg{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: -99;
		top: 0;
		left: 0;
	}
	.searchbox{
		background-color: #fff;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		position: relative;
	}
	.search_input{
		border: none;
		height: 60rpx;
		width: 100%;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #F6F6F6;
		padding-left: 50rpx;
	}
	.searchbox image{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 40rpx;
		top: 40%;
		z-index: 99;
	}
	.bm{
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
	}
	.rylist{
		background-color: #fff;
		padding: 26rpx 54rpx 26rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #ececec;
	}
	.rylists{
		display: flex;
		align-items: center;
	}
	.rylist_left{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 28rpx;
	}
	.rylist_left image{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}
	.rylist_right{
		height: 96rpx;
	}
	.zw{
		font-size: 24rpx;
		color:#696969;
		margin-top: 16rpx;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.botadd{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		background-color: #fff;
		width: 100%;
		padding: 20rpx 0 40rpx 34rpx;
	}
	.allcheck{
		display: flex;
		align-items: center;
		margin-right: 74rpx;
	}
	.checked{
		width: 38rpx;
		height: 38rpx;
	}
	.checked image{
		width: 38rpx;
		height: 38rpx;
	}
	.btnsubmit{
		width:50%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #0f6efe;
		color:#fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.checked {
		width: 38rpx;
		height: 38rpx;
		/* #ifdef APP-PLUS ||MP-WEIXIN */
		checkbox .wx-checkbox-input {
			border-radius: 50% !important;
			border: none !important;
			/* color: #ffffff !important; */
		}	
		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #fff;
			border: none !important;
			background-image: linear-gradient(to right, #0f6efe, #0f6efe);
			background-size: 100%;
			background-repeat: no-repeat;
		}
	
		/* .wx-checkbox-input.wx-checkbox-input-checked {
						border: none !important;
					} */
		/* #endif */
	}
	.checkalls {
		width: 38rpx;
		height: 38rpx;
		/* #ifdef APP-PLUS ||MP-WEIXIN */
		checkbox .wx-checkbox-input {
			border-radius: 50% !important;
			width: 38rpx;
			height: 38rpx;
			/* color: #ffffff !important; */
		}	
		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #fff;
			width: 38rpx;
			height: 38rpx;
			border: none !important;
			background-image: linear-gradient(to right, #0f6efe, #0f6efe);
			background-size: 100%;
			background-repeat: no-repeat;
		}
	
		/* .wx-checkbox-input.wx-checkbox-input-checked {
						border: none !important;
					} */
		/* #endif */
	}
	.qx{
		margin-left: 16rpx;
	}
	.rylist1{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.pagebot{
		height: 120rpx;
	}
</style>