<style lang='scss' scoped>
.lineRoadList{
	width: 100%;
	/* height: 100%; */
	background-color: #F9F9F9;
	:not(not) {
		box-sizing: border-box;
	}
	&-header{
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		padding-left: 40rpx;
		padding-right: 20rpx;
		&-allpick{
			margin-left: 20rpx;
			display: flex;
			align-items: center;
		}
	}
	&-info-list{
		background-color: #F9F9F9;
		padding: $paddingTB $paddingLR;
	}
	&-info-box{
		width: 100%;
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
		box-shadow: $box-shadow;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		&-msg{
			padding: 20rpx;
			/* border-bottom: 2px dotted #A1A1A1; */
			border-bottom: 1px dashed #A1A1A1;
			position: relative;
		}
		.box-checkbox{
			position: absolute;
			right: -16rpx;
			top: 14rpx;
			z-index: 10;
		}
		.box-detail-btn{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
		.box-left-line{
			width: 20rpx;
			height: 100%;
			background: #93CDFC;
		}
		&-msg-row{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.msg-row-icon{
				border-radius: $uni-border-radius-circle;
				/* padding: 10rpx; */
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $main-color;
			}
			.msg-row-text{
				color: #000;
			}	
		}
		&-bottom{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
	}
	.lineRode-info{
		padding: 70rpx 30rpx 40rpx 30rpx;
		&-row{
			padding-bottom: 20rpx;
			&:last-child{
				padding-bottom: 0;
			}
		}
	}
	&-bottom{
		width: 100%;
		height: 100rpx;
		background: #1C9AFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
	}
}

</style>
<style>
	.u-checkbox__label{
		margin-right: 0;
	}
</style>
<template>
	<view class="lineRoadList">
		<u-sticky>
			<view class="lineRoadList-header" :style="{height:dropdownIsOpen?'100%':''}">
				<u-dropdown @open="onOpenFn" @close="onCloseFn">
					<u-dropdown-item v-model="value1" title="筛选" :options="options1"></u-dropdown-item>
				</u-dropdown>
				<u-search placeholder="输入设备号搜索" v-model="searchValue" :show-action="false" @search="search"></u-search>
				<view class="lineRoadList-header-allpick">
					<text class="pr20">全选</text>
					<u-checkbox v-model="allChecked" @change="onAllCheckChangeFn"></u-checkbox>
				</view>
			</view>
		</u-sticky>
		<view class="lineRoadList-info-list">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="lineRoadList-info-box" v-for="(item,index) in lineRoadList" :key="index" >
					<view class="lineRoadList-info-box-msg">
						<view class="box-detail-btn" @click="openReadInfoFn(item)">
							查看详情
						</view>
						<u-checkbox class="box-checkbox" v-model="item.checkedFlag" @change="boxCheckChangeFn"></u-checkbox>
						<view class="box-left-line"></view>
						<view class="lineRoadList-info-box-msg-row">
							<view class="msg-row-icon">
								<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
							</view>
							<text class="msg-row-text pl20">项目：{{item.name}}</text>
						</view>
						<view class="lineRoadList-info-box-msg-row">
							<view class="msg-row-icon">
								<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
							</view>
							<text class="msg-row-text pl20">地点：{{item.address}}</text>
						</view>
						<view class="lineRoadList-info-box-msg-row">
							<view class="msg-row-icon">
								<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
							</view>
							<text class="msg-row-text pl20">线路：总线已通</text>
						</view>
					</view>
					<view class="lineRoadList-info-box-bottom">
						<text>时间：2020年12月2日14:01:21</text>
						<text>设备状态：在线</text>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view class="lineRoadList-bottom">
			<u-button size="medium" shape="circle" @click="batchClosingFn">批量合闸</u-button>
			<u-button size="medium" shape="circle" @click="batchOpeningFn">批量分闸</u-button>
		</view>
		<u-popup v-model="infoShowFlag" mode="center" :closeable="true" border-radius="16">
			<view class="lineRode-info">
				<view class="lineRode-info-row">项目：上海德润谷云物联科技有限公司集团公司</view>
				<view class="lineRode-info-row">地点：A区 18栋 高新产业园</view>
				<view class="lineRode-info-row">设备号：HCWL-1250213001</view>
				<view class="lineRode-info-row">设备状态：在线</view>
				<view class="lineRode-info-row">线路：总路</view>
				<view class="lineRode-info-row">线路状态：已通</view>
				<view class="lineRode-info-row">分/合闸时间：2020-11-17 16:38:30</view>
			</view>
		</u-popup>
		<u-modal v-model="batchModelShow" title="温馨提示" :show-cancel-button="true" :content="batchModelContent"></u-modal>

	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				currentBtnFlagStr:"",
				batchModelContent:"",
				batchModelShow:false,
				searchValue:"",
				allChecked:false,
				value1:1,
				infoShowFlag:false,
				lineRoadList:[{
					checkedFlag:false,
					name:'上海德润谷云物联科技有限公司',
					address:"A区18栋高新产业园",
					totalLineFlag:true
				},{
					checkedFlag:false,
					name:'上海德润谷云物联科技有限公司',
					address:"A区18栋高新产业园",
					totalLineFlag:true
				}],
				options1: [{
						label: '全部',
						value: 1,
					},
					{
						label: '合闸',
						value: 2,
					},
					{
						label: '分闸',
						value: 3,
					}
				],
				dropdownIsOpen:false,
				
			}
		},
		mixins:[MescrollMixin],
		onLoad() {},
		methods: {
			btnActionFn(){
				this.batchModelContent = this.currentBtnFlagStr==="open"?"您确定批量分闸吗":"您确定批量合闸吗";
				this.batchModelShow = true;
				let arr = this.lineRoadList.filter((item)=>{
					return !!item.checkedFlag;
				})
				console.log(arr,"arr");
			},
			batchClosingFn(){
				this.currentBtnFlagStr = "close";
				this.btnActionFn();
			},
			batchOpeningFn(){
				this.currentBtnFlagStr = "open";
				this.btnActionFn();
			},
			checkStopFn(){
				console.log("???");
			},
			onAllCheckChangeFn(e){
				console.log(e);
				this.lineRoadList.forEach((item)=>{
					item.checkedFlag = e.value; 
				})
			},
			boxCheckChangeFn(e){
				// setTimeout(()=>{
				// 	let pickArr = this.lineRoadList.filter((item)=>{
				// 		return !!item.checkedFlag;
				// 	})
				// 	if(pickArr.length == this.lineRoadList.length){
				// 		this.allChecked = true;
				// 	}
				// },200)
			},
			openReadInfoFn(obj){
				this.infoShowFlag = true;
			},
			// 
			
			onOpenFn(e){
				console.log(e,"e");
				this.dropdownIsOpen = true;
			},
			onCloseFn(e){
				console.log(e,"e1111");
				this.dropdownIsOpen = false;
			}
		}
	}
</script>
