<template>
	<view class="control-tab">
		<!-- 顶部状态卡片 -->
            <view class="status-card">
            	<view class="" v-if="kjobj.status == 1"> <image style="width: 60rpx;height: 60rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uzZLS6VfQDFA1jTNaZVq" mode="aspectFill"></image> </view>
				<view class="" v-if="kjobj.status == 2"> <image style="width: 56rpx;height: 60rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uuGVupItvaHcUcDfB8Dw" mode="aspectFill"></image> </view>
				<view class="" v-if="kjobj.status == 3"> <image style="width: 60rpx;height: 60rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u69cK2hDbhRQ9BQAEysP" mode="aspectFill"></image> </view>
				<view class="" v-if="kjobj.status == 4"> <image style="width: 60rpx;height: 60rpx;" src="https://api.ccttiot.com/smartmeter/img/static/urRtZWuAS07btljjIrty" mode="aspectFill"></image> </view>
            	<text class="status-title">{{ titlename }}</text>
            	<!-- <text class="status-subtitle">{{ $i18n.t('alarmCleared') }}</text> -->
            </view>

		<!-- 控制栅格卡片 -->
		<view class="grid-card">
            <view class="grid-item" @click="onOpenAlarm">
				<text class="grid-label">{{ $i18n.t('armAlarm') }}</text>
				<image style="width: 102rpx;height: 102rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uyM0CBeinHHNAs5lp3NF" mode="aspectFill"></image>
			</view>
			<view class="divider-vertical"></view>
			<view class="grid-item" @click="onCloseAlarm">
				<text class="grid-label">{{ $i18n.t('disarmAlarm') }}</text>
				<image style="width: 94rpx;height: 102rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uHzvT9I1TMOtJs93dpBP" mode="aspectFill"></image>
			</view>
			<view class="divider-horizontal"></view>
			<view class="grid-item" @click="onNightMode">
				<view class="grid-label">{{ $i18n.t('nightModeLabel') }}</view>
				<image style="width: 102rpx;height: 102rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uYsM9Nn95AK9c3JkUqvb" mode="aspectFill"></image>
			</view>
			<view class="divider-vertical"></view>
			<view class="grid-item" @click="onEmergency">
				<view class="grid-label">{{ $i18n.t('emergencyLabel') }}</view>
				<image style="width: 102rpx;height: 102rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uSkABcRy9Qk8KRzcFqj5" mode="aspectFill"></image>
			</view>
		</view>
		<view class="" style="width: 100rpx;height: 100rpx;margin: auto;margin-top: 50rpx;" @click="btnkongjian">
			<image style="width: 80rpx;height: 80rpx;" src="https://api.ccttiot.com/smartmeter/img/static/c650IT3ZxgcljMf8ZSGI" mode="aspectFill"></image>
		</view>
		
		<!-- 倒计时弹窗   -->
		<view v-if="showCountdownModal" class="modal-overlay">
			<view class="countdown-modal">
				<view class="progress-circle">
					<view class="progress-ring countdown-ring" :style="{ transform: `rotate(${(3-countdown)*120}deg)` }"></view>
					<view class="countdown-number">{{ countdown }}</view>
				</view>
				<text class="modal-title">{{$i18n.t('fssos')}}...</text>
				<button class="cancel-btn" @click="cancelCountdown">{{$i18n.t('cancel')}}</button>
			</view>
		</view>
		
		<!-- 定位获取弹窗  -->
		<view v-if="showLocationModal" class="modal-overlay">
			<view class="location-modal">
				<view class="progress-circle">
					<view class="progress-ring location-ring" :style="{ transform: `rotate(${locationProgress*360}deg)` }"></view>
					<view class="location-icon">
						<view class="location-pin"></view>
						<view class="location-waves">
							<view class="wave wave1"></view>
							<view class="wave wave2"></view>
							<view class="wave wave3"></view>
						</view>
					</view>
				</view>
				<text class="modal-title">{{$i18n.t('fsdw')}}...</text>
				<button class="cancel-btn" @click="cancelLocation">{{$i18n.t('cancel')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
		name: 'ControlTab',
        props: {
            statusTitle: {
                type: String,
                default: ''
            }
        },
		data() {
			return {
				kjobj:{},
				titlename:'',
				// 倒计时弹窗相关
				showCountdownModal: false,
				countdown: 3,
				countdownTimer: null,
				// 定位弹窗相关
				showLocationModal: false,
				locationTimer: null,
				locationProgress: 0,
				minHoldTimer: null,
				
				sockedata: {},
				socketTask: null,
				messages: [],
				reconnectAttempts: 0,
				maxReconnectAttempts: 5,
				reconnectInterval: 3000,
				isPageActive: true,
				deviceMac1: '',
				deviceMac2: '',
			}
		},
		computed: {
			// 计算属性可以在这里添加
		},
		created() {
			this.deviceMac1 = uni.getStorageSync('mac1')
			this.deviceMac2 = uni.getStorageSync('mac2')
			this.getxq()
			this.initWebSocket()
		},
		mounted() {
			// 监听空间切换事件
			uni.$on('spaceChanged', this.handleSpaceChanged)
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('spaceChanged', this.handleSpaceChanged)
			// 清理定时器
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer)
			}
			if (this.locationTimer) {
				clearInterval(this.locationTimer)
			}
			if (this.minHoldTimer) {
				clearTimeout(this.minHoldTimer)
				this.minHoldTimer = null
			}
		},
		onLoad(option) {
				
		},
		methods: {
			// 请求空间详情
			getxq(){
				let spaceId = uni.getStorageSync('kjid')
				this.$http.get(`/bst/space/${spaceId}`).then(res => {
					if(res.code == 200){
						this.kjobj = res.data
						if(res.data.status == 1){
							this.titlename = this.$i18n.t('statusArmed')
						}else if(res.data.status == 2){
							this.titlename = this.$i18n.t('statusDisarmed')
						}else if(res.data.status == 3){
							this.titlename = this.$i18n.t('statusNight')
						}
					}
				})
			},
			
			//WebSocket 自动重连实现
			initWebSocket() {
				let token = uni.getStorageSync('token')
				// 关闭已有连接
				if (this.socketTask) {
					this.socketTask.close()
					this.socketTask = null
				}
				// 创建新连接
				this.socketTask = uni.connectSocket({
					url: `wss://gw.ccttiot.com/prod-api/ws/ws/oneNet?mac=${this.deviceMac1}`,
					success: () => {
						console.log('WebSocket连接建立中...')
					},
					fail: (err) => {
						console.error('WebSocket连接失败:', err)
						this.scheduleReconnect()
					}
				});
				// 监听连接打开
				this.socketTask.onOpen(() => {
					console.log('WebSocket连接已打开')
					this.reconnectAttempts = 0; // 重置重连计数器
					// 发送订阅消息（如果需要）
					this.socketTask.send({
						data: JSON.stringify({
							action: 'subscribe'
						}),
						success: () => console.log('订阅消息发送成功'),
						fail: (err) => console.error('订阅消息发送失败:', err)
					})
				})
				// 监听消息接收
				this.socketTask.onMessage((res) => {
					console.log('收到实时消息:', res.data)
					this.messages.push(res.data) // 存储消息
					let num = ''
					try {
						const data = JSON.parse(res.data)
						console.log('解析后的JSON数据:', data)
						// 查找num值
						let num = null
						// 第一步：先判断外层是否有data字段，且data是字符串格式的JSON
						if (data.data && typeof data.data === 'string') {
						  try {
						    // 解析内层的data字符串为JSON对象
						    const innerData = JSON.parse(data.data)
						    // 遍历内层对象找num相关键
						    const innerKeys = Object.keys(innerData)
						    for (const key of innerKeys) {
						      if (key.toLowerCase().includes('num')) {
						        num = innerData[key]
						        console.log(`从内层${key}获取到num值:`, num)
						        break
						      }
						    }
						  } catch (e) {
						    console.error('解析内层data字符串失败:', e)
						  }
						}
						// 处理业务逻辑
						if (num !== null) {
						  const numValue = Number(num)
						  if (numValue === 1) {
						    this.getstatus(1)
							uni.showModal({
								title: '提示',	
								content: '布防信息',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									} else if (res.cancel) {
							
									}
								}
							})
							 uni.showToast({ title: '收到新无操作消息', icon: 'none', duration: 3000})
						  } else if (numValue === 2) {
						    this.getstatus(2)
							uni.showModal({
								title: '提示',	
								content: '撤防信息',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									} else if (res.cancel) {
							
									}
								}
							})
						  } else if (numValue === 3) {
						    this.getstatus(3)
							uni.showModal({
								title: '提示',	
								content: '夜间信息',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									} else if (res.cancel) {
							
									}
								}
							})
						  } else if(numValue === 4) {
							  uni.showModal({
							  	title: '提示',	
							  	content: '报警信息',
							  	showCancel: false,
							  	success: function(res) {
							  		if (res.confirm) {
							  			
							  		} else if (res.cancel) {
							  
							  		}
							  	}
							  })
						    this.startCountdown()
						  } else {
						    console.log('num值不在1-4范围内:', numValue)
							uni.showModal({
								title: '提示',	
								content: data.data,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									} else if (res.cancel) {
							
									}
								}
							})
						  }
						} else {
						  uni.showModal({
						  	title: '提示',	
						  	content: data.data,
						  	showCancel: false,
						  	success: function(res) {
						  		if (res.confirm) {
						  			
						  		} else if (res.cancel) {
						  
						  		}
						  	}
						  })
						  console.log('没有找到num值')
						  console.log('外层所有可用键:', Object.keys(data))
						  // 补充打印内层data内容，方便调试
						  if (data.data) {
						    console.log('内层data内容:', data.data)
						  }
						}
						// if(this.titlename == this.$i18n.t('statusDisarmed')){
						// 	this.titlename = this.$i18n.t('statusArmed')
						// 	this.getstatus(1)
						// }else{
						// 	this.titlename = this.$i18n.t('statusDisarmed')
						// 	this.getstatus(2)
						// }
					} catch (e) {
						console.log('原始消息内容:', res.data)
					}
				});
				// 监听错误
				this.socketTask.onError((err) => {
					console.error('WebSocket错误:', err)
					this.scheduleReconnect()
				});
				// 监听连接关闭
				this.socketTask.onClose((res) => {
					console.log('WebSocket连接已关闭', res)
					if (this.isPageActive) {
						this.scheduleReconnect()
					}
				})
			},
			// 关闭WebSocket连接
			closeWebSocket() {
				if (this.socketTask) {
					this.socketTask.close({
						success: () => {
							console.log('WebSocket已主动关闭')
							this.socketTask = null
						},
						fail: (err) => {
							console.error('WebSocket关闭失败:', err)
							this.socketTask = null
						}
					})
				}
			},
			// 安排重连
			scheduleReconnect() {
				if (!this.isPageActive || this.reconnectAttempts >= this.maxReconnectAttempts) {
					console.log('已达到最大重连次数或页面已关闭，停止重连')
					return
				}
				this.reconnectAttempts++;
				console.log(`尝试第 ${this.reconnectAttempts} 次重连，等待 ${this.reconnectInterval/1000} 秒...`)
				setTimeout(() => {
					this.initWebSocket()
				}, this.reconnectInterval)
				// 指数退避策略，增加重连间隔
				this.reconnectInterval = Math.min(this.reconnectInterval * 2, 30000) // 最大不超过30秒
			},
			
			
			
			// 点击跳转到空间详情
			btnkongjian(){
				uni.navigateTo({
					url:'/pages/kongjian/kongjianxq'
				})
			},
			// 点击布防
			onOpenAlarm() {
				uni.showModal({
					title: this.$i18n.t('confirmOperation'),
					content: this.$i18n.t('confirmArmAlarm'),
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							this.getstatus(1)
						}
					}
				})
			},
			// 点击撤防
			onCloseAlarm() {
				uni.showModal({
					title: this.$i18n.t('confirmOperation'),
					content: this.$i18n.t('confirmDisarmAlarm'),
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							this.getstatus(2)
						}
					}
				})
			},
			// 点击开启夜间模式
			onNightMode() {
				uni.showModal({
					title: this.$i18n.t('confirmOperation'),
					content: this.$i18n.t('confirmNightMode'),
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							this.getstatus(3)
						}
					}
				})
			},
			// 操作状态
			getstatus(status){
				let spaceId = uni.getStorageSync('kjid')
				let data = {
					spaceId:spaceId,
					status:status
				}
				this.$http.put(`/bst/space/changeStatus`,data).then(res => {
					if(res.code == 200){
						uni.showToast({ title: res.msg, icon: 'success',duration:3000})
						this.getxq()
						// 发射事件通知父组件状态已改变
						this.$emit('status-changed', { status, spaceId })
					}else{
						uni.showToast({ title: res.msg, icon: 'none',duration:3000})
					}
				})
			},
			// 处理空间变化
			handleSpaceChanged(payload){
				try{
					console.log('控制模块收到空间变化事件:', payload)
					// 重新获取空间详情
					this.getxq()
				}catch(e){
					console.warn('控制模块处理空间切换失败:', e)
				}
			},
			// 点击报警
			onEmergency() {
				uni.showModal({
					title: this.$i18n.t('confirmOperation'),
					content: this.$i18n.t('confirmEmergency'),
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							this.startCountdown()
						}
					}
				})
			},
			// 开始倒计时
			startCountdown() {
				this.showCountdownModal = true
				this.countdown = 3
				this.countdownTimer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						this.clearCountdown()
						this.checkLocationPermission()
					}
				}, 1000)
			},
			// 取消倒计时
			cancelCountdown() {
				this.clearCountdown()
			},
			// 清除倒计时
			clearCountdown() {
				this.showCountdownModal = false
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer)
					this.countdownTimer = null
				}
			},
			// 检查定位权限
			checkLocationPermission() {
				// 直接尝试获取定位，如果失败则发送无定位的请求
				this.startLocation()
			},
			// 开始获取定位
			startLocation() {
				this.showLocationModal = true
				this.locationProgress = 0
				// 进度条动画（纯展示，不代表业务完成）
				this.locationTimer = setInterval(() => {
					this.locationProgress += 0.005
					if (this.locationProgress >= 1) {
						this.locationProgress = 0
					}
				}, 16) // 约60fps
				// 至少展示3秒动画，然后再继续后续流程
				let holdDone = false
				let locationSucceeded = false
				let locationData = null
				const proceedIfReady = () => {
					if (!holdDone) return
					this.clearLocation()
					if (locationSucceeded && locationData) {
						this.sendSOSRequest(locationData)
					} else {
						this.sendSOSDirectly()
					}
				}
				this.minHoldTimer = setTimeout(() => {
					holdDone = true
					proceedIfReady()
				}, 3000)
				// 同时尝试获取位置（结果先存起来，等3秒到再决定是否带位置信息）
				if (typeof uni.getLocation === 'function') {
					try {
						uni.getLocation({
							type: 'wgs84',
							timeout: 5000,
							success: (res) => {
								console.log('获取位置成功:', res)
								let spaceId = uni.getStorageSync('kjid')
								locationData = {
									spaceId: spaceId,
									lon: res.longitude.toString(),
									lat: res.latitude.toString()
								}
								locationSucceeded = true
								proceedIfReady()
							},
							fail: (err) => {
								console.log('获取位置失败:', err)
								locationSucceeded = false
								locationData = null
								proceedIfReady()
							}
						})
					} catch (error) {
						console.log('调用定位接口异常:', error)
						locationSucceeded = false
						locationData = null
						proceedIfReady()
					}
				} else {
					console.log('当前环境不支持定位功能')
					locationSucceeded = false
					locationData = null
					proceedIfReady()
				}
			},
			// 取消定位
			cancelLocation() {
				this.clearLocation()
			},
			// 清除定位相关
			clearLocation() {
				this.showLocationModal = false
				if (this.locationTimer) {
					clearInterval(this.locationTimer)
					this.locationTimer = null
				}
				this.locationProgress = 0
			},
			// 直接发送SOS请求（无定位）
			sendSOSDirectly() {
				let spaceId = uni.getStorageSync('kjid')
				let data = {
					spaceId: spaceId,
					lon: '',
					lat: ''
				}
				this.sendSOSRequest(data)
			},
			getsos(){
				let spaceId = uni.getStorageSync('kjid')
				// 获取当前位置
				uni.getLocation({
					type: 'wgs84', // 返回可以用于uni.openLocation的经纬度
					timeout: 10000, // 10秒超时
					success: (res) => {
						uni.hideLoading()
						console.log('获取位置成功:', res)
						let data = {
							spaceId: spaceId,
							lon: res.longitude.toString(),
							lat: res.latitude.toString()
						}
						this.sendSOSRequest(data)
					},
					fail: (err) => {
						uni.hideLoading()
						console.log('获取位置失败:', err)
						// 如果获取位置失败，仍然发送请求但使用空坐标
						let data = {
							spaceId: spaceId,
							lon: '',
							lat: ''
						}
						this.sendSOSRequest(data)
					}
				})
			},
			// 发送SOS请求的方法
			sendSOSRequest(data) {
				this.$http.put(`/bst/space/panic`, data).then(res => {
					if(res.code == 200){
						uni.showToast({ title: res.msg, icon: 'success', duration: 3000})
					}else{
						uni.showToast({ title: res.msg, icon: 'none', duration: 3000})
					}
				}).catch(err => {
					console.log('发送SOS请求失败:', err)
					uni.showToast({ title: '发送报警失败，请重试', icon: 'none', duration: 3000})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.control-tab{
		padding: 24rpx 24rpx 40rpx;
		box-sizing: border-box;
		background: #f5f6f7;
		min-height: 100%;
		padding-top: 50rpx;
	}
	.status-card{
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 28rpx;
	}
	.status-icon{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		border: 6rpx solid #3aa273;
		border-right-color: transparent;
		transform: rotate(30deg);
		margin-bottom: 12rpx;
	}
	.status-title{
		font-size: 32rpx;
		color: #222;
		font-weight: 600;
		margin-bottom: 6rpx;
		margin-top: 20rpx;
	}
	.status-subtitle{
		font-size: 26rpx;
		color: #35a06f;
	}

	.grid-card{
		position: relative;
		background: #fff;
		margin-top: 100rpx;
		border-radius: 24rpx;
		padding: 28rpx 0;
		display: grid;
		grid-template-columns: 1fr 2rpx 1fr;
		grid-template-rows: auto 2rpx auto;
		width: 648rpx;
		margin: auto;
	}
	.grid-item{
		width: 324rpx;
		height: 360rpx;
		display: flex;
		padding: 40rpx 60rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.grid-label{
		font-size: 26rpx;
		color: #7a7f85;
		margin-bottom: 24rpx;
	}
	.grid-icon{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: #000;
	}
	.icon-ring{
		background: none;
		border: 12rpx solid #000;
		border-radius: 60rpx;
	}
	.icon-ring-small{
		background: none;
		border: 12rpx solid #000;
		border-radius: 60rpx;
		clip-path: inset(0 18rpx 0 0);
	}
	.icon-rotate{
		background: none;
		position: relative;
		border: 12rpx solid #000;
		border-radius: 60rpx;
	}
	.icon-rotate:after{
		content: '';
		position: absolute;
		right: -8rpx;
		bottom: -8rpx;
		width: 28rpx;
		height: 28rpx;
		background: #000;
		border-radius: 50%;
	}
	.icon-bang{
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000;
		color: #fff;
		font-weight: 700;
	}
	.icon-bang:after{
		content: '!';
		color: #fff;
		font-size: 64rpx;
		line-height: 1;
	}
	.divider-vertical{
		width: 2rpx;
		background: #eee;
	}
	.divider-horizontal{
		height: 2rpx;
		background: #eee;
		grid-column: 1 / 4;
	}
	
	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		z-index: 9999;
	}
	
	.countdown-modal, .location-modal {
		background: #f5f6f7;
		border-radius: 32rpx 32rpx 0 0;
		padding: 80rpx 60rpx 80rpx;
		width: 100%;
		bottom: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		min-height: 60vh;
		box-sizing: border-box;
		animation: modal-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	@keyframes modal-slide-up {
		0% {
			transform: translateY(100%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.progress-circle {
		position: relative;
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 60rpx;
	}
	
	.progress-ring {
		position: absolute;
		top: 0;
		left: 0;
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		border: 12rpx solid #e8e9ea;
		transition: transform 0.3s ease;
	}
	
	.countdown-ring {
		border-top: 12rpx solid #ec5a5a;
		border-right: 12rpx solid #ec5a5a;
		border-bottom: 12rpx solid transparent;
		border-left: 12rpx solid transparent;
		transform-origin: center;
		animation: location-spin 1.5s linear infinite;
		transition: transform 0.1s ease-out;
	}
	
	.location-ring {
		border-top: 12rpx solid #ec5a5a;
		animation: location-spin 1.5s linear infinite;
		transition: transform 0.1s ease-out;
	}
	
	@keyframes location-spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.countdown-number {
		position: absolute;
		top: 50%;
		left: 54%;
		transform: translate(-50%, -50%);
		font-size: 120rpx;
		font-weight: bold;
		color: #ec5a5a;
		line-height: 1;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		animation: number-pulse 1s ease-in-out infinite;
	}
	@keyframes number-pulse {
		0%, 100% {
			transform: translate(-50%, -50%) scale(1);
		}
		50% {
			transform: translate(-50%, -50%) scale(1.05);
		}
	}
	.location-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80rpx;
		height: 80rpx;
	}
	
	.location-pin {
		width: 20rpx;
		height: 20rpx;
		background: #ec5a5a;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 60%;
		transform: translate(-50%, -50%);
		z-index: 3;
		box-shadow: 0 0 0 6rpx rgba(255, 107, 53, 0.3);
	}
	.location-pin::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32rpx;
		height: 32rpx;
		background: #ec5a5a;
		border-radius: 50% 50% 50% 0;
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	
	.location-waves {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80rpx;
		height: 80rpx;
	}
	
	.wave {
		position: absolute;
		top: 50%;
		left: 60%;
		transform: translate(-50%, -50%);
		border: 2rpx solid #ec5a5a;
		border-radius: 50%;
		opacity: 0.6;
		animation: wave-animation 2s ease-out infinite;
	}
	
	.wave1 {
		width: 40rpx;
		height: 40rpx;
		animation-delay: 0s;
	}
	
	.wave2 {
		width: 60rpx;
		height: 60rpx;
		animation-delay: 0.67s;
	}
	
	.wave3 {
		width: 80rpx;
		height: 80rpx;
		animation-delay: 1.33s;
	}
	
	@keyframes wave-animation {
		0% {
			transform: translate(-50%, -50%) scale(0.3);
			opacity: 1;
		}
		50% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 0.6;
		}
		100% {
			transform: translate(-50%, -50%) scale(1.8);
			opacity: 0;
		}
	}
	
	.modal-title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 80rpx;
		text-align: center;
		font-weight: 500;
	}
	
	.cancel-btn {
		width: 100%;
		max-width: 500rpx;
		height: 100rpx;
		background: #ec5a5a;
		color: #fff;
		border: none;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		margin-top: auto;
		position: relative;
		overflow: hidden;
	}
	
	.cancel-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}
	
	.cancel-btn:hover::before {
		left: 100%;
	}
	
	.cancel-btn:active {
		background: #e55a2b;
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
	}
</style> 