<template>
	<custom-nav-bar :left="true" title="气象站"></custom-nav-bar>
	<view class="page">
		<uni-row style="height: 30px;">
			<uni-col :span="24" >
				<u-button text="历史" type="info"
					style="height: 30px;width: 60px;margin-bottom: 2px;margin-top: 2px;float: right;margin-right: 5px;" @click="openH(item)"></u-button>
			</uni-col>
		</uni-row>
		<uni-row class="rowstyle">
			<view class="rowview">
				<uni-col :span="6">
					<u-icon label="风力:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/qxzfj.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.wc===null?"--":itemProperty.wc}}级
					</view>
				</uni-col>
				<uni-col :span="6" >
					<u-icon label="风速:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/header-fengsu.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.ws===null?"--":itemProperty.ws}}m/s
					</view>
				</uni-col>
			</view>
		</uni-row>
		<uni-row class="rowstyle">
			<view class="rowview">
				<uni-col :span="6" >
					<u-icon label="风向:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/header-fengxiang.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.wd===null?"--":itemProperty.wd}}
					</view>
				</uni-col>
				<uni-col :span="6">
					<u-icon label="大气压力:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/header-daqiyali.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.p===null?"--":itemProperty.p}}hpa
					</view>
				</uni-col>
			</view>
		</uni-row>
		<uni-row class="rowstyle">
			<view class="rowview">
				<uni-col :span="6" >
					<u-icon label="温度:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/header-wendu.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.t===null?"--":itemProperty.t}}℃
					</view>
				</uni-col>
				<uni-col :span="6" >
					<u-icon label="湿度:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/header-shidu.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.h===null?"--":itemProperty.h}}%
					</view>
				</uni-col>
			</view>
		</uni-row>
		<uni-row class="rowstyle">
			<view class="rowview" >
				<uni-col :span="6">
					<u-icon label="当前雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/qxzylc.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.rt===null?"--":itemProperty.rt}}mm
					</view>
				</uni-col>
				<uni-col :span="6">
					<u-icon label="瞬时雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/qxzdqyl.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.ri===null?"--":itemProperty.ri}}mm
					</view>
				</uni-col>
			</view>
		</uni-row>
		<uni-row class="rowstyle">
			<view class="rowview" >
				<uni-col :span="6">
					<u-icon label="累计雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/qxzljjyl.png"></u-icon>
				</uni-col>
				<uni-col :span="6">
					<view class="valuecol">
						{{itemProperty.r===null?"--":itemProperty.r}}mm
					</view>
				</uni-col>
				<uni-col :span="6">
					<u-icon label="设备状态:" labelPos="right" label-color="white" size="30" labelSize="10"
						name="../../static/images/head/sbzt.png"></u-icon>
				</uni-col>
				<uni-col :span="6" >
					<view class="valuecol">
						{{itemProperty.s =="online"?"在线":"离线" }}
					</view>
				</uni-col>
			</view>
		</uni-row>
		<u-popup :show="showDeviceLog" mode="center">
			<view class="dialog-container">
				<view class="dialog-title">
					<text>气象站历史记录</text>
					<u-icon name="reload" size="20" class="reload-btn" @click="reload"></u-icon>
					<u-icon name="close" size="20" class="close-btn" @click="closeLog"></u-icon>
				</view>
				<view class="dialog-body">
					<view class="logs-data-box" style="width:90vw">
						<view class="logs-container">
							<view class="logs-item" v-for="itemHistory in listData" :key="item.id">
								<view class="row">
									<view class="left">
										<text class="label">设备编号：</text>
										<text class="text">{{ itemHistory.deviceCode }}</text>
									</view>
									<view class="right">
										<text class="label">温度：</text>
										<text class="text">{{ itemHistory.temperature }}℃</text>
									</view>
								</view>
								<view class="row">
									<view class="left">
										<text class="label">湿度：</text>
										<text class="text">{{ itemHistory.humidity}}%</text>
									</view>
									<view class="right">
										<text class="label">大气压力：</text>
										<text class="text">{{ itemHistory.pressure }}kPa</text>
									</view>
								</view>
								<view class="row">
									<view class="left">
										<text class="label">风级：</text>
										<text class="text">{{ itemHistory.windClass}}级</text>
									</view>
									<view class="right">
										<text class="label">风向：</text>
										<text class="text">{{ itemHistory.windDirection }}kPa</text>
									</view>
								</view>
								<view class="row">
									<view class="left">
										<text class="label">当前雨量：</text>
										<text class="text">{{ itemHistory.rainCurrent}}级</text>
									</view>
									<view class="right">
										<text class="label">累计雨量：</text>
										<text class="text">{{ itemHistory.rainFall }}kPa</text>
									</view>
								</view>
								<view class="row">
									<view class="full-line">
										<text class="label">记录时间：</text>
										<text class="text">{{ itemHistory.createTime }}</text>
									</view>
								</view>
							</view>
						</view>
						<uni-pagination :pageCount="query.pageSize" :curPageNum="query.pageNum" :totalNum="total" @pageClick="pageTurning"></uni-pagination>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script >
	import {
		getOutDeviceHistoryList
	} from "@/api/system/device_agricultural"
	export default {
		data() {
			return {
				item: {},
				itemProperty: {},
				showDeviceLog: false,
				total: 0,
				listData: [],
				query: {
					pageNum: 1,
					pageSize: 10,
					deviceCode: null
				},
				mqttConnected: false, //	mqtt链接状态
				topics: []
			}
		},
		onLoad(option) {
			if (option.item != null) {
				this.item = JSON.parse(decodeURIComponent(option.item));
				if (this.item) {
					this.itemProperty = this.item.deviceData;
					this.query.deviceCode = this.item.deviceCode;
					let topic = "jsy/iot/push/outProduct/" + this.item.deviceCode;
					this.topics.push(topic);
					this.mqttSubscribes(this.topics);
					getApp().on("mqtt", "mqtt_head", function(e) {
						if (e.type == "state") {
							this.mqttConnected = e.connected;
						} else if (e.type == "msg") {
							this.itemProperty = e.data;
						}
					});
				}
			}
		},
		onUnload() {
			getApp().off("mqtt", "mqtt_head");
		},
		methods: {
			mqttSubscribes(topics) {
				getApp().mqttSubscribes(topics);
			},
			mqttUnSubscribes(topics) {
				getApp().mqttUnsubscribes(topics);
			},
			queryList(str) {
				if (str == "into") {
					this.query.pageNum = 1;
				}
				if (str == "pre") {
					this.query.pageNum = this.query.pageNum - 1
				}
				if (str == "next") {
					this.query.pageNum = this.query.query.pageNum + 1
				}
				getOutDeviceHistoryList(this.query).then(res => {
					this.listData = res.rows;
					this.total = res.total;
				})
			},
			//打开历史界面
			openH(item) {
				this.showDeviceLog = true
				this.queryList("into");
			},
			reload() {
				uni.$emit("reloadlogs")
			},
			//关闭历史记录
			closeLog() {
				this.showDeviceLog = false;
			},
			pageTurning(flag) {
				if (flag === 0) {
					if (this.query.pageNum - 1 === 0) return
					this.queryList("pre")
				}
				if (flag === 1) {
					if (this.query.pageNum + 1 > Math.ceil(this.total / this.query.pageSize)) return
					this.queryList("next")
				}
	
			}
		}
	}
