<template>
	<view class="page">
		<u-navbar title="订单详情" :custom-back="btnback" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
			title-size='36' height='44'></u-navbar>

		<view class="shengyu">
			剩余时长
		</view>
		<view class="time">
			{{detailobj.isUsing == true ? formattedTime : 0}}
		</view>
		<view class="setmeal">
			<view class="lt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ujJcBAlIiMjakFEBQV8O" mode=""></image>
				<view class="quan">
					<view class="one">
						{{detailobj.suitTime == undefined ? '--' : detailobj.suitTime}}{{detailobj.suitTimeUnit == 3 ? '分钟' : '小时'}}
					</view>
					<view class="two">
						套餐时长
					</view>
				</view>
			</view>
			<view class="cen"></view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/u9hyl89RRMfuvTFnuVbi" mode=""></image>
				<view class="quan">
					<view class="one">
						{{detailobj.money == undefined ? '--' : detailobj.money}}元
					</view>
					<view class="two">
						实付金额
					</view>
				</view>
			</view>
		</view>

		<view class="list_item">
			<view class="top">
				<view class="bh">
					设备编号：{{detailobj.deviceNo == undefined ? '--' : detailobj.deviceNo}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					订单号
				</view>
				<view class="">
					{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					购买套餐：
				</view>
				<view class="">
					{{detailobj.suitName == undefined ? '--' : detailobj.suitName}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					金额
				</view>
				<view class="">
					￥{{detailobj.money == undefined ? '--' : detailobj.money}}
				</view>
			</view>
			<view class="item_xx" v-if="detailobj.status == 3">
				<view class="">
					退款金额
				</view>
				<view class="">
					￥{{detailobj.refundAmount == undefined ? '--' : detailobj.refundAmount}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					经营场所：
				</view>
				<view class="">
					{{detailobj.storeName == undefined ? '--' : detailobj.storeName}} {{detailobj.deviceRoom == undefined ? '' : detailobj.deviceRoom + '室'}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					支付时间：
				</view>
				<view class="">
					{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}
				</view>
			</view>
		</view>

		<view class="lishi" v-if="isUsing == true">
			<view class="lt">
				临时开关
			</view>
			<view class="rt">
				<image v-if="imgflag" @click="btnimg"
					src="https://api.ccttiot.com/smartmeter/img/static/uccaWar4FDp37op7haWM " mode=""></image>
				<image v-else @click="btnimgs" src="https://api.ccttiot.com/smartmeter/img/static/ur9HRtZKY7YcxGewJARz"
					mode=""></image>
			</view>
		</view>
		<!-- 结束订单 -->
		<view class="jieshu" v-if="msakflag">
			<view class="jieshus">
				<view class="tishi">
					温馨提示
				</view>
				<view class="img">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uKR4t1SZuW0VrpwgyXDK" mode=""></image>
				</view>
				<view class="shuom">
					结束订单后，设备也将被关闭<br>
					套餐费用不予退还，是否结束?
				</view>
			</view>
			<view class="anniu">
				<view class="qux" @click="btnqx">
					取消
				</view>
				<view class="qued" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="msakflag"></view>


		<view class="dels" @click="btnjieshu" v-if="detailobj.isUsing == true">
			结束订单
		</view>

		<view class="del" @click="btndel" v-if="flag">
			删除订单
		</view>
		<view class="del" v-else>
			删除订单
		</view>


		<!-- 蓝牙连接 -->
		<view class="bluetoothbox" v-if="bluetoothflag">
			<view class="stop">
				设备已离线，正在连接该设备蓝牙
			</view>
			<view class="xtop">
				请将手机与设备尽量靠近，连接成功后可操作
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image>
		</view>

		<!-- 蓝牙连接失败 -->
		<view class="bluetoothbox" v-if="shibaiflag">
			<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uTb3vSlbcHdPMFQMBjyL" mode=""></image>
			<view class="one">
				蓝牙连接失败
			</view>
			<view class="two">
				请确保手机足够靠近设备
			</view>
			<view class="thr">
				并且设备处于上电状态
			</view>
			<view class="anfour">
				<view class="qx" @click="btnlyqx">
					取消
				</view>
				<view class="cx" @click="topage">
					重新连接
				</view>
			</view>
		</view>
		<view v-if="btnmsk"
			style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;">
		</view>

		<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;"
				src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
		</view>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js")
	export default {
		data() {
			return {
				imgad: '',
				detailobj: {},
				billId: '',
				timeday: '',
				flag: true,
				imgflag: true,
				msakflag: false,
				bluetoothflag: false,
				shibaiflag: false,
				btnmsk: false,
				deviceId: '',
				name: '',
				setMode: null,
				qrResult: '',
				isUsing: false,
				timer: null,
				timers: null,
				pictrim:true,
				billidflag:''
			}
		},
		onShow() {
			// 页面显示时启动定时器  
			this.startTimers();
		},
		onHide() {
			// 页面隐藏时清除定时器  
			if (this.timers) {
				clearInterval(this.timers);
				this.timers = null;
				console.log('消除');
			} 
		},
		onUnload() {
			if (this.timers) {
				clearInterval(this.timers);
				this.timers = null;
				console.log('消除');
			} 
		},
		onLoad(option) {
			if (option.billId) {
				this.billId = option.billId
			} else if(option.idss){
				this.billidflag = 1
			} else {
				this.billId = option.id
			}
			this.getlist()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		computed: {
			formattedTime() {
				if (this.timeday.days > 0) {
					// 只展示天和小时  
					return `${this.timeday.days}天${this.timeday.hours}小时`
				} else if (this.timeday.hours > 0) {
					// 展示小时和分钟  
					return `${this.timeday.hours}小时${this.timeday.minutes}分钟`
				} else if (this.timeday.minutes > 0) {
					// 展示分钟和秒  
					return `${this.timeday.minutes}分钟${this.timeday.seconds}秒`
				} else if (this.timeday.seconds == 0) {
					this.getlist()
				} else {
					// 展示秒或0（如果秒也为0） 
					this.isUsing = false
					return this.timeday.seconds > 0 ? `${this.timeday.seconds}秒` : '0'
				}
			}
		},
		methods: {
			btnback(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			
			startTimers() {
				if (this.timers) {
					clearInterval(this.timers); // 防止重复设置定时器  
				}
				this.timers = setInterval(() => {
					this.getlist()
				}, 60000); // 60秒  
			},
			// 蓝牙连接取消
			btnlyqx() {
				this.shibaiflag = false
				this.bluetoothflag = false
			},
			// 蓝牙重新连接
			topage() {
				this.btnmsk = false
				this.shibaiflag = false
				this.bluetoothflag = true
				if (this.setMode == null) {
					xBlufi.initXBlufi(1)
					xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
					xBlufi.notifyStartDiscoverBle({
						'isStart': true
					})
					// 停止蓝牙搜索  
					setTimeout(() => {
						xBlufi.notifyStartDiscoverBle({
							'isStart': false
						})
						xBlufi.notifyConnectBle({
							isStart: true,
							deviceId: this.deviceId,
							name: this.name
						})
						xBlufi.notifyInitBleEsp32({
							deviceId: this.deviceId
						})
					}, 1000)
				}
			},


			// 结束订单
			btnjieshu() {
				this.msakflag = true
			},
			btnqx() {
				this.msakflag = false
			},
			btnqd() {
				if (this.detailobj.deviceOnlineStatus == 1) {
					let data = {
						billId: this.billId,
						totalEle: 0
					}
					this.$u.put(`/app/bill/endUse`, data).then(res => {
						if (res.code == 200) {
							this.getlist()
							this.msakflag = false
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							})
						}
					})
				} else {
					if (this.setMode == null) {
						this.btnmsk = false
						this.shibaiflag = false
						this.bluetoothflag = true
						xBlufi.initXBlufi(1)
						xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
						xBlufi.notifyStartDiscoverBle({
							'isStart': true
						})
						// 停止蓝牙搜索  
						setTimeout(() => {
							xBlufi.notifyStartDiscoverBle({
								'isStart': false
							})
							xBlufi.notifyConnectBle({
								isStart: true,
								deviceId: this.deviceId,
								name: this.name
							})
							xBlufi.notifyInitBleEsp32({
								deviceId: this.deviceId
							})
						}, 1000)
					} else {
						let that = this
						uni.getNetworkType({
							success(res) {
								if (res.networkType !== 'none') {
									uni.getConnectedBluetoothDevices({
										success(res) {
											setTimeout(() => {
												xBlufi.notifySendCustomData({
													customData: '11time0@'
												})
												uni.showToast({
													title: '操作成功',
													icon: 'success',
													duration: 1000
												})
												let data = {
													billId: that.billId,
													totalEle: 0
												}
												that.$u.put(`/app/bill/endUse`, data).then(
													res => {
														if (res.code == 200) {
															that.getlist()
															that.msakflag = false
															that.btnmsk = false
															that.shibaiflag = false
															that.bluetoothflag = false
														} else {
															uni.showToast({
																title: res.msg,
																icon: 'none',
																duration: 1000
															})
														}
													})
											}, 1000)
										},
										fail(err) {
											console.error('获取已连接蓝牙设备信息失败：', err)
										}
									})
								}
							}
						})
					}
				}
			},

			// 点击临时开关
			btnimg() {
				if(this.pictrim == true){  //防止频繁点击
					this.pictrim = false
					setTimeout(()=>{
						this.pictrim = true
					},5000)
					if (this.detailobj.deviceOnlineStatus == 1) {
						this.$u.put(`/app/bill/switchDevice?billId=${this.billId}&open=false`).then(res => {
							if (res.code == 200) {
								this.imgflag = false
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000
								})
							}
						})
					} else {
						if (this.setMode == null) {
							this.btnmsk = false
							this.shibaiflag = false
							this.bluetoothflag = true
							xBlufi.initXBlufi(1)
							xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
							xBlufi.notifyStartDiscoverBle({
								'isStart': true
							})
							// 停止蓝牙搜索  
							setTimeout(() => {
								xBlufi.notifyStartDiscoverBle({
									'isStart': false
								})
								xBlufi.notifyConnectBle({
									isStart: true,
									deviceId: this.deviceId,
									name: this.name
								})
								xBlufi.notifyInitBleEsp32({
									deviceId: this.deviceId
								})
							}, 1000)
						} else {
							let that = this
							uni.getNetworkType({
								success(res) {
									if (res.networkType !== 'none') {
										uni.getConnectedBluetoothDevices({
											success(res) {
												setTimeout(() => {
													xBlufi.notifySendCustomData({
														customData: '11close'
													})
													uni.showToast({
														title: '操作成功',
														icon: 'success',
														duration: 1000
													})
													this.imgflag = false
													that.getlist()
													that.msakflag = false
													that.btnmsk = false
													that.shibaiflag = false
													that.bluetoothflag = false
												}, 1000)
											},
											fail(err) {
												console.error('获取已连接蓝牙设备信息失败：', err)
											}
										})
									}
								}
							})
						}
					}
				}else{
					uni.showToast({
						title: '请不要频繁点击',
						icon: 'none',
						duration: 1000
					})
				}
			},
			btnimgs() {
				if(this.pictrim == true){ //防止频繁点击
					this.pictrim = false
					setTimeout(()=>{  
						this.pictrim = true
					},5000)
					if (this.detailobj.deviceOnlineStatus == 1) {
						this.$u.put(`/app/bill/switchDevice?billId=${this.billId}&open=true`).then(res => {
							if (res.code == 200) {
								this.imgflag = true
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000
								})
							}
						})
					} else {
						if (this.setMode == null) {
							this.btnmsk = false
							this.shibaiflag = false
							this.bluetoothflag = true
							xBlufi.initXBlufi(1)
							xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
							xBlufi.notifyStartDiscoverBle({
								'isStart': true
							})
							// 停止蓝牙搜索  
							setTimeout(() => {
								xBlufi.notifyStartDiscoverBle({
									'isStart': false
								})
								xBlufi.notifyConnectBle({
									isStart: true,
									deviceId: this.deviceId,
									name: this.name
								})
								xBlufi.notifyInitBleEsp32({
									deviceId: this.deviceId
								})
							}, 1000)
						} else {
							let that = this
							uni.getNetworkType({
								success(res) {
									if (res.networkType !== 'none') {
										uni.getConnectedBluetoothDevices({
											success(res) {
												setTimeout(() => {
													xBlufi.notifySendCustomData({
														customData: '11open'
													})
													uni.showToast({
														title: '操作成功',
														icon: 'success',
														duration: 1000
													})
													this.imgflag = true
													that.getlist()
													that.msakflag = false
													that.btnmsk = false
													that.shibaiflag = false
													that.bluetoothflag = false
												}, 1000)
											},
											fail(err) {
												console.error('获取已连接蓝牙设备信息失败：', err)
											}
										})
									}
								}
							})
						}
					}
				}else{
					uni.showToast({
						title: '请不要频繁点击',
						icon: 'none',
						duration: 1000
					})
				}
			},

			btndel() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除此订单吗？',
					success: function(res) {
						if (res.confirm) {
							that.flag = false
							that.$u.delete(`/app/bill/${that.billId}`).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 1000
									})
									setTimeout(() => {
										that.flag = true
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1000
									})
									setTimeout(() => {
										that.flag = true
									}, 1500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},

			// 请求订单详情
			getlist() {
				this.$u.get(`/app/bill/${this.billId}`).then((res) => {
					if (res.code == 200) {
						this.detailobj = res.data
						this.isUsing = res.data.isUsing
						this.qrResult = res.data.deviceMac
						if (res.data.devicePowerStatus == 1) {
							this.imgflag = true
						} else {
							this.imgflag = false
						}
						if (this.detailobj.device.expireTime == null) {
							this.timeday = 0
						} else {
							let expireTimeStr = this.detailobj.device.expireTime
							let expireTimeParts = expireTimeStr.split(" ")
							let expireDateParts = expireTimeParts[0].split("-")
							let expireTimePartsTime = expireTimeParts[1].split(":")
							let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1,
								expireDateParts[2],
								expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
							let now = new Date()
							let differenceInMs = expireDate - now
							if (differenceInMs <= 0) {
								this.timeday = 0
							} else {
								if (this.timeday == '') {
									this.timeday = this.formatMilliseconds(differenceInMs)
									this.startTimer()
								}
							}
						}
					}
				})
			},

			// 订单倒计时定时器
			startTimer() {
				this.timer = setInterval(() => {
					if (this.timeday.seconds > 0) {
						this.timeday.seconds--
					} else if (this.timeday.minutes > 0) {
						this.timeday.seconds = 59 // 重置秒数为59  
						this.timeday.minutes--
					} else if (this.timeday.hours > 0) {
						this.timeday.minutes = 59 // 重置分钟数为59  
						this.timeday.hours--
						this.timeday.seconds = 0 // 同时重置秒数为0  
					} else if (this.timeday.days > 0) {
						this.timeday.hours = 23 // 重置小时数为23  
						this.timeday.minutes = 59 // 重置分钟数为59  
						this.timeday.seconds = 0 // 重置秒数为0  
						this.timeday.days--
					} else {
						// 所有时间单位都已减为0，停止定时器  
						clearInterval(this.timer)
						this.timer = null;
						console.log('时间已到期')
					}
				}, 1000); // 每秒执行一次  
			},
			formatMilliseconds(milliseconds) {
				// 计算天数  
				let days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
				// 计算剩余的小时数  
				let hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
				// 计算剩余的分钟数  
				let minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
				// 计算剩余的秒数  
				let seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
				// 返回一个对象，包含天、小时、分钟和秒  
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				}
			},

			// 搜索蓝牙部分
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
						let loadPercent = options.data;
						let loadText = '文件读取中'
						// console.log("文件读取中", options.data)
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
						let ver_data = this.parseCustomData(options.data)
						this.setMode = Math.floor(ver_data.setMode / 60)
						console.log("1收到设备发来的自定义数据结果：", ver_data, this.setMode)
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							devicesarr.forEach(device => {
								const mac = device.name.substring(5)
								if (device.name.slice(5, 17) == this.qrResult) {
									this.deviceId = device.deviceId
									this.name = device.name
									this.mac = device.name.slice(5, 17)
								}
							})
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						// console.log("连接回调：" + JSON.stringify(options))
						if (options.result) {
							setTimeout(() => {
								this.bluetoothflag = false
							}, 3000)
							uni.hideLoading(); {
								console.log("连接回调options.data.deviceId：" + options.data.deviceId,
									"连接回调options.data.name：" + options.data.name)
							}
						} else {
							this.shibaiflag = true
							this.bluetoothflag = false
							uni.hideLoading()
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							setTimeout(() => {
								uni.hideLoading()
								this.bluetoothflag = false
							}, 3000)
							console.log("蓝牙未开启", options)
							this.shibaiflag = true
							return
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							let uniqueDevicesList = Array.from(new Set(this.devicesList))
							// 将去重后的数组重新赋值给 this.devicesList
							this.devicesList = uniqueDevicesList
							let list = []
							setTimeout(() => {
								this.devicesList = list
							}, 200)
							console.log('蓝牙停止搜索ok')
						} else {
							//蓝牙停止搜索失败
							console.log('蓝牙停止搜索失败')
						}
						this.searching = false
						break
				}
			},
			parseCustomData(data) {
				const dataArray = data.split('@');
				const parsedData = {};
				const prefixMap = {
					'V': 'voltage',
					'S': 'switchState',
					'A': 'current',
					'P': 'power',
					'M': 'remainingPower',
					'T': 'setMode',
					'W': 'temperature'
				};
				// 遍历数组并解析每个字段  
				for (let i = 0; i < dataArray.length; i++) {
					const field = dataArray[i];
					for (const prefix in prefixMap) {
						if (field.startsWith(prefix)) {
							const value = field.substring(1);
							const propertyName = prefixMap[prefix];
							parsedData[propertyName] = isNaN(parseFloat(value)) ? value : parseFloat(value);
							break;
						}
					}
				}
				return parsedData;
			},

		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	page {
		background: #F4F5F7;
	}

	.bluetoothbox {
		width: 100%;
		height: 100vh;
		background-color: #f4f1f6;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		text-align: center;

		.img {
			margin-top: 400rpx;
			width: 320rpx;
			height: 320rpx;
		}

		.one {
			font-size: 36rpx;
			color: #000;
		}

		.two {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #ccc;
		}

		.thr {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #ccc;
		}

		.anfour {
			display: flex;
			margin-top: 30rpx;
			justify-content: space-between;
			padding: 0 220rpx;
			box-sizing: border-box;

			.qx {
				width: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border: 1px solid #3D3D3D;
				border-radius: 10rpx;
			}

			.cx {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-color: #8883F0;
				color: #fff;
				border-radius: 10rpx;
			}
		}

		.stop {
			font-size: 36rpx;
			color: #000;
			margin-top: 380rpx;
		}

		.xtop {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #ccc;
		}

		.xqx {
			width: 530rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
			text-align: center;
			background-color: #fff;
			margin: auto;
			margin-top: 200rpx;
		}

		image {
			width: 500rpx;
			height: 500rpx;
			margin-top: 100rpx;
		}
	}

	.jieshu {
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		.jieshus {
			width: 500rpx;
			max-height: 430rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
		}

		.tishi {
			font-size: 32rpx;
			width: 100%;
			text-align: center;
		}

		.img {
			width: 100%;
			margin-top: 20rpx;
			text-align: center;
			margin-bottom: 20rpx;

			image {
				width: 160rpx;
				height: 140rpx;
			}
		}

		.shuom {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			text-align: center;
		}

		.anniu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 0 0 20rpx 20rpx;

			.qux {
				text-align: center;
				width: 100%;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-top: 1px solid #ccc;
				border-right: 1px solid #ccc;
				font-weight: 600;
			}

			.qued {
				text-align: center;
				width: 100%;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-top: 1px solid #ccc;
				color: red;
				font-weight: 600;
			}
		}
	}

	.lishi {
		width: 100%;
		height: 110rpx;
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lt {
			font-size: 32rpx;
		}

		.rt {
			image {
				width: 160rpx;
				height: 80rpx;
			}
		}
	}

	.del {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		// background-color: #fff;
		// background: linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%);
		background-color: rgb(162, 91, 91);
		padding-left: 50rpx;
		padding-right: 50rpx;
		width: 650rpx;
		height: 84rpx;
		// background: red;
		filter: blur(0px);
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		border-radius: 50rpx;
	}

	.dels {
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgb(126, 126, 126);
		padding-left: 50rpx;
		padding-right: 50rpx;
		width: 650rpx;
		height: 84rpx;
		// background: red;
		filter: blur(0px);
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		border-radius: 50rpx;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .6;
		z-index: 1;
	}

	.page {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		padding: 0 46rpx;
		box-sizing: border-box;

		.guangg {
			margin-top: 30rpx;
			margin-bottom: 10rpx;

			image {
				border-radius: 30rpx;
				width: 100%;
				height: 218rpx;
			}
		}

		.list_item {
			width: 658rpx;
			max-height: 410rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 30rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;

			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #D8D8D8;
				padding-bottom: 20rpx;
				box-sizing: border-box;

				.bh {
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.wc {
					font-size: 28rpx;
					color: #8883F0;
				}
			}

			.bot {
				margin-top: 22rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 28rpx;
				padding-top: 20rpx;
				box-sizing: border-box;
				border-top: 1px solid #D8D8D8;

				.time {
					font-size: 24rpx;
					color: #808080;
				}

				.pagexq {
					width: 142rpx;
					height: 48rpx;
					background: #8883F0;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 20rpx;
				}
			}

			.item_xx {
				margin-top: 22rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.shengyu {
			font-size: 40rpx;
			color: #3D3D3D;
			margin-top: 46rpx;
		}

		.time {
			font-size: 48rpx;
			color: #8883F0;
			margin-top: 12rpx;
		}

		.setmeal {
			margin-top: 38rpx;
			width: 658rpx;
			height: 150rpx;
			background: rgba(136, 131, 240, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07999999821186066), rgba(156.31499379873276, 140.25000303983688, 255, 0.23999999463558197)) 2 2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 42rpx;
			box-sizing: border-box;

			.cen {
				width: 2rpx;
				height: 108rpx;
				border: 2rpx solid #8883F0;
				opacity: 0.5;
			}

			.lt {
				display: flex;
				align-items: center;
				text-align: center;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-right: 30rpx;
				}

				.one {
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.two {
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}

			.rt {
				display: flex;
				align-items: center;
				text-align: center;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-right: 30rpx;
				}

				.one {
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.two {
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>