<template>
	<!-- <custom-nav-bar :left="true" title="首部"></custom-nav-bar> -->
	<view>
		<uni-row style="background-color:cadetblue;height: 40px;">
			<uni-col :span="2">
				<u-icon name="arrow-left" size="18" @click="onClosePage"
					style="margin-left: 20px;margin-top: 14px;"></u-icon>
			</uni-col>
			<uni-col :span="12">
				<view class="demo-uni-col dark"
					style="color: white;text-align: left ;margin-right: 3px;font-weight: 400;font-size: 20px;margin-top: 10px;">
					{{datestr}}
				</view>
			</uni-col>
			<uni-col :span="8">
				<view class="demo-uni-col dark"
					style="color: white;text-align: right;margin-right: 3px;font-weight: 400;font-size: 20px;margin-top: 10px;">
					{{timestr}}
				</view>
			</uni-col>
		</uni-row>
		<uni-row style="background-color:cadetblue;height: 120px;color: white;">
			<view style="margin-top: 3px;height: 100%;width: 100%;">
				<uni-col :span="11" style="border: 1px solid white;margin-right: 5px;margin-left: 5px;">
					<uni-row style="height: 30px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
								水泵</view>
						</uni-col>
						<uni-col :span="6" v-if="item.isFertilizer==1">
							<view
								style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
								施肥机</view>
						</uni-col>
						<uni-col :span="6" v-if="item.isBackWash==1">
							<view
								style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
								反冲洗</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 30px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
								状态</view>
						</uni-col>
						<uni-col :span="6">
							<u-icon :label="`${itemProperty&&itemProperty.sc == 1? '启动':'停止'}`" size="32"
								:name="`${itemProperty&&itemProperty.sc == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
								style="text-align: center;"></u-icon>
						</uni-col>
						<uni-col :span="6" v-if="item.isFertilizer==1">
							<u-icon :label="`${itemProperty&&itemProperty.fst == 1? '启动':'停止'}`" size="32"
								:name="`${itemProperty&&itemProperty.fst == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
								style="text-align: center;"></u-icon>
						</uni-col>
						<uni-col :span="6" v-if="item.isBackWash==1">
							<u-icon :label="`${itemProperty&&itemProperty.bws == 1? '启动':'停止'}`" size="32"
								:name="`${itemProperty&&itemProperty.bws == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
								style="text-align: center;"></u-icon>
						</uni-col>
					</uni-row>
					<uni-row style="height: 40px;">
						<uni-col :span="4">
							<uni-row style="height: 50%;">
								<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
									水泵</view>
							</uni-row>
							<uni-row style="height: 50%;">
								<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
									开关</view>
							</uni-row>
						</uni-col>
						<uni-col :span="6">
							<u-button text="开泵" type="success" @click="pump(1)"
								style="height: 27px;width: 80px;margin-top: 6px;margin-right: 5px;"></u-button>
						</uni-col>
						<uni-col :span="6">
							<u-button text="关泵" type="error" @click="pump(0)"
								style="height: 27px;width: 80px;margin-top: 6px;"></u-button>
						</uni-col>
						<uni-col :span="4" v-if="item.testStatus == 0">
							<uni-row style="height: 50%;">
								<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
									电灯</view>
							</uni-row>
							<uni-row style="height: 50%;">
								<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
									开关</view>
							</uni-row>
						</uni-col>
						<uni-col :span="4" v-if="item.testStatus == 0">
							<u-button :text="`${lampFlag == 1? '关灯':'开灯'}`" :type="`${lampFlag == 1? 'success':'info'}`"
								@click="lampOff()" style="height: 27px;width: 80px;margin-top: 6px;"></u-button>
						</uni-col>
					</uni-row>
				</uni-col>
				<uni-col :span="11" style="border: 1px solid white;margin-left: 5px;">
					<uni-row style="height: 30px;">
						<uni-col :span="24" v-if="item.controlMode===1">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
								频率设定</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 30px;">
						<uni-col :span="5" v-if="item.controlMode===1">
							<u-button :type="`${itemProperty&&itemProperty.fl == 1000? 'primary':'info'}`" text="1"
								@click="onRear(1000)" :loading="speeLoading1" :disabled="speedDisabled"
								style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</u-button>
						</uni-col>
						<uni-col :span="5" v-if="item.controlMode===1">
							<u-button :type="`${itemProperty&&itemProperty.fl == 2000? 'primary':'info'}`" text="2"
								@click="onRear(2000)" :loading="speeLoading2" :disabled="speedDisabled"
								style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</u-button>
						</uni-col>
						<uni-col :span="5" v-if="item.controlMode===1">
							<u-button :type="`${itemProperty&&itemProperty.fl == 3000? 'primary':'info'}`" text="3"
								@click="onRear(3000)" :loading="speeLoading3" :disabled="speedDisabled"
								style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</u-button>
						</uni-col>
						<uni-col :span="5" v-if="item.controlMode===1">
							<u-button :type="`${itemProperty&&itemProperty.fl == 4000? 'primary':'info'}`" text="4"
								@click="onRear(4000)" :loading="speeLoading4" :disabled="speedDisabled"
								style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</u-button>
						</uni-col>
						<uni-col :span="4" v-if="item.controlMode===1">
							<u-button :type="`${itemProperty&&itemProperty.fl == 5000? 'primary':'info'}`" text="5"
								@click="onRear(5000)" :loading="speeLoading5" :disabled="speedDisabled"
								style="height:30px;width: 90%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
							</u-button>
						</uni-col>
					</uni-row>
					<uni-row style="height: 40px;">
						<uni-col :span="6" v-if="item.controlMode===1">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 8px;line-height: 25px;font-size: 14px;">
								当前:</view>
						</uni-col>
						<uni-col :span="6" v-if="item.controlMode===1">
							<view class="valuecol" style="margin-top: 8px;">
								{{ (itemProperty&&itemProperty.fl!=null && itemProperty.fl!='') ?   itemProperty.fl/100 :''}}Hz
							</view>
						</uni-col>
					</uni-row>
				</uni-col>
			</view>
		</uni-row>
		<uni-row style="background-color:cadetblue;height: 140px;color: white;">
			<view style="margin-bottom: 3px;height: 100%;width: 100%;">
				<uni-col :span="11" style="border: 1px solid white;margin-right: 5px;margin-left: 5px;">
					<uni-row style="height: 25px;">
						<uni-col :span="24">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电压检测</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电压A:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.va)?itemProperty.va:"-"}}V
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电流A:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{ (itemProperty&&itemProperty.ca)?itemProperty.ca:"-"}}A
							</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电压B:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.vb)?itemProperty.vb:"-"}}V
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电流B:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{ (itemProperty&&itemProperty.cb)?itemProperty.cb:"-"}}A
							</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电压C:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.vc)?itemProperty.vc:"-"}}V
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								电流C:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.cc)?itemProperty.cc:"-"}}A
							</view>
						</uni-col>
					</uni-row>
				</uni-col>
				<uni-col :span="11" style="border: 1px solid white;margin-left: 5px;">
					<uni-row style="height: 25px;">
						<uni-col :span="24">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								流速液位</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								水流:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{itemProperty&&itemProperty.fs == 1 ? "有" : "无"}}
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								压力:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.wip)?itemProperty.wip:"-"}}Mpa
							</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								液位1:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{(itemProperty&&itemProperty.wl)?itemProperty.wl:"-"}}m
							</view>
						</uni-col>
						<uni-col :span="6">
							<view
								style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
								液位2:</view>
						</uni-col>
						<uni-col :span="6">
							<view class="valuecol">
								{{ (itemProperty&&itemProperty.wl2)?itemProperty.wl2:"-"}}m
							</view>
						</uni-col>
					</uni-row>
					<uni-row style="height: 25px;">
					</uni-row>
					<uni-row style="height: 21px;">
					</uni-row>
				</uni-col>
			</view>
		</uni-row>
		<uni-row style="margin-bottom: 3px;background-color:cadetblue;height: 50px;">
			<uni-col :span="7">
				<u-button text="监控画面" type="success"
					style="height: 35px;width: 120px;margin-bottom: 2px;margin-top: 2px;"></u-button>
			</uni-col>
		</uni-row>
	</view>