</script>

<style lang="scss">
	.page{
		background-color:cadetblue;
		height: 1200px;
		width: 100%;
	}
	.uni-page-head {
		display: none
	}

	.demo-uni-col {
		height: 32px;
		border-radius: 2px;
	}

	.dark {
		background-color: cadetblue;
	}

	.light {
		background-color: cadetblue;
	}
	.rowstyle{
		height: 60px;
		left: 10px;
		
	}

	.rowview {
		margin-top: 5px;
		height: 100%;
		width: 100%;
		line-height: 60px;
	}

	.valuecol {
		height: 80%;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: left;
		line-height: 28px;
		font-size: 10px;
		// border: 1px solid black;
		width: 95%;
		// background-color: white;
		color: white;
	}
	
	// 弹窗
	.dialog-container {
		width: 90vw;
		height: 90vh;
		overflow: hidden;
		.dialog-title {
			width: 100%;
			height: 34px;
			font-size: 16px;
			line-height: 34px;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #999;
			position: relative;
			.reload-btn {
				position: absolute;
				top: 50%;
				right: 56px;
				transform: translateY(-50%);
			}
			.close-btn {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
			}
		}
		.dialog-body {
			height: calc(100% - 35px);
			overflow: hidden;
			position: relative;
			background-color: #f7f7f7;
			//扫码的弹窗
			.scancode-device-info {
				height: 100%;
				padding: 0 20px;
				overflow-x: hidden;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				& > view {
					width: 100%;
					line-height: 40px;
					font-size: 18px;
					color: gray;
					.label {
						display: inline-block;
						width: 30%;
						color: black;
						margin-right: 2px;
						white-space: nowrap;
					}
				}
			}
		}
		.control-panel {
			height: 100px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			& > view {
				padding: 6px 10px;
				color: #007acc;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
		}
	}
</style>