<template>
	<view class="uni-container">
		<view style="background-color: white;">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<uni-row class="demo-uni-row">
						<uni-col :span="8">
							<image :src="iconList[0]" style="width: 75upx;height: 75upx;margin: 20upx auto"></image>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col" style="margin-top: 20upx;">设备在线：</view>
							<view class="demo-uni-col" style="color: deepskyblue;font-size: 36upx;font-weight: bold;">{{devInfo.onNum}}</view>
						</uni-col>
					</uni-row>
				</uni-col>
				<uni-col :span="12">
					<uni-row class="demo-uni-row">
						<uni-col :span="8">
							<image :src="iconList[1]" style="width: 75upx;height: 75upx;margin: 20upx auto"></image>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col" style="margin-top: 20upx;">设备离线：</view>
							<view class="demo-uni-col" style="color: deepskyblue;font-size: 36upx;font-weight: bold;">{{devInfo.offNum}}</view>
						</uni-col>
					</uni-row>
				</uni-col>
			</uni-row>
			<uni-search-bar v-model="query.name" class="uni-mt-10 margin0" radius="5" placeholder="输入设备名查询" clearButton="auto"
				cancelButton="none" @confirm="loadData" />
		</view>
		<uni-card v-for="(item,index) in dataList" :title="item.name" :key='index' :isFull="true"
			:sub-title="'检测项：'+item.item" :extra="'检测值：'+item.data" :thumbnail="incoDic[item.item]">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="demo-uni-col">监测时间：</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col">{{item.time}}</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<view v-if="!dataList.length" style="text-align:center;margin-top:55upx;color:#999;font-weight:bolder;">未查询的传感器数据</view>
	</view>
</template>
<script>
	import online from '@/icon/online.png'
	import offline from '@/icon/offline.png'
	import m1 from '@/icon/m1.png'
	import m2 from '@/icon/m2.png'
	import m3 from '@/icon/m3.png'
	import m4 from '@/icon/m4.png'
	import m5 from '@/icon/m5.png'
	import m6 from '@/icon/m6.png'
	import m7 from '@/icon/m7.png'
	import m8 from '@/icon/m8.png'
	export default {
		data() {
			return {
				iconList: [online, offline],
				incoDic: {
					'光照': m1,
					'光照2': m1,
					'雨雪': m2,
					'土壤温度': m3,
					'温度': m3,
					'温度2': m3,
					'土壤湿度': m4,
					'湿度': m4,
					'湿度2': m4,
					'风速': m5,
					'风向': m6,
					'二氧化碳': m7,
					'TSP': m8
				},
				query: {
					name: ''
				},
				page: 0,
				pageSize: 10,
				devInfo: {
					onNum: 26,
					offNum: 13,
				},
				dataList: []
			}
		},
		onShow() {
			this.loadData()
		},
		onReachBottom() {
			this.pageSize += 10
			this.loadData()
		},
		methods: {
			loadData() {
				const currProInfo = JSON.parse(uni.getStorageSync('currProInfo'))
				uni.setNavigationBarTitle({
					title: `实时监测-${currProInfo.text}`
				})
				
				this.$API.call({
					url: '/api/nowData/loadNowDataByUserid',
					data:{
						page: this.page,
						pageSize: this.pageSize,
						deviceName: this.query.name||'',
						proId: currProInfo.value
					},
					cb: (res) => {
						const data = res.data
						this.dataList = data.dataList
						this.devInfo.offNum = data.offlineNumbers
						this.devInfo.onNum = data.onlineNumbers
					}
				})
			},
		}
	}
</script>

<style scoped>
	@import '../../../common/uni-nvue.css';

	.margin0 {
		margin: 0;
	}

	.scroll-view {
		width: 100vw;
		height: 45vh;
		overflow: hidden;
		white-space: nowrap;
	}

	.view {
		display: inline-block;
	}
</style>