</template>
<script>
	import {
		controlHeadSwitch
	} from "@/api/controlHeadInterface";
	import store from "@/store"
	export default {
		data() {
			return {
				item: {},
				itemProperty: {},
				timestr: "",
				datestr: "",
				time3: {},
				time4: {},
				Intervalflag: true,
				disabled1: false,
				disabled2: false,
				flValue: 0,
				switchLoading: false,
				speedDisabled: false,
				resValue: -1,
				resSpeedValue: -1,
				resSpeedValue1: -1,
				resSpeedValue2: -1,
				resSpeedValue3: -1,
				resSpeedValue4: -1,
				resSpeedValue5: -1,
				speeLoading1: false,
				speeLoading2: false,
				speeLoading3: false,
				speeLoading4: false,
				speeLoading5: false,
				lampFlag: false,
				mqttshow: false, // h5端手动链接mqtt按钮显示
				mqttConnected: false, //	mqtt链接状态
				user: store.state.user.user,
				topics: []
			}
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary');
			plus.navigator.setFullscreen(true);
			// #endif
			if (options.item != null) {
				this.item = JSON.parse(decodeURIComponent(options.item));
				this.itemProperty = this.item.deviceData;
				this.devicePropertyStatus();
				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;
						this.devicePropertyStatus();
					}
				});
			}
		},
		onUnload() {
			this.mqttUnSubscribes(this.topics);
			getApp().off("mqtt", "mqtt_head")
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary')
			plus.navigator.setFullscreen(false);
			// #endif
		},
		methods: {
			mqttSubscribes(topics) {
				getApp().mqttSubscribes(topics);
			},
			mqttUnSubscribes(topics) {
				getApp().mqttUnsubscribes(topics);
			},
			devicePropertyStatus() {
				if(!this.itemProperty){
					return;
				}
				if (this.itemProperty.sc == this.resValue) {
					this.switchLoading = false
				}
				switch (this.itemProperty.fl) {
					case this.resSpeedValue1:
						this.resSpeedValue1 = "-1";
						this.speeLoading1 = false
						break;
					case this.resSpeedValue2:
						this.resSpeedValue2 = "-1";
						this.speeLoading2 = false
						break;
					case this.resSpeedValue3:
						this.resSpeedValue3 = "-1";
						this.speeLoading3 = false
						break;
					case this.resSpeedValue4:
						this.resSpeedValue4 = "-1";
						this.speeLoading4 = false
						break;
					case this.resSpeedValue5:
						this.resSpeedValue5 = "-1";
						this.speeLoading5 = false
						break;
				}
				if (this.resSpeedValue == this.itemProperty.fl) {
					this.speedDisabled = false;
				}
			},
			pump(e) {
				if (!this.item) return;
				let par = {
					controlKey: "sc",
					deviceTypeId: 5,
					operationType: 11,
					controlMode: this.item.controlMode,
					productKey: this.item.productKey,
					deviceCode: this.item.deviceCode,
					controlValve: e,
					isTest: this.item.testStatus
				};
				controlHeadSwitch(par).then(res => {});
			},
			lampOff() {
				let lamp = uni.getStorageSync("lampOff")
				if (!lamp || lamp == 0) {
					lamp = 1;
				} else {
					uni.removeStorageSync("lampOff");
					lamp = lamp == 1 ? 0 : 1;
				}
				if (lamp == 1) {
					this.lampFlag = true;
				} else {
					this.lampFlag = false;
				}
				uni.setStorageSync("lampOff", lamp)
				let par = {
					controlKey: "do3",
					deviceTypeId: 5,
					controlMode: this.item.controlMode,
					productKey: this.item.productKey,
					operationType: 11,
					deviceCode: this.item.deviceCode,
					controlValve: lamp,
					isTest: this.item.testStatus
				};
				controlHeadSwitch(par).then(res => {});
			},
			onRear(g) {
				if (!this.item) return;
				let par = {
					controlKey: "fl",
					deviceTypeId: 5,
					productKey: this.item.productKey,
					operationType: 12,
					deviceCode: this.item.deviceCode,
					controlValve: g
				};
				controlHeadSwitch(par).then(res => {
					this.speedDisabled = true;
					switch (g) {
						case 1000:
							this.resSpeedValue1 = g + "";
							this.speeLoading1 = true
							break;
						case 2000:
							this.resSpeedValue2 = g + "";
							this.speeLoading2 = true
							break;
						case 3000:
							this.resSpeedValue3 = g + "";
							this.speeLoading3 = true
							break;
						case 4000:
							this.resSpeedValue4 = g + "";
							this.speeLoading4 = true
							break;
						case 5000:
							this.resSpeedValue5 = g + "";
							this.speeLoading5 = true
							break;
					}
					resSpeedValue.value = g + "";
				});
			},
			getNowFormatDay() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var d = date.getDate();
				if (month < 10) {
					month = "0" + month;
				}
				if (d < 10) {
					d = "0" + d;
				}
				return year + "/" + month + "/" + d;
			},
			getNowFormatDateTime() {
				var date = new Date();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				if (hour < 10) {
					hour = "0" + hour;
				}
				if (minute < 10) {
					minute = "0" + minute;
				}
				if (second < 10) {
					second = "0" + second;
				}
				return hour + ":" + minute + ":" + second;
			},

			//关闭页面
			onClosePage() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-page-head {
		display: none
	}

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

	.dark {
		background-color: cadetblue;
	}

	.light {
		background-color: cadetblue;
	}

	.valuecol {
		height: 80%;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
		line-height: 25px;
		font-size: 14px;
		border: 1px solid black;
		width: 95%;
		background-color: white;
		color: black;

	}

	::v-deep .u-loading-icon__spinner,
	.u-loading-icon__spinner--spinner {
		color: #9ef800 !important;
	}

	::v-deep .u-button--disabled {
		opacity: 1.0;
	}

	::v-deep .u-loading-icon .u-loading-icon__spinner {
		color: #22ac38 !important;
	}
</style>