<template>
	<view class="container">
		<!-- 顶部Logo区域 -->
		<view class="header-section">
			<view class="logo-container">
				<image class="logo-image" src="/static/logo.png" mode="aspectFit" />
				<text class="app-name">共享风扇</text>
			</view>

			<uv-notice-bar :text="noticeText" mode="link" :speed="50" :show-icon="true" color="#2196F3"
				bg-color="#E3F2FD" icon="volume"></uv-notice-bar>
		</view>
		<!-- 地图标题 -->
		<!-- 		<view class="map-title">
			<text>附近场地</text>
		</view> -->


		<!-- 地图组件 -->
		<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
			:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
			@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
			@mapCenterChange="onMapCenterChange" />

		<!-- 操作步骤指引（常驻显示） -->
		<view class="steps-guide">
			<view class="guide-header">
				<text class="guide-title">使用指南</text>
			</view>
			<view class="steps-container">
				<view class="step-item" v-for="(step, index) in guideSteps" :key="index">
					<view class="step-number">{{ index + 1 }}</view>
					<view class="step-content">
						<text class="step-title">{{ step.title }}</text>
						<text class="step-desc">{{ step.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 地图加载状态 -->
		<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text>正在获取位置信息...</text>
			</view>
		</view>

		<!-- 场地列表弹窗 -->
		<view class="location-popup" v-if="showLocationPopup">
			<view class="popup-mask" @click="hideLocationList"></view>
			<view class="location-sheet" :class="{ 'expanded': isExpanded }">
				<!-- <view class="sheet-handle" @click="toggleSheet">
					<view class="handle-bar"></view>
				</view> -->

				<view class="sheet-header">
					<text class="sheet-title">附近设备场地 ({{ filteredPositions.length }})</text>
					<view class="close-btn" @click="hideLocationList">
						<!-- <image class="close-icon" src="/static/scan-icon.png" mode="aspectFit" /> -->
						<uv-icon name='close'></uv-icon>
					</view>
				</view>

				<scroll-view class="sheet-content" scroll-y="true">
					<view class="position-item" v-for="(item, index) in filteredPositions" :key="item.positionId"
						@click="selectPositionFromPopup(item)">
						<view class="position-info">
							<view class="position-name">{{ item.name }}</view>
							<view class="status-tag" :class="item.status">
								<text>{{ item.status === 'online' ? '可租借/归还' : '不可租借/归还' }}</text>
							</view>
							<view class="position-time" v-if="item.workTime && item.workTime !== '0'">
								<text>营业时间：{{ item.workTime }}</text>
							</view>
						</view>
						<view class="position-actions">
							<view class="distance-info" v-if="item.distance">
								<text>{{ item.distance }}</text>
							</view>
							<view class="status-tag" :class="item.status">
								<text>{{ item.status === 'online' ? '营业中' : '暂停服务' }}</text>
							</view>

							<view class="nav-btn" @click.stop="navigateToPosition(item)">
								<text>导航</text>
							</view>
						</view>
					</view>

					<view class="empty-state" v-if="filteredPositions.length === 0 && !isLoading">
						<image class="empty-icon" src="/static/scan-icon.png" mode="aspectFit" />
						<text class="empty-text">附近5公里内暂无设备</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="isLoading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text>正在获取场地信息...</text>
			</view>
		</view>

		<!-- 手机号授权弹窗 -->
		<view class="phone-auth-popup" v-if="showPhoneAuthPopup">
			<view class="popup-mask" @click.stop="showPhoneAuthPopup = false"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">授权获取手机号</text>
				</view>
				<view class="popup-body">
					<view class="auth-desc">
						<text>为了提供更好的服务和紧急联系，需要授权获取您的手机号</text>
					</view>
					<button class="auth-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
						<text>一键获取手机号</text>
					</button>
					<view class="auth-cancel" @click="showPhoneAuthPopup = false">
						<text>暂不授权</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		getQueryString,
		wxLogin
	} from '../../util/index.js'
	import {
		URL
	} from "../../config/url.js"
	import {
		getDeviceInfo,
		getPotionsDetail
	} from '../../config/user.js'
	// 导入地图工具函数
	import {
		getUserLocation,
		getRegeo,
		calculateDistanceSync,
		testDistanceCalculation
	} from '../../utils/mapUtils.js'
	// 同样需要使用相对路径引入组件
	// 注意：从 pages/index/ 目录访问 components/ 需要使用 ../../components/ 路径
	import MapComponent from '../../components/MapComponent.vue'

	// 响应式数据
	const searchKeyword = ref('')
	const userLocation = ref(null)
	const positionList = ref([])
	const filteredPositions = ref([])
	const isExpanded = ref(false)
	const isLoading = ref(false)
	const showPhoneAuthPopup = ref(false)
	const isLocationInitialized = ref(false)
	const showLocationPopup = ref(false)

	// 使用指南步骤
	const guideSteps = ref([{
			title: '扫码使用',
			desc: '找到附近设备，扫描设备上的二维码即可开始租借'
		},
		{
			title: '免押金支付',
			desc: '无需支付押金，使用支付分免押即可完成租借'
		},
		{
			title: '开始使用',
			desc: '设备自动解锁，风扇弹出后取出即可开始使用'
		},
		{
			title: '归还设备',
			desc: '使用完毕后，按照设备规格要求将风扇还入即可结束订单'
		}
	])

	// 滚动通知内容
	const noticeText = ref('消费规则：每小时5元，不足1小时按1小时计费，最高24小时封顶，请爱护设备，使用后请及时归还')

	// 距离格式化函数
	const formatDistance = (distanceInMeters) => {
		if (distanceInMeters < 1000) {
			return `${Math.round(distanceInMeters)}m`
		} else {
			return `${(distanceInMeters / 1000).toFixed(1)}km`
		}
	}


	// 组件引用
	const mapRef = ref(null)

	// 计算属性
	const searchPlaceholder = computed(() => {
		if (userLocation.value && userLocation.value.address) {
			return `${userLocation.value.district || '当前位置'} - 搜索附近场地`
		}
		return '搜索附近场地'
	})

	// 生命周期
	onMounted(() => {
		init()
	})

	onUnmounted(() => {
		// 清理工作在子组件中处理
	})

	// 方法
	const init = async () => {
		isLoading.value = true
		try {
			// 开发环境测试距离计算
			if (process.env.NODE_ENV === 'development') {
				testDistanceCalculation()
			}

			// 1. 先获取用户位置
			await getUserLocationAndAddress()

			// 2. 加载场地列表
			await loadPositions()

			// 3. 检查是否需要显示使用指南（可以根据用户行为记录来决定）
			// 这里暂时默认显示，后续可以根据用户使用情况优化

		} catch (error) {
			console.error('初始化失败:', error)
			// 即使失败也要加载场地列表
			await loadPositions()
		} finally {
			isLoading.value = false
		}
	}

	const getUserLocationAndAddress = async () => {
		try {
			// 使用腾讯地图SDK获取位置
			const location = await getUserLocation()

			// 保存用户位置
			userLocation.value = {
				longitude: location.longitude,
				latitude: location.latitude
			}

			// 将经纬度写入本地缓存（基础信息）
			try {
				uni.setStorageSync('userLocation', {
					longitude: location.longitude,
					latitude: location.latitude
				})
			} catch (e) {
				console.warn('缓存基础定位信息失败:', e)
			}

			// 只在首次初始化时设置标记
			if (!isLocationInitialized.value) {
				isLocationInitialized.value = true
			}

			// 获取详细地址信息
			try {
				const addressResult = await getRegeo(location.longitude, location.latitude)
				if (addressResult.success) {
					const addressInfo = addressResult.data
					userLocation.value.address = addressInfo.formatted_address
					userLocation.value.city = addressInfo.addressComponent.city
					userLocation.value.district = addressInfo.addressComponent.district

					// 更新本地缓存，包含地址信息
					try {
						uni.setStorageSync('userLocation', {
							longitude: userLocation.value.longitude,
							latitude: userLocation.value.latitude,
							address: userLocation.value.address,
							city: userLocation.value.city,
							district: userLocation.value.district
						})
					} catch (e) {
						console.warn('缓存带地址的定位信息失败:', e)
					}
				}
			} catch (error) {
				// 忽略地址信息错误，使用基础定位信息
			}

			// 等待地图组件响应位置变化后，重新加载场地列表
			setTimeout(async () => {
				await loadPositions()

				uni.hideLoading()
			}, 800)

		} catch (error) {
			console.error('获取位置失败:', error)
			uni.showToast({
				title: '获取位置失败，显示默认地图',
				icon: 'none'
			})
		}
	}

	const loadPositions = async () => {
		try {
			if (!uni.getStorageSync('token')) {
				await wxLogin()
			}

			const res = await uni.request({
				url: `${URL}/device/position/app/list`,
				method: 'GET',
				header: {
					'Authorization': "Bearer " + uni.getStorageSync('token'),
					'Clientid': uni.getStorageSync('client_id')
				},
				data: {
					latitude: userLocation.value.latitude,
					longitude: userLocation.value.longitude
				}
			})

			if (res.statusCode === 200 && res.data.code === 200) {
				positionList.value = res.data.rows || []
				calculateDistances()
				filteredPositions.value = [...positionList.value]
			} else {
				console.error('获取场地列表失败:', res.data.msg)
			}
		} catch (error) {
			console.error('获取场地列表异常:', error)
		}
	}

	const calculateDistances = async (centerPoint = null) => {
		// 如果没有指定中心点，优先使用用户位置，其次使用地图中心
		const center = centerPoint || userLocation.value || (mapRef.value?.mapCenter)

		// 严格检查center对象的有效性
		if (!center || typeof center.longitude === 'undefined' || typeof center.latitude === 'undefined') {
			return
		}

		positionList.value.forEach(item => {
			if (item.longitude && item.latitude) {
				try {
					// 使用同步方法计算距离，避免await调用需要改动大量代码
					const distanceInMeters = calculateDistanceSync(
						center.latitude,
						center.longitude,
						parseFloat(item.latitude),
						parseFloat(item.longitude)
					)
					// 使用智能距离格式化
					item.distance = formatDistance(distanceInMeters)
					// 同时保存原始米数用于排序和过滤
					item.distanceInMeters = distanceInMeters
				} catch (error) {
					console.error('计算距离异常:', error, item)
					item.distance = '999.0km' // 设置一个默认距离
					item.distanceInMeters = 999000
				}
			}
		})

		// 按距离排序（使用米数进行排序）
		positionList.value.sort((a, b) => {
			return (a.distanceInMeters || 999000) - (b.distanceInMeters || 999000)
		})
	}

	const loadPositionsByCenter = async (center) => {
		try {
			if (!uni.getStorageSync('token')) {
				await wxLogin()
			}

			// 使用原有接口获取所有场地
			const res = await uni.request({
				url: `${URL}/device/position/list`,
				method: 'GET',
				header: {
					'Authorization': "Bearer " + uni.getStorageSync('token'),
					'Clientid': uni.getStorageSync('client_id')
				}
			})

			if (res.statusCode === 200 && res.data.code === 200) {
				positionList.value = res.data.rows || []
				// 基于地图中心计算距离
				calculateDistances(center)

				// 可以选择性过滤距离过远的场地（比如超过10km的）
				const maxDistanceInMeters = 10000 // 最大显示距离，单位米（10km）
				filteredPositions.value = positionList.value.filter(item => {
					return !item.distanceInMeters || item.distanceInMeters <= maxDistanceInMeters
				})

			} else {
				console.error('根据地图中心加载场地失败:', res.data.msg)
				positionList.value = []
				filteredPositions.value = []
			}
		} catch (error) {
			console.error('根据地图中心加载场地异常:', error)
			// 如果请求失败，保持当前的场地列表不变
		}
	}

	const handleRelocate = async () => {
		uni.showLoading({
			title: '定位中...'
		})

		// 直接重新加载当前页面
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	const onMapCenterChange = (center) => {
		loadPositionsByCenter(center)
	}

	const selectPosition = (position) => {
		uni.showActionSheet({
			itemList: ['扫码使用', '导航前往'],
			success: (res) => {
				switch (res.tapIndex) {
					case 0:
						handleScan()
						break
					case 1:
						navigateToPosition(position)
						break
				}
			}
		})
	}

	const selectPositionFromPopup = (position) => {
		// 先关闭弹窗
		hideLocationList()

		// 延迟一点时间再显示选择菜单，让弹窗关闭动画完成
		setTimeout(() => {
			selectPosition(position)
		}, 200)
	}

	const navigateToPosition = (position) => {
		const latitude = parseFloat(position.latitude)
		const longitude = parseFloat(position.longitude)

		uni.openLocation({
			latitude,
			longitude,
			name: position.name,
			address: position.location
		})
	}

	const toggleSheet = () => {
		isExpanded.value = !isExpanded.value
	}

	const onSearchInput = () => {
		if (!searchKeyword.value.trim()) {
			filteredPositions.value = [...positionList.value]
		} else {
			filteredPositions.value = positionList.value.filter(item => {
				return item.name.includes(searchKeyword.value) ||
					item.describe.includes(searchKeyword.value) ||
					item.location.includes(searchKeyword.value)
			})
		}
	}

	const handleScan = async () => {
		try {
			const scanResult = await new Promise((resolve, reject) => {
				uni.scanCode({
					success: resolve,
					fail: reject
				})
			})

			let deviceNo = getQueryString(scanResult.path, 'deviceNo')

			if (!deviceNo) {
				uni.showToast({
					title: '无效的设备二维码',
					icon: 'none'
				})
				return
			}

			if (!uni.getStorageSync('token')) {
				await wxLogin()
			}

			// 检查是否有使用中的订单
			const inUseRes = await uni.request({
				url: `${URL}/app/order/inUse`,
				method: 'GET',
				header: {
					'Authorization': "Bearer " + uni.getStorageSync('token'),
					'Clientid': uni.getStorageSync('client_id')
				}
			})

			if (inUseRes.statusCode == 200 && inUseRes.data.code == 200 && inUseRes.data.data) {
				const inUseOrder = inUseRes.data.data
				uni.reLaunch({
					url: `/pages/return/index?orderId=${inUseOrder.orderId}&deviceId=${deviceNo || inUseOrder.deviceNo}`
				})
				return
			}

			// 检查是否有待支付订单
			const orderRes = await uni.request({
				url: `${URL}/app/order/unpaid`,
				method: 'GET',
				header: {
					'Authorization': "Bearer " + uni.getStorageSync('token'),
					'Clientid': uni.getStorageSync('client_id')
				}
			})

			if (orderRes.statusCode == 200 && orderRes.data.code == 200 && orderRes.data.data) {
				const unpaidOrder = orderRes.data.data
				uni.navigateTo({
					url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
				})
			} else {
				try {
					const deviceInfoRes = await getDeviceInfo(deviceNo)

					if (deviceInfoRes.code == 200 && deviceInfoRes.data && deviceInfoRes.data.device) {
						const deviceInfo = deviceInfoRes.data.device

						if (deviceInfo.feeConfig) {
							try {
								const feeConfig = JSON.parse(deviceInfo.feeConfig)
								uni.navigateTo({
									url: `/pages/device/detail?deviceNo=${deviceNo}&feeConfig=${encodeURIComponent(deviceInfo.feeConfig)}`
								})
							} catch (e) {
								uni.navigateTo({
									url: `/pages/device/detail?deviceNo=${deviceNo}`
								})
							}
						} else {
							uni.navigateTo({
								url: `/pages/device/detail?deviceNo=${deviceNo}`
							})
						}
					} else {
						uni.showToast({
							title: '获取设备信息失败',
							icon: 'none'
						})
						uni.navigateTo({
							url: `/pages/device/detail?deviceNo=${deviceNo}`
						})
					}
				} catch (error) {
					console.error('获取设备信息异常:', error)
					uni.navigateTo({
						url: `/pages/device/detail?deviceNo=${deviceNo}`
					})
				}
			}
		} catch (error) {
			console.error('扫码处理失败:', error)
			uni.showToast({
				title: '扫码失败',
				icon: 'none'
			})
		}
	}

	const showLocationList = () => {
		showLocationPopup.value = true
	}

	const hideLocationList = () => {
		showLocationPopup.value = false
	}

	const onGetPhoneNumber = (e) => {
		if (e.detail.errMsg === 'getPhoneNumber:ok') {
			showPhoneAuthPopup.value = false
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		width: 100%;
		background-color: #f6f7fb;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding-top: 20rpx;
	}

	/* 顶部Logo和通知栏 */
	.header-section {
		width: 92%;
		margin: 0 auto 20rpx;
	}

	.logo-container {
		display: flex;
		align-items: center;
		// margin-bottom: 16rpx;

		.logo-image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 8rpx;
		}

		.app-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}


	/* 地图标题 */
	.map-title {
		width: 92%;
		margin: 0 auto 10rpx;
		padding: 10rpx 0;

		text {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}



	/* 顶部搜索栏 */
	.header-search {
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		z-index: 10;

		.search-box {
			display: flex;
			align-items: center;
			background: #f8f9fa;
			border-radius: 50rpx;
			padding: 0 20rpx;
			height: 80rpx;

			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.location-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #2196F3;
				border-radius: 50%;
				margin-left: 16rpx;

				.location-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	/* 场地列表弹窗 */
	.location-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
		}

		.location-sheet {
			background: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
			max-height: 70vh;
			transition: all 0.3s ease;
			z-index: 1;
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			animation: slideUp 0.3s ease-out;

			&.expanded {
				max-height: 85vh;
			}

			.sheet-handle {
				display: flex;
				justify-content: center;
				padding: 20rpx 0;
				cursor: pointer;

				.handle-bar {
					width: 80rpx;
					height: 8rpx;
					background: #e0e0e0;
					border-radius: 4rpx;
				}
			}

			.sheet-header {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.sheet-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.close-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f0f0f0;
					border-radius: 50%;
					transition: all 0.2s ease;

					&:active {
						background: #e0e0e0;
						transform: scale(0.95);
					}

					.close-icon {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.sheet-content {
				padding: 20rpx 0;
				height: 60vh;
				/* 固定高度以保证小程序端 scroll-view 正常滚动 */
			}
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 场地列表项 */
	.position-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f8f9fa;

		.position-info {
			flex: 1;

			.position-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 8rpx;
			}

			.position-desc {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
			}

			.position-location {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;

				.location-icon-small {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					color: #999;
				}
			}

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

		.position-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 8rpx;

			.distance-info {
				font-size: 24rpx;
				color: #2196F3;
				font-weight: 500;
			}

			.status-tag {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;

				&.online {
					background: #e8f5e8;
					color: #4caf50;
				}

				&.offline {
					background: #ffeaea;
					color: #f44336;
				}
			}

			.nav-btn {
				padding: 12rpx 20rpx;
				background: #2196F3;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;

		.empty-icon {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 24rpx;
			opacity: 0.5;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		width: fit-content;


		&.online {
			background: #e8f5e8;
			color: #4caf50;
		}

		&.offline {
			background: #ffeaea;
			color: #f44336;
		}

		&.wait {
			background: #ffeaea;
			color: #f44336;
		}
	}

	/* 加载状态 */
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;

		.loading-content {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid #f0f0f0;
				border-top: 4rpx solid #2196F3;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 地图加载状态 */
	.map-loading-placeholder {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f6f7fb;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;

		.loading-content {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid #f0f0f0;
				border-top: 4rpx solid #2196F3;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 手机号授权弹窗 */
	.phone-auth-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		display: flex;
		align-items: center;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
		}

		.popup-content {
			background: #ffffff;
			border-radius: 24rpx;
			margin: 0 60rpx;
			padding: 40rpx;
			position: relative;
			z-index: 1;

			.popup-header {
				text-align: center;
				margin-bottom: 30rpx;

				.popup-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
				}
			}

			.popup-body {
				.auth-desc {
					text-align: center;
					margin-bottom: 40rpx;

					text {
						font-size: 28rpx;
						color: #666;
						line-height: 1.6;
					}
				}

				.auth-btn {
					width: 100%;
					height: 88rpx;
					background: #2196F3;
					border-radius: 44rpx;
					border: none;
					color: #ffffff;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
				}

				.auth-cancel {
					text-align: center;
					padding: 20rpx;

					text {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
	}

	/* 操作步骤指引 */
	.steps-guide {
		align-items: center;
		align-content: center;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 0;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		z-index: 10;
		// max-width: calc(100% - 40rpx);
		backdrop-filter: blur(15rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.9);
		overflow: hidden;
		width: 92%;
		margin: 0 auto 20rpx;
	}

	.guide-header {
		padding: 20rpx 24rpx;
		background: linear-gradient(135deg, #2196F3, #1976D2);
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

		.guide-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #ffffff;
			text-align: center;
			display: block;
		}
	}

	.steps-container {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		padding: 24rpx;
		background-color: rgba(255, 255, 255, 0.9);
	}

	.step-item {
		display: flex;
		align-items: flex-start;
		width: 100%;
		padding: 16rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

		&:last-child {
			border-bottom: none;
		}

		.step-number {
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(135deg, #2196F3, #1976D2);
			color: #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: bold;
			margin-right: 20rpx;
			flex-shrink: 0;
			box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.4);
		}

		.step-content {
			flex: 1;
			padding-top: 4rpx;

			.step-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}

			.step-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
				line-height: 1.5;
			}
		}
	}
</style>