<style lang='scss' scoped>
.device{
	width: 100%;
	height: 100%;
	background-color: #F9F9F9;
	&-header{
		width: 100%;
		background-color: #fff;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	&-header-picker{
		display: flex;
		align-items: center;
		
		background-color: rgba(256,256,256,0.1);
		padding: $paddingTB $paddingLR;
	}
	&-list{
		width: 100%;
		padding: $paddingTB 30rpx;
	}
	&-box{
		width: 100%;
		border: 10rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: $box-shadow;
		padding: 20rpx;
		display: flex;
		margin-bottom: 30rpx;
		&-info{
			font-size: 24rpx;
			&-name{
				font-size: $uni-font-size-lg;
				font-weight: bold;
				padding-bottom: 20rpx;
			}
		}
		&-state{
			display: flex;
			align-items: center;
			height: 42rpx;
			&-icon{
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #00DD00;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
<template>
	<view class="device">
		<view class="device-header">
			<view class="device-header-picker flex-between" @click="projectPickShow = true">
				<view class="">
					<tuiIcon name="xiangmu" class="pr10" color="#1C9AFF"></tuiIcon>
					<text>德润智慧园区项目</text>
				</view>
				<u-icon size="22" name="arrow-down-fill" color="#ccc"></u-icon>
			</view>
		</view>
		<mescroll-body top="80" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="device-list">
				<view class="device-box" v-for="(item,index) in 4" :key="index" @click="goDetailFn(item)">
					<view class="device-box-img pr20">
						<u-image width="160" height="180" src=http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/device.jpg"></u-image>
					</view>
					<view class="device-box-info">
						<view class="device-box-info-name">A区饮水间</view>
						<view class="device-box-info-id pb10">
							<text class="text--base--grey">水表编号：</text>
							<text>20210120173218F01</text>
						</view>
						<view class="device-box-info-waterValue">
							<text class="text--base--grey">总用水量：</text>
							<text>125t</text>
						</view>
					</view>
					<view class="device-box-state">
						<view class="device-box-state-icon"></view>
						<view class="device-box-state-text">在线</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		data() {
			return {
				projectPickShow:false,
				projectPickList:[{
					label:"德润智慧园区项目",
					value:"hcwl"
				}],
			}
		},
		mixins:[MescrollMixin],
		onLoad() {},
		methods: {
			goDetailFn(item){
				uni.navigateTo({
					url:"./deviceDetail"
				})
			}
		}
	}
</script>
