<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 == undefined ? '--' : carInfo.mac}}
		</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">
			信号：{{carInfo.signalStrength == undefined ? '--' : carInfo.signalStrength}}
		</view>
		<view class="txt">
			卫星：{{carInfo.satellites == undefined ? '--' : carInfo.satellites}}
		</view>
		<view class="txt">
			电压：{{carInfo.voltage == undefined ? '--' : carInfo.voltage.toFixed(2)}}V
		</view>
		<view class="txt">
			锁状态：
			<span v-if="carInfo.lockStatus==0">关</span>
			<span style="color: #8883F0;" v-if="carInfo.lockStatus==1">开</span>
		</view>
		<view class="txt">
			电门：
			<span v-if="carInfo.quality==0">关</span>
			<span style="color: #8883F0;" v-if="carInfo.quality==1">开</span>
		</view>
		<view class="txt">
			硬件版本：{{carInfo.hardwareVersion == undefined ? '--' : carInfo.hardwareVersion}}
		</view>
		<view class="txt">
			软件版本：{{carInfo.softwareVersion == undefined ? '--' : carInfo.softwareVersion}}
		</view>
		<view class="txt">
			声音：
			<span v-if="carInfo.music==0">静音</span>
			<span v-if="carInfo.music==1">语音</span>
			<span v-if="carInfo.music==2">彩铃</span>
		</view>
		<view class="txt">
			最后定位时间：{{carInfo.lastLocationTime == undefined ? '--' : carInfo.lastLocationTime}}
		</view>
		<view class="txt">
			最后在线时间：{{carInfo.lastOnlineTime == undefined ? '--' : carInfo.lastOnlineTime}}
		</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 class="btn1" @click="btn(9)">
					坐垫锁
				</view>
			</view>
			<view class="btn_box" style="margin-top: 20rpx;">
				<view class="btn1" @click="btn(3)">
					响铃
				</view>
				<view class="btn1" @click="btn(8)">
					重启
				</view>
				<view class="btn1" @click="btn(4)">
					更新
				</view>
			</view>
			<!-- <view class="btn_box" style="margin-top: 20rpx;">
				
				
			</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:'/page_user/luru/index'
				})
			},
			back(){
				uni.reLaunch({
					url:'/page_user/luru/index'
				})
			},
			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 === 's') {
									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('/bst/device?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.put('/bst/device/iot/unlock?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							this.deviceInfo()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.hideLoading()
                            uni.showToast({
                            	title: res.msg,
                            	icon: 'none',
                            	duration: 2000
                            })
						}
					}).catch(error => {
						console.error("Error fetching area data:", error)
					})
				} else if (num == 1) {
					uni.showLoading({
						title: '加载中...'
					})
					console.log('点击了....2')
					this.$u.put('/bst/device/iot/lock?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							this.deviceInfo()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.hideLoading()
                            uni.showToast({
                            	title: res.msg,
                            	icon: 'none',
                            	duration: 2000
                            })
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					})
				} else if (num == 3) {
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.put('/bst/device/iot/ring?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if (num == 4){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.put('/bst/device/iot/refresh?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if (num == 5){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.put('/app/voltage/check?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if(num == 8){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.put('/bst/device/iot/reboot?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if(num == 9){
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.put('/bst/device/iot/unlockSeat?sn=' + this.sn).then((res) => {
						if (res.code == 200) {
							this.deviceInfo()
							uni.hideLoading()
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								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: 32rpx;
		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: 180rpx;
			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: 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;
			}
		}
		.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>