<template>
	<view class="pages">
		<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
			height='50'  :custom-back='backPage'></u-navbar>
		<view class="title">
			<text>控制台</text>
		</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="sn" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
				placeholder-class="my-placeholder"  @input="search()" />

		</view>
		<view class="txt">
			MAC：{{carInfo.mac}}
		</view>
		<view class="txt" style="margin-top: 100rpx;">
			信号：{{carInfo.signalStrength}}
		</view>
		<view class="txt">
			电压：{{carInfo.voltage}}V
		</view>
		<view class="txt">
			网络：
			<span v-if="carInfo.onlineStatus==0">离线</span>
			<span style="color: #8883F0;" v-if="carInfo.onlineStatus==1">在线</span>
			
		</view>
		<view class="txt">
			
			锁状态：
			<span v-if="carInfo.lockStatus==0">关</span>
			<span style="color: #8883F0;" v-if="carInfo.lockStatus==1">开</span>
			
		</view>
		<view class="btnbox">
			<view class="btn_box" style="margin-bottom: 20rpx;"> 
				<view class="btn1" @click="btn(5)">
					清空校准
				</view>
			
			</view>
			<view class="btn_box">
				<view class="btn1" @click="btn(0)">
					开锁
				</view>
				<view class="btn1" @click="btn(1)">
					关锁
				</view>
			</view>
			<view class="btn_box" style="margin-top: 20rpx;">
				<view class="btn1" @click="btn(3)">
					响铃
				</view>
				<view class="btn1" @click="btn(4)">
					更新
				</view>
			</view>
			<view class="btn2" style="margin-top: 20rpx;" @click="back()">
				返回扫描
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleflag: false, //提示隐藏
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				sn: '',
				carInfo:{}

			}
		},
		onLoad(e) {
			if (e.sn) {
				this.sn = e.sn
				this.deviceInfo()
			}

		},
		onShow() {

		},

		mounted() {
			// this.videoContext = uni.createVideoContext('myVideo', this)
		},
		methods: {
			backPage(){
				uni.redirectTo({
					url:'/pages_bind/bind_sn'
				})
			},
			back(){
				uni.reLaunch({
					url:'/pages_bind/bind_sn'
				})
			},
			search(){
				if (this.sn && this.sn.length === 7 && /^\d+$/.test(this.sn)) {
				    // 当 this.sn 满足条件时调用 deviceInfo
				    this.deviceInfo();
				  } else {
				    console.log('SN 不是 7 位数字');
				    // 你可以在这里处理不符合条件的情况，比如提示用户输入正确的 SN
				  }
			},
			qrcode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
			
						let sn = null;
						let queryParams = res.result.split('?')[1];
						if (queryParams) {
							let params = queryParams.split('&');
							params.forEach(param => {
								let [key, value] = param.split('=');
								if (key === 'sn') {
									sn = value;
								}
							});
						}
			
						this.sn = sn
						console.log(res.result);
						if (this.sn != '') {
							this.deviceInfo()
						}
			
					},
					fail: err => {
						console.error('扫描失败：', err);
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						});
					}
				});
			},
			
			deviceInfo() {

				this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
					
					if (res.code === 200) {
						this.carInfo=res.data
						
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},
			btn(num) {
				if (num == 0) {
					uni.showLoading({
						title: '加载中...'
					})
					console.log('点击了....1');
					this.$u.post('/appVerify/admin/unlocking?sn=' + this.sn).then((res) => {

						if (res.code == 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							this.deviceInfo()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.hideLoading()

						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 1) {
					uni.showLoading({
						title: '加载中...'
					})
					console.log('点击了....2');
					this.$u.post('/appVerify/admin/lock?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							this.deviceInfo()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.hideLoading()

						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 3) {
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
								this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});

						}
					})

				}else if (num == 4){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('/appVerify/refreshDevice?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}else if (num == 5){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('	/app/voltage/check?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
				
			}
		
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f7faff !important;
	}

	.btnbox {
		margin-left: -66rpx;
		width: 750rpx;
		padding: 0 66rpx;
		position: fixed;
		bottom: 50rpx;
	}

	.txt {
		margin-top: 16rpx;
		font-size: 48rpx;
		color: #808080;
	}

	.btn_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 220rpx;
			height: 100rpx;
			background: #8b83f0;
			font-size: 50rpx;
			color: #fff;
			border-radius: 30rpx;
		}
	}

	.btn2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		background: #8b83f0;
		font-size: 50rpx;
		color: #fff;
		border-radius: 30rpx;
	}

	.pages {
		// padding-top: 136rpx !important;
		padding: 0 66rpx;
		box-sizing: border-box;
	}

	.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;
		}
	}




	.title {
		margin-bottom: 84rpx;

		image {
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			vertical-align: bottom;
			margin-right: 10rpx;
		}

		text:nth-child(1) {
			font-weight: 400;
			font-size: 96rpx;
			color: #262B37;
			line-height: 88rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: block;
			margin-bottom: 48rpx;
		}
	}

	.dblist {
		display: flex;
		width: 100%;
		margin-top: 34rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
		padding: 20rpx 0 24rpx 18rpx;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10rpx;

		.lt {
			padding-left: 10rpx;
			box-sizing: border-box;
			margin-right: 38rpx;

			image {
				width: 42rpx;
				// height: 112rpx;
			}
		}

		.cen {
			width: 370rpx;
			padding-left: 10rpx;
			box-sizing: border-box;

			.name {
				white-space: nowrap;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #262B37;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 10rpx;
			}

			.mac {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #262B37;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 16rpx;
			}
		}

		.rt {
			margin-left: auto;
			margin-top: 22rpx;

			text {
				display: inline-block;
				width: 108rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #8883F0;
				filter: blur(0px);
				border-radius: 20rpx;
				text-align: center;
				line-height: 60rpx;
				color: #8883F0;
			}
		}
	}
</style>