<style lang="scss" scoped>
.wisdomElectricity{
	width: 100%;
	height: 100%;
	background-color: #F9F9F9;
	:not(not) {
		box-sizing: border-box;
	}
	&-dropdown{
		// position: fixed;
		// left: 0;
		// top: 0;
		background-color: #fff;
		// width: 100%;
		// z-index: 999;
	}
	// &-content{
	// 	height: calc(100% - 184rpx);
	// 	overflow: auto;
	// }
	&-device-list{
		padding: 20rpx $paddingLR;
	}
	&-search{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx $paddingLR;
		&-input{
			// width: calc(100% - 180rpx);
			width: 100%;
		}
		&-btn{
			width: 140rpx;
		}
	}
	.wisdomElectricity-device-box{
		box-shadow: $box-shadow;
		background-color: #fff;
		display: flex;
		width: 100%;
		// height: 220rpx;
		border-radius: $uni-border-radius-lg;
		position: relative;
		margin-bottom: 20rpx;
		.device-state{
			position: absolute;
			right: 1rpx;
			top: 10rpx;
		}
		.device-img{
			width: 220rpx;
			padding: 30rpx;
		}
		.device-info{
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: center;
			padding: 60rpx 0;
			padding-left: 0;
			width: calc(100% - 220rpx);
			&-title{
				width: 100%;
				// padding-top: 62rpx;
				padding-bottom: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			&-number{
				width: 100%;
				color: #999;
			}
		}
	}
	
}
</style>

<template>
	<view class="wisdomElectricity">
		<!-- <u-navbar back-text="返回" title="全部" background="#1c9aff">
			<view class="navbar-right" slot="right">
				<view class="message-box right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="dot-box right-item">
					<u-icon name="calendar-fill" size="38"></u-icon>
					<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
				</view>
			</view>
		</u-navbar> -->
		<view class="wisdomElectricity-dropdown" :style="{height:dropdownIsOpen?'100%':''}">
			<u-dropdown :border-bottom="true" @open="onOpenFn" @close="onCloseFn">
				<u-dropdown-item height="520rpx" v-model="projectIdVal" title="请选择项目" :options="pickProjectOptions" @change="pickProjectOnChangeFn"></u-dropdown-item>
				<u-dropdown-item v-model="screeningValue" title="筛选" :options="screeningOptions" @change="screeningOnChangeFn"></u-dropdown-item>
			</u-dropdown>
			<view class="wisdomElectricity-search">
				<u-search class="wisdomElectricity-search-input" placeholder="输入设备号搜索" @change="searchOnchangeFn" shape="square" :show-action="false" v-model="searchValue"></u-search>
				<!-- <u-button class="wisdomElectricity-search-btn" type="primary" size="mini" @click="goLineRoadListFn">线路列表</u-button> -->
			</view>
		</view>
		<!-- <view class="wisdomElectricity-content"> -->
		<view class="wisdomElectricity-device-list">
			<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="wisdomElectricity-device-box" v-for="(item,index) in deviceList" :key="index" @click="goElectricityDetailFn(item)">
					<view class="device-img" v-if="item.deviceImage">
						<u-image width="100%" height="100%" :src="$tools.getIotFileUrl(item.deviceImage)"></u-image>
					</view>
					<view class="device-img" v-else>
						<u-image width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
					</view>
					<view class="device-info">
						<view class="device-info-title">{{item.deviceName}}</view>
						<view class="device-info-number ellipsis">{{item.deviceKey}}</view>
					</view>
					<u-tag :text="item.deviceState=='OFFLINE'?'离线':item.deviceState=='ONLINE'?'在线':'脱线'" mode="dark" class="device-state"
					:type="item.deviceState=='OFFLINE'?'warning':item.deviceState=='ONLINE'?'success':'info'" shape="circleLeft" />
				</view>
			</mescroll-body>
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default{
		data(){
			return {
				dropdownIsOpen:false,
				searchValue:"",
				projectIdVal: "",
				screeningValue: "",
				pickProjectOptions: [],
				screeningOptions: [{
						label: '全部',
						value: "",
					},{
						label: '未激活',
						value: "UNACTIVE",
					},{
						label: '在线',
						value: "ONLINE",
					},{
						label: '离线',
						value: "OFFLINE",
					}
				],
				deviceList:[],
				// deviceList:[{
				// 	deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
				// 	deviceName:"设备1",
				// 	deviceId:"HCWL11111111111",
				// 	deviceState:"在线",
				// 	projectId:"123"
				// },{
				// 	deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
				// 	deviceName:"设备2",
				// 	deviceId:"HCWL6666666666",
				// 	deviceState:2,
				// 	projectId:"321"
				// }],
			}
		},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.getProjectListFn();
			if(e.deviceState){
				this.screeningValue = e.deviceState;
				this.mescroll.resetUpScroll();
			}
		},
		methods:{
			searchOnchangeFn(){
				this.mescroll.resetUpScroll();
			},
			getProjectListFn(){
				this.$get('/app/project/list',).then((res)=>{
					console.log(res,"Resssss");
					if (res.data && res.data.length>0) {
						this.pickProjectOptions = res.data.map((item)=>{
							return {
								label:item.projectName,
								value:item.projectId
							}
						})
						this.pickProjectOptions.unshift({
							label:"全部",
							value:""
						})
					} 
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// this.mescroll.endErr();
				// return;
				// console.log(page,"page");
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					pageSize:pageSize,
					pageNum:pageNum,
					projectId:this.projectIdVal,
					deviceState:this.screeningValue,
					deviceName:this.searchValue,
					deviceTypes:"GATEWAY_CONTROLLER"
				}
				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.deviceList = []; //如果是第一页需手动置空列表
						this.deviceList = this.deviceList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.deviceList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.mescroll.showEmpty();
				}).finally(()=>{
					this.dropdownIsOpen = false;
				})
			},
			// 跳转设备详情
			goElectricityDetailFn(item){
				uni.navigateTo({
					url:`./electricityDetail?deviceId=${item.deviceId}`
				})
			},
			
			onOpenFn(e){
				this.dropdownIsOpen = true;
			},
			onCloseFn(){
				this.dropdownIsOpen = false;
			},
			pickProjectOnChangeFn(e){
				this.dropdownIsOpen = true;
				this.mescroll.resetUpScroll()
			},
			screeningOnChangeFn(e){
				this.dropdownIsOpen = true;
				this.mescroll.resetUpScroll()
			},
			// 跳转线路列表
			goLineRoadListFn(){
				uni.navigateTo({
					url:"./lineRoadList"
				})
			}
		}
	}
</script>
