<template>
	<view class="">
		<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" :custom-back="btnshang"
			title-size='36' height='50'></u-navbar>
		<view class="title">
			控制台
		</view>
		<view class="shuom">
			请扫描设备上的二维码
		</view>
		<view class="iptbox">
			<view class="qrcode" @click="qrcode()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
			</view>
			<input type="text" class="ips" v-model="storeId" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
				placeholder-class="my-placeholder" />
		</view>
		<view class="machao">
			MAC号：{{obj.mac == undefined ? '--' : obj.mac}}
		</view>
		<view class="machao">
			总重量：{{(obj.totalWeight == undefined ? '--' : (Number(obj.totalWeight / 1000)).toFixed(2)) + 'kg'}}
		</view>
		<view class="machao">
			箱内湿度：{{obj.innerHumidity == undefined ? '--' : obj.innerHumidity + '°C'}}
		</view>
		<view class="machao">
			箱外湿度：{{obj.outerHumidity == undefined ? '--' : obj.outerHumidity + '°C'}}
		</view>
		<view class="machao">
			箱内温度：{{obj.innerTemperature == undefined ? '--' : obj.innerTemperature + '°C'}}
		</view>
		<view class="machao">
			箱外温度：{{obj.outerTemperature == undefined ? '--' : obj.outerTemperature + '°C'}}
		</view>
		<view class="machao">
			剩余电量：{{obj.surplusPowerPoint == undefined ? '--' : obj.surplusPowerPoint + '%'}}
		</view>
		<view class="machao">
			CO₂浓度：{{obj.innerCo2 == undefined ? '--' : obj.innerCo2 + 'ppm'}}
		</view>
		<view class="machao">
			出勤：{{obj.ioCountDay == undefined ? '--' : obj.ioCountDay + '次'}}
		</view>
		<view class="machao">
			频率：{{obj.volume == undefined ? '--' : (obj.volume / 1000).toFixed(1) + 'KHz'}}
		</view>
		<view class="machao">
			网络：<text v-if="onlineStatus == '离线'" style="color: red;">离线</text> <text v-if="onlineStatus == '在线'"
				style="color: green;">在线</text>
		</view>
		<view class="machao">
			最后在线时间：{{obj.lastOnlineTime == undefined ? '--' : obj.lastOnlineTime}}
		</view>

		<view class="list">
			<view class="anniulist">
				<view class="anniu" @click="btnkq">
					开启蜂鸣
				</view>
				<view class="anniu" @click="btngbkq">
					开启风扇
				</view>
				<view class="anniu" @click="btngb">
					关闭风扇
				</view>
				<view class="anniu" @click="btnsx">
					刷新
				</view>
			</view>
			<view class="fanhui" @click="btnfh">
				返回
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#FAFDFD",
				},
				storeId: '',
				obj: {},
				id: '',
				onlineStatus: '--',
				powerStatus: '--',
				message: '定时器未启动',
				intervalId: null, // 用于存储定时器的ID
			}
		},
		onLoad(options) {
			if (options.sn) {
				this.storeId = options.sn
				this.getsn()
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearInterval();
		},
		onHide() {
			// 页面隐藏时清除定时器（可选，根据需求决定是否添加）
			this.clearInterval();
		},
		beforeDestroy() {
			// 组件销毁前清除定时器（可选，根据需求决定是否添加）
			this.clearInterval();
		},
		methods: {
			btnshang(){
				uni.reLaunch({
					url:'/page_user/luru'
				})
			},
			startInterval() {
				// 每五秒执行一次的方法
				const timerCallback = () => {
					if(this.storeId == '' || this.storeId == null || this.obj == null){
						this.clearInterval();
					}else{
					   this.$u.get(`/app/beehive/admin/sn/${this.storeId}?refresh=true`).then(res => {
					   	if (res.code == 200) {
					   		this.obj = res.data
					   		this.id = res.data.deviceId
					   		if (res.data.onlineStatus == 0) {
					   			this.onlineStatus = '离线'
					   		} else if (res.data.onlineStatus == 1) {
					   			this.onlineStatus = '在线'
					   		}
					   		if (res.data.powerStatus == 0) {
					   			this.powerStatus = '关闭'
					   		} else if (res.data.powerStatus == 1) {
					   			this.powerStatus = '开启'
					   		}
					   	}
					   })	
					}
				}
				// 启动定时器，并将ID存储在intervalId中
				this.intervalId = setInterval(timerCallback, 5000);
			},
			clearInterval() {
				// 清除定时器
				if (this.intervalId !== null) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			// 进行扫描二维码获取设备sn
			qrcode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url);
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						let id = getQueryParam(decodedValue, 's')
						this.storeId = id
						this.getsn()
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
            // 根据设备sn获取设备详情
			getsn() {
				this.$u.get(`/app/beehive/admin/sn/${this.storeId}?refresh=true`).then(res => {
					if (res.code == 200) {
						if(res.data == null){
							this.clearInterval();
						}else{
							this.obj = res.data
							this.id = res.data.deviceId
							if (res.data.onlineStatus == 0) {
								this.onlineStatus = '离线'
							} else if (res.data.onlineStatus == 1) {
								this.onlineStatus = '在线'
							}
							if (res.data.powerStatus == 0) {
								this.powerStatus = '关闭'
							} else if (res.data.powerStatus == 1) {
								this.powerStatus = '开启'
							}
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000,
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
						this.clearInterval();
					}
				})
			},

			// 返回录入
			btnfh() {
				uni.reLaunch({
					url:'/page_user/luru'
				})
			},

			// 开启蜂鸣
			btnkq() {
				this.$u.put(`/app/beehive/admin/buzzer?sn=${this.storeId}`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.getsn()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 关闭风扇
			btngb() {
				this.$u.put(`/app/beehive/admin/fan?sn=${this.storeId}&open=false`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.btnsx()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 开启风扇
			btngbkq() {
				this.$u.put(`/app/beehive/admin/fan?sn=${this.storeId}&open=true`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.btnsx()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 刷新
			btnsx() {
				this.$u.put(`/app/beehive/iot/${this.storeId}/uploadBySn`).then(res => {
					this.getsn()
					if(this.intervalId == null){
						this.startInterval();
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.list {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);

		.anniulist {
			width: 658rpx;
			margin: auto;
			margin-top: 200rpx;
			text-align: left;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.anniu {
				width: 30%;
				height: 90rpx;
				border-radius: 20rpx;
				background-color: #ce9e10;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0 10rpx;
			}
		}

		.fanhui {
			width: 658rpx;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: #ce9e10;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 90rpx;
			margin: auto;
			margin-top: 50rpx;
		}
	}

	.machao {
		width: 658rpx;
		margin: auto;
		margin-top: 20rpx;
		text-align: left;
		font-size: 32rpx;
	}

	.title {
		font-size: 70rpx;
		font-weight: 600;
		text-align: left;
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.shuom {
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
		text-align: left;
		font-size: 32rpx;
	}

	.iptbox {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		padding: 22rpx;
		margin: 28rpx auto 0;
		width: 658rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.qrcode {
			padding-right: 20rpx;
			border-right: 2rpx solid #D8D8D8;

			image {
				width: 54rpx;
				height: 54rpx;
			}
		}

		.ips {
			width: 630rpx;

		}

		image {
			width: 18rpx;
			height: 32rpx;
		}

		.my-placeholder {
			font-weight: 400;
			font-size: 32rpx;
			color: #808080;
		}
	}
</style>