<template>
	<view class="page">
		<u-navbar title="工单详情" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="top">
		
			<view class="tap">
				<view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
					维修信息
				</view>
				<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
					处理进度
				</view>
			
			</view>
			
		</view>
		<view class="page1" v-if="curtitidx==0">
			<view class="device_info">
				<view class="device_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
					设备信息
				</view>
				<view class="info_li">
					<view class="info_li_left">
						设备编号
					</view>
					<view class="info_li_right">
						{{info.sn}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						车辆型号
					</view>
					<view class="info_li_right">
						{{info.device.model}}
					</view>
				</view>
			<!-- 	<view class="info_li">
					<view class="info_li_left">
						运营商
					</view>
					<view class="info_li_right">
						{{info.model}}
					</view>
				</view> -->
				<view class="info_li">
					<view class="info_li_left">
						运营区域
					</view>
					<view class="info_li_right">
						{{info.device.areaName}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						车辆状态
					</view>
					<view class="info_li_right">
						{{comstatus}}
					</view>
				</view>
				<!-- <view class="info_li">
					<view class="info_li_left">
						开机状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						头盔锁状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						电池锁状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view> -->
				<!-- <view class="info_li">
					<view class="info_li_left">
					剩余电量
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view> -->
				<view class="info_li">
					<view class="info_li_left">
						续航里程
					</view>
					<view class="info_li_right">
						{{info.device.remainingMileage}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						电池电量
					</view>
					<view class="info_li_right">
							{{info.device.voltage}}V, 	{{info.device.remainingPower}}%
					</view>
				</view>
			
				
				<view class="info_li" @click="mapFun()" style="align-items: flex-start;">
					<view class="info_li_left">
						设备位置
					</view>
					<view class="info_li_right" style="display: inline;width: 62%;">
						{{info.address}}
					</view>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode="" style="width: 46rpx;"></image>
				</view>
			</view>
			<view class="fix_info" v-if="info.type==1">
				<view class="fix_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uCQgmzKCxtkLtZTeMgRC" mode=""></image>
					设备维修
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修单号
					</view>
					<view class="info_li_right">
						{{info.orderNo}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						故障部位
					</view>
					<view class="info_li_right">
					{{info.fault.typeStr}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修用户
					</view>
					<view class="info_li_right">
							{{info.fault.userName}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						故障描述
					</view>
					<view class="info_li_right">
						{{info.fault.detail}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修时间
					</view>
					<view class="info_li_right">
						{{info.fault.createTime}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						维修人员
					</view>
					<view class="info_li_right">
						{{info.adminName}}
					</view>
				</view>
				
				
			</view>
			<view class="fix_info"  v-if="info.type==2">
				<view class="fix_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uCQgmzKCxtkLtZTeMgRC" mode=""></image>
					换电信息
				</view>
				<view class="info_li"style="align-items: flex-start;word-wrap: break-word;">
					<view class="info_li_left">
						换电单号
					</view>
					<view class="info_li_right"  style="display: inline;width: 70%;">
						{{info.orderNo}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电前电量
					</view>
					<view class="info_li_right">
						{{info.beforeElectric}}%
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电后电量
					</view>
					<view class="info_li_right" v-if="info.afterElectric">
						{{info.afterElectric}}%
					</view>
					<view class="info_li_right" v-else>
						--
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
					报修时间
					</view>
					<view class="info_li_right">
						{{info.createTime}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电人员
					</view>
					<view class="info_li_right">
						{{info.adminName}}
					</view>
				</view>
				
				
			</view>
			<view class="bot_btn" >
				<view class="btn" @click="btn(0)">
					开锁
				</view>
				<view class="btn" @click="btn(1)">
					关锁
				</view>
				<view class="btn" @click="btn(2)">
					车辆禁用
				</view>
				<view class="btn" @click="btn(3)">
					车辆解禁
				</view>
				<view class="btn"  @click="btn(4)">
					响铃寻车
				</view>
			<!-- 	<view class="btn" @click="bulebtn(1)">
					蓝牙响铃
				</view>
				<view class="btn" @click="bulebtn(2)">
					蓝牙开锁
				</view>
				<view class="btn" @click="bulebtn(3)">
					蓝牙关锁
				</view> -->
				<view class="btn" @click="bulebtn(4)">
					设备重启
				</view>
				<view class="btn" @click="tipshow=true" v-if="info.type==1">
					维修处理
				</view>
				<view class="btn" @click="tipshow=true" v-if="info.type==2">
					换电处理
				</view>
			</view>
		</view>
		<view class="page2" v-if="curtitidx==1" style="padding: 30rpx;padding-left: 80rpx;">
				<view class="timebox" style="padding: 30rpx;">
					<u-time-line >
					
						<u-time-line-item  v-for="(imte,index ) in history" :key="index" >
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{imte.info}}</view>
									<view class="u-order-time">{{imte.createTime}}</view>
								</view>
							</template>
						</u-time-line-item>
						
					</u-time-line>
				</view>
				
		</view>
		<u-mask :show="tipshow"  z-index='10'>
				
		</u-mask>
		<view class="tip_box" v-if="tipshow">
			<view class="cont">
				<view class="tit">
					维修备注
				</view>
				<view class="input-container">
					<!-- <view class="placeholder" v-if="!textValue">如选项未涵盖，请输入故障问题</view> -->
					<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" style="border: none;" placeholder="请填写维修备注"
						@input="updateWordCount" @blur="showPlaceholder" maxlength='100'></textarea>
					<text class="word-count">{{ currentCount }}/100</text>
				</view>
				<view class="tip_btn" @click="putFix()">
					完成
				</view>
			</view>
		</view>
		<u-mask :show="maskloading" :z-index='100' duration='0' />
		<view class="maskloadpage" v-if="maskloading">
			<view class="maskpage1" v-if="maskepage==4">
				<view class="top_info">
					<image :src="loadimg" mode=""></image>
					<view class="masktxt">
						{{buletxt}}
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					请确保与车辆的距离小于3米
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
		
			</view>
			<!-- 不允许停车点外还车 -->
			<view class="maskpage1" v-if="maskepage==5">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uG3cbPgvPDzwlq6IHHxK" mode=""></image>
					<view class="masktxt" v-if="orderinfo.sn">
						蓝牙连接失败
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					请确保手机蓝牙已经打开
				</view>
				<view class="masktips" @click="totxtpage()"
					style="width: 100%;color: #4C97E7;text-decoration-line: underline;margin-top: 0; font-size: 28rpx;">
					点击查看教程
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box">
		
					
					
					<view class="btn4" @click="closemask()" >
						返回
		
					</view>
					<view class="btn3" @click="Binddevice">
						重新连接
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	const app = getApp();
	var xBlufi = require("@/utils/blufi/xBlufi.js");
	let _this = null;
	export default {
		data() {
			return {
				devicesList: [
					// {name:'110000',
					// mac:'11111'}
				],
				searching: false,
				texts: '正在扫描蓝牙设备...',
				btnflag: true,
				tishiflag: false,
				option: '',
				bluthlist: [], //蓝牙数组
				// status: 'loading',
				statusflag: false,
				Bluetoothmac: '',
				mac: '',
				ishave: false,
				ver_data: null,
				deviceInfoss: {},
				gps: {},
				isband: false,
				// status: false,
				deviceIds: '',
				name: '',
				orderinfo: {},
				dl: 0,
				czmoney:true,
				iscz:true,
				
				bgc: {
					backgroundColor: "#fff",
				},
				curtitidx:0,
				latitude: 0,
				longitude: 0,
				info:'',
				tipshow:false,
				textValue: '',
				placeholderVisible:false,
				currentCount: 0,
				info:{},
				history:[],
				
				maskloading: false,
				toploadtxt: "开锁中0%",
				loadimg: 'https://lxnapi.ccttiot.com/bike/img/static/urJQJnOI1DEjWatFqHYh',
				tiptxt: '请定点停放，规范用车',
				maskepage: 0,
				backgps: {},
				buletxt: '',
				
				buleclose: false,
				buleopen: false,
				bulering: false,
				bulerebort: false
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getdetail()
		},
		computed:{
			comstatus(){
				if(this.info.status==0){
					return '未上架'
				}else if (this.info.status==1){
					return '正常'
				}else if (this.info.status==2){
					return '预约中'
				}else if (this.info.status==3){
					return '使用中'
				}else if (this.info.status==4){
					return '临时锁车'
				}else if (this.info.status==5){
					return '检修中'
				}else if (this.info.status==6){
					return '工单中'
				}else if (this.info.status==9){
					return '废弃'
				}
			}
		},
		methods: {
			closemask(){
				this.maskloading=false
			},
			bulebtn(num) {
				if (num == 1) {
					if (this.carstause) {
						this.ring()
					} else {
						this.bulering = true
						this.Binddevice()
					}
				} else if (num == 2) {
					if (this.carstause) {
						this.open()
					} else {
						this.buleopen = true
						this.Binddevice()
					}
				}else if (num == 3) {
					if (this.carstause) {
						this.close()
					} else {
						this.buleclose = true
						this.Binddevice()
					}
				}else if (num == 4) {
					if (this.carstause) {
						this.reboot()
					} else {
						this.bulerebort = true
						this.Binddevice()
					}
				}
			},
			
			Binddevice() {
				uni.getBluetoothAdapterState({
					success: function(res) {
						console.log('蓝牙状态：', res.available)
					},
					fail: function(res) {
						console.log('获取蓝牙状态失败')
					}
				})
				this.maskloading=true
				this.devicesList = []
				this.maskepage = 4
				this.buletxt = '蓝牙连接中'
				// uni.showLoading({
				// 	title: '蓝牙扫描中..'
				// })
				xBlufi.initXBlufi(1);
				console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
				xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
				xBlufi.notifyStartDiscoverBle({
					'isStart': true
				});
			
			
				// 两秒后停止蓝牙搜索
				setTimeout(() => {
					xBlufi.notifyStartDiscoverBle({
						'isStart': false
					});
					setTimeout(() => {
						// uni.hideLoading()
						if (this.devicesList.length == 0) {
							// uni.showToast({
							// 	title: '暂无发现对应设备,请靠近设备',
							// 	icon: 'none',
							// 	duration: 1500
							// });
							this.maskepage = 5
						} else {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));
			
							// 将去重后的数组重新赋值给 this.devicesList
							this.devicesList = uniqueDevicesList;
							console.log(this.devicesList, 'this.devicesListthis.devicesList');
							let istrue = false
							this.devicesList.forEach(device => {
								// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
								let macFromName = device.name.substring(device.name.length - 12);
								console.log(macFromName, 'macFromNamemacFromName');
								// 与 this.mac 进行比较
								if (macFromName == this.mac) {
									// 如果相同，则将 this.ishave 设置为 true
									console.log(device);
									this.deviceInfoss = device
									// this.ishave = true;
									istrue = true
									this.createBLEConnection(device)
			
									console.log('对比正确1111111111');
								} else {
									console.log('对比错误');
			
								}
							});
							setTimeout(() => {
								if (!istrue) {
									this.buletxt = '蓝牙连接失败'
			
			
									setTimeout(() => {
										this.maskepage = 5
									}, 500)
								}
			
							}, 500)
						}
			
			
					}, 200)
					// 判断是否存在浇花器设备
			
					// this.status = true
				}, 5000)
			
			},
			
			
			reboot() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11reboot"
									});
									vm.maskloading=false
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			open() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11open"
									});
									vm.maskloading=false
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			close() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11close"
									});
									vm.maskloading=false
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			ring() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11play1@"
									});
									vm.maskloading=false
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							// this.devicesList = options.data
			
							devicesarr.forEach(device => {
			
			
								// this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => {
								// if (res.data == false) {
								this.devicesList.push(device);
			
								let uniqueDevicesList = Array.from(new Set(this.devicesList));
			
								// 将去重后的数组重新赋值给 this.devicesList
								this.devicesList = uniqueDevicesList;
			
							});
						}
						break;
			
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						if (options.result) {
							// uni.hideLoading();
			
			
							xBlufi.notifyInitBleEsp32({
								deviceId: options.data.deviceId
							});
			
							// xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);
			
							// this.deviceIds = options.data.deviceId
							// this.name = options.data.name
							// 连接成功绑定设备
							// let params = {
							// 	mac: this.Bluetoothmac,
							// 	userId: this.$store.state.user.userId
							// }
							let systemInfo = uni.getSystemInfoSync();
							if (systemInfo.platform === 'android') {
								// 当前设备是 Android  
			
							} else if (systemInfo.platform === 'ios') {
								// 当前设备是 iOS  
								// uni.navigateTo({
								// 	url: '/pages/wifilist/index?deviceId=' + options
								// 		.data.deviceId + '&name=' + options.data.name
								// })
							}
						}
						if (options.result == false) {
							// this.loadingmask=false
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'
			
			
								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}
			
							// uni.showModal({
							// 	title: '很抱歉提醒你！',
							// 	content: '小程序与设备异常断开',
							// 	showCancel: false,
							// 	success: function(res) {
							// 		// uni.navigateBack({
							// 		// 	url: '../search/search'
							// 		// });
							// 	}
							// });
							// this.statusflag = false
							// uni.hideLoading();
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
			
						// this.ver_data = this.parseCustomData(options.data)
						if (options.data) {
							this.carstause = true
			
			
							if (this.maskloading && this.maskepage == 4) {
								// setTimeout(() => {
								// 	this.maskloading = false
								// }, 700)
								if (this.buleclose == false && this.buleopen == false && this.bulerebort == false &&
									this
									.bulering == false) {
									if (this.buletxt == '蓝牙连接中') {
										this.buletxt = '蓝牙连接成功！'
									}
			
								}
								if (this.buleclose) {
									this.buleclose = false
									this.close()
								}
								if (this.buleopen) {
									this.buleopen = false
									this.open()
								}
								if (this.bulerebort) {
									this.buleopen = false
									this.reboot()
								}
								if (this.bulering) {
									this.bulering = false
									this.ring()
								}
			
			
							}
			
			
			
			
			
			
						} else {
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'
			
			
								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}
						}
						console.log("1收到设备发来的自定义数据结果：", options.data);
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
						console.log('状态', options.result)
						if (options.result == false) {
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'
			
			
								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}
							// uni.showToast({
							// 	title: '设备断开链接，请重新点击蓝牙链接',
							// 	icon: 'none'
							// });
							// uni.showModal({
							// 	title: '很抱歉提醒你！',
							// 	content: '小程序与设备异常断开',
							// 	showCancel: false,
							// 	success: function(res) {
							// 		// uni.navigateBack({
							// 		// 	url: '../search/search'
							// 		// });
							// 	}
							// });
							// this.statusflag = false
							// uni.hideLoading();
						}
					}
					break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));
			
							// 过滤出名称字段的前五个字母为 "CTPOW" 的项
							let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0,
									4) ===
								"BBLE");
			
							// 将过滤后的数组重新赋值给 this.devicesList
							this.devicesList = filteredDevices;
			
							// console.log('蓝牙停止搜索ok',this.devicesList);
						} else {
							//蓝牙停止搜索失败
							// console.log('蓝牙停止搜索失败');
						}
						this.searching = false
						// _this.setData({
						// 	searching: false
						// });
			
						break;
				}
			},
			
			btnyc() {
				this.titleflag = false
			},
			
			// 解析自定义数据
			
		
			//4、建立连接
			createBLEConnection(e) {
				console.log('调用了');
				xBlufi.notifyStartDiscoverBle({
					'isStart': false
				});
				console.log(e, '蓝牙信息')
				const deviceId = e.deviceId
				this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
				console.log(this.Bluetoothmac, '11111');
				let name = e.name;
				console.log('点击了，蓝牙准备连接的deviceId:' + e.deviceId);
				xBlufi.notifyConnectBle({
					isStart: true,
					deviceId: e.deviceId,
					name
				});
				// for (var i = 0; i < this.devicesList.length; i++) {
				// 	if (e.deviceId === this.devicesList[i].deviceId) {
			
				// 		uni.showLoading({
				// 			title: '连接蓝牙设备中...'
				// 		});
				// 	}
				// }
			},
		
			btnhd() {
				this.tishiflag = false
			},
			
			
			
			
			
			
			
			btn(num) {
				if (num == 0) {
			
					this.$u.post('/appVerify/admin/unlocking?sn=' + this.sn).then((res) => {
			
						if (res.code === 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							// this.deviceInfo()
						}else{
							this.bulebtn(2)
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 1) {
			
					this.$u.post('/appVerify/admin/lock?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							// this.deviceInfo()
						}else{
							this.bulebtn(3)
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 2) {
			
					this.$u.post('/appVerify/device/offline?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							// this.deviceInfo()
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 3) {
			
					this.$u.post('/appVerify/device/online?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
							// this.deviceInfo()
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					});
				} else if (num == 4) {
					uni.showLoading({})
					this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.bulebtn(1)
						}
					})
			
				}
			},
			historyList(){
				this.$u.get(`/appVerify/admiOrder/historyList?orderNo` + 111).then((res) => {
					if (res.code == 200) {
						this.history=res.rows
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			getdetail(){
				this.$u.get(`/appVerify/adminOrder/` + this.id).then((res) => {
					if (res.code == 200) {
						this.info=res.data
						this.mac=res.data.device.mac
						// if(res.data.device.onlineStatus==0){
						// 	this.Binddevice()
						// }
						this.latitude=parseFloat(this.info.device.latitude)
						this.longitude=parseFloat(this.info.device.longitude)
						this.historyList()
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			putFix(){
				this.$u.put(`/appVerify/admiOrder?remark=` + this.textValue+'&orderNo='+this.info.orderNo).then((res) => {
					if (res.code == 200) {
						this.tipshow=false
						uni.navigateBack()
					} else {
						uni.showToast({
							title: '处理失败',
							icon: 'none',
							duration: 1000
						});
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			changeidx(idx){
				this.curtitidx=idx
			},
			hidePlaceholder() {
				this.placeholderVisible = false;
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true;
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length;
				// if (this.currentCount > 500) {
				// 	this.textValue = this.textValue.slice(0, this.textValue.lastIndexOf(' ', 500)).trim();
				// 	uni.showToast({
				// 		title: '字数已超过500字限制',
				// 		icon: 'none'
				// 	});
				// }
			
			},
			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: this.latitude,
					 //纬度 - 目的地/坐标点
					longitude: this.longitude, 
					 //经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.info.address
				});
			},
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #fff;
}
.page{
	width: 750rpx;
	.maskloadpage {
	
		position: fixed;
		padding: 46rpx;
		bottom: 0;
		width: 752rpx;
		height: 780rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		z-index: 101;
	
		.maskpage0 {
			.top_info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
	
				image {
					margin-right: 16rpx;
					width: 50rpx;
					height: 50rpx;
				}
	
				.masktxt {
					font-weight: 500;
					font-size: 44rpx;
					color: #3D3D3D;
				}
			}
	
			.masktips {
				margin-top: 20rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}
	
			.tipsimg {
				margin-top: 60rpx;
				display: flex;
				// align-items: center;
				justify-content: center;
				width: 100%;
	
				image {
					width: 554rpx;
					height: 262rpx;
	
				}
			}
		}
	
		.maskpage1 {
			.top_info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
	
				image {
					margin-right: 16rpx;
					width: 50rpx;
					height: 50rpx;
				}
	
				.masktxt {
					font-weight: 500;
					font-size: 44rpx;
					color: #3D3D3D;
				}
			}
	
			.masktips {
				margin-top: 20rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}
	
			.tipsimg {
				margin-top: 60rpx;
				display: flex;
				// align-items: center;
				justify-content: center;
				width: 100%;
	
				image {
					width: 554rpx;
					height: 262rpx;
	
				}
			}
	
			.btn_box {
				width: 750rpx;
				padding: 0 36rpx;
				position: absolute;
				bottom: 60rpx;
				left: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.btn3 {
					// margin-right: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 300rpx;
					height: 90rpx;
					background: #4C97E7;
					border-radius: 45rpx 45rpx 45rpx 45rpx;
	
					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
				}
	
				.btn4 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 300rpx;
					height: 90rpx;
					border-radius: 45rpx 45rpx 45rpx 45rpx;
					border: 2rpx solid #808080;
	
					font-weight: 500;
					font-size: 40rpx;
					color: #808080;
				}
			}
		}
	
	}
	
	
	.tap{
		margin-top: 24rpx;
		width: 750rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		
		.tap_cont{
			text-align: center;
			padding-bottom: 15rpx;
			width: 130rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #3D3D3D;
			border-bottom: 6rpx solid #fff ;
		}
		.act1{
			border-bottom: 6rpx solid #4C97E7 ;
			color: #4C97E7;
		}
	}
	.tip_box{
		display: flex;
	    align-items: center;
	    justify-content: center;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 12;
	    height: 100%;
		.cont{
			padding: 36rpx 42rpx;
			// display: flex;
			flex-wrap: wrap;
			// justify-content: center;
			width: 610rpx;
			height: 772rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.tit{
				
				width: 100%;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
			}
			.input-container {
				margin-top: 34rpx;
				position: relative;
				width: 526rpx;
				height: 396rpx;
				background: #F7F7F7;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				border-radius: 20rpx;
				// margin-top: 40rpx;
				overflow: hidden;
				// padding-right: 38rpx;
				box-sizing: border-box;
				border: 2rpx solid #C7C7C7;
			}
			
			.placeholder {
				position: absolute;
				top: 18rpx;
				left: 38rpx;
				color: #999;
				/* placeholder颜色 */
				pointer-events: none;
				/* 确保点击事件可以穿透到textarea上 */
			}
			.custom-textarea {
				width: 100%;
				height: 100%;
				/* 设置一个合适高度 */
				padding-top: 18rpx;
				padding-bottom: 40rpx;
				/* 为placeholder留出空间 */
				padding-left: 10rpx;
				box-sizing: border-box;
				border: 1px solid #ccc;
			}
			
			.word-count {
				position: absolute;
				right: 10px;
				bottom: 10px;
				font-size: 12px;
				color: #999;
			}
			.tip_btn{
				margin-top: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 526rpx;
				height: 78rpx;
				background: #4C97E7;
				border-radius: 49rpx 49rpx 49rpx 49rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
	.page2{
		.timebox{
			padding-left: 20rpx;
			background: #fff;
		}
		.u-node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #d0d0d0;
			}
			
			.u-order-title {
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
			}
			
			.u-order-desc {
				color: rgb(150, 150, 150);
				font-size: 28rpx;
				margin-bottom: 6rpx;
			}
			
			.u-order-time {
				color: rgb(200, 200, 200);
				font-size: 26rpx;
			}
	}
	.page1{
		padding-bottom: 250rpx;
		.device_info{
			margin: 32rpx auto;
			padding: 32rpx 28rpx;
			width: 680rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.device_top{
				margin-bottom: 28rpx;
				image{
					margin-right: 18rpx;
					width: 42rpx;
					height: 42rpx;
				}
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.info_li{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 28rpx;
				.info_li_left{
					margin-right: 44rpx;
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
				.info_li_right{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				image{
					margin-left: auto;
					width: 41.66rpx;
					height: 48rpx;
				}
			}
		}
		.fix_info{
			margin: 32rpx auto;
			padding: 32rpx 28rpx;
			width: 680rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.fix_top{
				margin-bottom: 28rpx;
				image{
					margin-right: 18rpx;
					width: 42rpx;
					height: 42rpx;
				}
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.info_li{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 28rpx;
				.info_li_left{
					margin-right: 44rpx;
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
				.info_li_right{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				image{
					margin-left: auto;
					width: 41.66rpx;
					height: 48rpx;
				}
			}
		}
		.bot_btn {
			position: fixed;
			bottom: 0;
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx 18rpx;
			width: 750rpx;
			// height: 230rpx;
			background: #fff;
			// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		
			.btn:nth-child(4n) {
				margin-right: 0;
			}
		
			.btn {
				margin-top: 10rpx;
				margin-right: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 164rpx;
				height: 66rpx;
				background: #E2F2FF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #4C97E7;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
	}
}
</style>