<style lang='scss' scoped>
	.projectServe{
		width: 100%;
		height: 100%;
		background-color: #F9F9F9;
		&-search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $paddingTB $paddingLR;
			background-color: #fff;
			&-usearch{
				width: 470rpx;
			}
		}
		&-info-list{
			padding: 30rpx $paddingLR;
			/* background-color: #F9F9F9; */
			
		}
		&-info-box{
			display: flex;
			align-items: center;
		}
		.box-content{
			background-color: #fff;
			padding: 20rpx;
			width: calc(100% - 64rpx);
			border-radius: 16rpx;
			box-shadow: $box-shadow;
			&-header{
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}
			&-msg{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-rows{
					font-size: 22rpx;
					color: #aaa;
					width: calc(100% - 210rpx);
				}
				&-people{
					width: 70rpx;
					font-size: 26rpx;
				}
			}
		}
		&-bottom{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-assign{
				display: flex;
				align-items: center;
				&-btn{
					width: 200rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color:#1C9AFF;
					color: #fff;
				}
			}
		}
	}
</style>
<template>
	<view class="projectServe">
		<pickerGroup :leftSelectList="leftSelectList" :leftValue="leftValue" @onLeftConfirm="onLeftConfirmFn"
		:rightValue="rightValue" rightSelectType="date" @onDateChange="onDateChangeFn" ></pickerGroup>
		<view class="projectServe-search">
			<u-search class="projectServe-search-usearch" :show-action="false"></u-search>
			<u-button size="mini" type="primary" @click="goAddMaintenancePeople">添加维保人员</u-button>
		</view>
		<mescroll-body top="0" height="500rpx" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback" >
			<view class="projectServe-info-list">
				<u-checkbox-group>
					<view class="projectServe-info-box mb20" v-for="(item,index) in projectServeList" :key="index">
						<u-checkbox v-model="item.checkFlag" active-color="#1C9AFF"></u-checkbox>
						<view class="box-content">
							<view class="box-content-header">
								<view class="">895446654455</view>
								<u-tag mode="plain" text="未指派" type="warning" size="mini" ></u-tag>
							</view>
							<view class="box-content-msg">
								<u-image width="110rpx" height="110rpx" class="mr10" src="http://static.drgyen.com/app/hc-app-power/images/car.png"></u-image>
								<view class="box-content-msg-rows">
									<view class="pb10">项目：上海德润谷云物联科技有限公司集团有限公司</view>
									<view class="pb10">地点：where</view>
									<view class="pb10">报警：线路1漏保</view>
								</view>
								<view class="box-content-msg-people text--base--grey">林工</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</mescroll-body>
		<view class="projectServe-bottom">
			<view class="projectServe-bottom-all pl30">
				<u-checkbox v-model="allChecked" active-color="#1C9AFF" @change="allCheckChangeFn"></u-checkbox>
				<text class="">全选</text>
			</view>
			<view class="projectServe-bottom-assign">
				<view class="pr20">选中：1</view>
				<view class="projectServe-bottom-assign-btn" @click="peopleShow = true">立即指派</view>
			</view>
		</view>
		<u-select v-model="peopleShow" :list="peopleList"></u-select>
	</view>
</template>
<script>
	import pickerGroup from "@/components/electricalSafe/pickerGroup.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				projectServeList:[{
					projectName:"project001",
					alarm:true,
					area:"where",
					id:"213123213213123",
					checkFlag:false
				},{
					projectName:"project002",
					alarm:true,
					area:"where",
					id:"213123213213123",
					checkFlag:false
				}],
				peopleShow:false,
				peopleList:[{
					label:"林工",
					value:"lin"
				},{
					label:"李工",
					value:"lin"
				},{
					label:"陈工",
					value:"lin"
				},{
					label:"张工",
					value:"lin"
				}],
				allChecked:false,
				checked:false,
				leftValue:"all",
				leftSelectList:[{
					label:"全部",
					value:"all",
				},{
					label:"已指派",
					value:"assigned",
				},{
					label:"未指派",
					value:"unassigned",
				}],
				rightValue:""
			}
		},
		mixins:[MescrollMixin],
		components:{pickerGroup},
		onLoad() {
			this.rightValue = this.$u.timeFormat(new Date().getTime(),'yyyy-mm');
		},
		methods: {
			// 全选
			allCheckChangeFn(e){
				console.log(e,"eecccaaa");
				if (e.value) {
					this.projectServeList.forEach((item)=>{
						item.checkFlag = true;
					})
				} else{
					this.projectServeList.forEach((item)=>{
						item.checkFlag = false;
					})
				}
				
			},
			goAddMaintenancePeople(){
				uni.navigateTo({
					url:"./addMaintenancePeople"
				})
			},
			onLeftConfirmFn(e){
				console.log(e,"ee");
			},
			onDateChangeFn(e){
				console.log(e,"e11e");
			}
		}
	}
</script>
