<style lang='scss' scoped>
.iotBreaker{
	width: 100%;
	background-color: #F9F9F9;
	:not(not) {
		box-sizing: border-box;
	}
	&-header{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}
	&-search-ctn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $paddingTB $paddingLR;
	}
	&-search{
		width: calc(100% - 300rpx);
	}
	&-search-btn{
		width: 110rpx;
		color: #fff;
		padding: 6rpx 10rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		background-color: #1C9AFF;
	}
	&-search-picker{
		width: 140rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&-facility-list{
		padding: $paddingTB $paddingLR;
		/* background-color: #F9F9F9; */
	}
	&-facility-box{
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
		&-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
		&-content{
			display: flex;
			width: 100%;
		}
		&-img{
			padding: 20rpx;
		}
	}
	&-facility-box-info{
		width: calc(100% - 200rpx);
		padding-top: 20rpx;
		font-size: 26rpx;
		.row{
			padding-bottom: 20rpx;
			&-label{
				color: $uni-text-color-grey;
			}
			&-value{
				font-weight: 550;
			}
		}
		.status{
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			color: #666;
			
		}
	}
}
</style>
<template>
	<view class="iotBreaker">
		<view class="iotBreaker-header" :style="{height:isShowDropdown?'100%':''}">
			<u-dropdown @open="isShowDropdown = true" @close="isShowDropdown = false">
				<!-- <u-dropdown-item v-model="value1" title="设备" :options="options1" @change="modelOnchageFn"></u-dropdown-item> -->
				<u-dropdown-item v-model="value2" title="楼栋" :options="buildingOptions" @change="buildingOnchageFn"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="单元" :options="unitOptions" @change="unitOnchageFn"></u-dropdown-item>
			</u-dropdown>
			<view class="iotBreaker-search-ctn">
				<view class="iotBreaker-search-picker" @click="stateShowFlag = true">
					<text>{{selectLabel}}</text>
					<u-icon class="pl20" name="arrow-down"></u-icon>
				</view>
				<u-search @search="onSearchFn" class="iotBreaker-search" placeholder="输入设备号或房号搜索" v-model="searchValue" :show-action="false"></u-search>
				<view class="iotBreaker-search-btn" @click="goLineRoadNamingFn">
					线路取名功率限定
				</view>
			</view>
		</view>
		<mescroll-body top="184" ref="mescrollRef" bottom="10" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="iotBreaker-facility-list">
				<view class="iotBreaker-facility-box" v-for="(item,index) in facilityList" :key="index" @click="goDeviceDetailFn(item)">
					<view class="iotBreaker-facility-box-title">
						<view class="">
							<!-- 
							 {
							 	value: 'ONLINE',
							 	label: '在线'
							 },
							 {
							 	value: 'OFFLINE',
							 	label: '离线'
							 },
							 {
							 	value: 'UNACTIVE',
							 	label: '未激活'
							 }
							 -->
							<tuiIcon :name="item.deviceState=='OFFLINE'?'lixian2':item.deviceState=='ONLINE'?'zaixian':'lixian3'" :color="item.deviceState=='OFFLINE'?'#FF3838':item.deviceState=='ONLINE'?'#289A00':'#F6970A'" size="28"></tuiIcon>
							<text class="pl10" :style="{color:item.deviceState=='OFFLINE'?'#FF3838':item.deviceState=='ONLINE'?'#289A00':'#F6970A'}">{{item.deviceState=='UNACTIVE'?'未激活':item.deviceState=='ONLINE'?'在线':'离线'}}</text>
						</view>
						<view style="font-weight: 550;">线路数：1</view>
					</view>
					<view class="iotBreaker-facility-box-content">
						<u-image
							class="iotBreaker-facility-box-img"
							width="160"
							height="160"
							:src="(item.deviceImage && item.deviceImage !== '') ?
							$tools.getIotFileUrl(item.deviceImage) :
							'http://static.drgyen.com/app/hc-app-power/images/switch.png'"
						></u-image>
						<view class="iotBreaker-facility-box-info">
							<view class="row">
								<text class="row-label">设备号：</text>
								<text class="row-value">{{item.deviceKey}}</text>
							</view>
							<view class="row">
								<text class="row-label">设备：</text>
								<text class="row-value">{{item.deviceTypeName}}</text>
							</view>
							<view class="row">
								<text class="row-label">地址：</text>
								<text class="row-value">{{item.deviceAddr}}</text>
							</view>
							<view class="status">
								<text class="pl10">{{item.deviceAlarmStatus ? '正常' : '报警'}}</text>
								<tuiIcon name="baojingjilu"></tuiIcon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-select v-model="stateShowFlag" :list="selectList" @confirm="selectConfirmFn"></u-select>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				value1:"iotbreaker",
				value2:"",
				value3:"",
				selectLabel:"全部",
				selectValue:"",
				isShowDropdown:false,
				selectList:[{
						value: '',
						label: '全部'
					},
					{
						value: 'ONLINE',
						label: '在线'
					},
					{
						value: 'OFFLINE',
						label: '离线'
					},
					{
						value: 'UNACTIVE',
						label: '未激活'
					},
				],
				// options1: [
				// 	{
				// 		label: '物联网断路器',
				// 		value: "iotbreaker"
				// 	},
				// 	{
				// 		label: '电气火灾',
				// 		value: "dqhz"
				// 	},
				// 	{
				// 		label: '水位水压',
				// 		value: "swsy"
				// 	},{
				// 		label: "烟雾、可燃气体",
				// 		value: "ywtcq"
				// 	}
				// ],
				stateShowFlag:false,
				projectId:"",
				buildingOptions: [],
				unitOptions: [],
				searchValue: '',
				spaceActionId:"",
				facilityList:null // 设备列表
			}
		},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.projectId = e.projectId;
			this.getbuildingOptListFn();
		},
		methods: {
			goLineRoadNamingFn(){
				uni.navigateTo({
					url:"./lineRoadNaming"
				})
			},
			goDeviceDetailFn(item){
				uni.navigateTo({
					url: `../../home/wisdomElectricity/electricityDetail?deviceId=${item.deviceId}`
				})
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				console.log(page,"page");
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					pageSize:pageSize,
					pageNum:pageNum,
					projectId:this.projectId,
					deviceSpace:this.searchValue, // 设备号或者架构名称
					deviceState:this.selectValue, // 设备状态(1:'未激活', 2:'在线', 3:'离线'),可用值:UNACTIVE,ONLINE,OFFLINE
					modelCode:"iotbreaker",
					spaceId:this.spaceActionId,
					// projectName:this.searchValue
					// projectId:this.projectIdVal,
					// deviceState:this.screeningValue,
				}
				this.$get("/app/device/table",obj).then((res)=>{
					console.log(res,"ressssssssssss");
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						if(pageNum == 1) this.facilityList = []; //如果是第一页需手动置空列表
						this.facilityList = this.facilityList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.facilityList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				}).finally(()=>{
					// this.dropdownIsOpen = false;
				})
			},
			onSearchFn(){
				this.mescroll.resetUpScroll();
			},
			selectConfirmFn(e){
				console.log(e,"e");
				this.selectLabel = e[0].label;
				this.selectValue = e[0].value;
				this.mescroll.resetUpScroll();
			},
			modelOnchageFn(){
				this.mescroll.resetUpScroll();
			},
			unitOnchageFn(e){
				this.spaceActionId = e;
				this.mescroll.resetUpScroll();
			},
			buildingOnchageFn(e){
				console.log(e,"e");
				this.spaceActionId = e;
				if(!!e){
					this.$get("/app/project/space",{projectId:this.projectId,spaceId:e}).then((res)=>{
						this.unitOptions = res.data.map((item)=>{
							return {
								label: item.spaceName,
								value: item.spaceId
							}
						});
					})
				} else{
					this.unitOptions = [];
				}
				this.mescroll.resetUpScroll();
			},
			getbuildingOptListFn(){
				this.$get("/app/project/space",{projectId:this.projectId,spaceId:0}).then((res)=>{
					this.buildingOptions = res.data.map((item)=>{
						return {
							label: item.spaceName,
							value: item.spaceId
						}
					});
					this.buildingOptions.unshift({
						label:"全部",
						value:""
					})
				})
			}
		}
	}
</script>
