<template>
	<view class="map-container">
		<!-- 地图容器 -->
		<view class="map-wrapper">
			<!-- 使用小程序原生地图组件 -->
			<map id="map" class="native-map" :longitude="mapCenter.longitude" :latitude="mapCenter.latitude"
				:markers="mapMarkers" :scale="mapZoom" :show-location="true" @regionchange="onMapRegionChange"
				@markertap="onMapMarkerTap" @callouttap="onCalloutTap" @updated="onMapUpdated"
				@error="onMapError"></map>



			<!-- 地图加载状态 -->
			<view class="map-loading" v-if="isLoading">
				<view class="loading-content">
					<view class="loading-spinner"></view>
					<text>地图加载中...</text>
				</view>
			</view>
		</view>

		<!-- 地图控制按钮 -->
		<view class="map-controls">
			<view class="control-btn location-control" @tap="handleRelocate">
				<!-- <image class="control-icon" src="/static/scan-icon.png" mode="aspectFit" /> -->
				<uv-icon name="map-fill" size="18"></uv-icon>
				<text style="margin-left: 8rpx;">我的位置</text>
			</view>
			<view class="control-btn scan-control main-btn" @tap="handleScan">
				<image class="control-icon" src="/static/scan-icon.png" mode="aspectFit" />
				<text>扫码使用</text>
			</view>
			<view class="control-btn list-control" @tap="handleShowList">
				<image class="control-icon" src="/static/map.png" mode="aspectFit" />
				<text>附近设备</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
		onUnmounted,
		nextTick
	} from 'vue'
	// 导入地图工具函数
	import {
		calculateDistanceSync
	} from '../utils/mapUtils.js'

	// 引用折叠面板组件的ref
	const collapseRef = ref(null)

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

	// Props
	const props = defineProps({
		userLocation: {
			type: Object,
			default: null
		},
		positionList: {
			type: Array,
			default: () => []
		},
		filteredPositions: {
			type: Array,
			default: () => []
		},
		searchKeyword: {
			type: String,
			default: ''
		}
	})

	// Emits
	const emit = defineEmits([
		'relocate',
		'scan',
		'showList',
		'markerTap',
		'mapCenterChange'
	])

	// 响应式数据
	const isLoading = ref(true)
	const mapCenter = ref({
		longitude: 116.397128,
		latitude: 39.916527
	})
	const mapZoom = ref(17)
	const mapMarkers = ref([]) // 用于地图组件的markers
	const mapContext = ref(null) // 地图上下文

	// 方法
	const updateMapMarkers = () => {
		mapMarkers.value = []

		// 添加用户位置标记
		if (props.userLocation) {
			mapMarkers.value.push({
				id: 0, // ID必须是数字
				// iconPath: '/static/scan-icon.png',
				width: 32,
				height: 32,
				latitude: props.userLocation.latitude,
				longitude: props.userLocation.longitude,
				title: '我的位置',
				callout: {
					content: '我的位置',
					color: '#ffffff',
					fontSize: 12,
					borderRadius: 4,
					bgColor: '#2196F3',
					padding: 6,
					display: 'BYCLICK' // 点击时显示
				},
				customCallout: {
					anchorX: 0,
					anchorY: 0
				}
			})
		}

		// 添加位置点标记
		if (props.filteredPositions && props.filteredPositions.length > 0) {
			props.filteredPositions.forEach((pos, index) => {
				if (pos.longitude && pos.latitude) {
					// 验证纬度值是否在有效范围内
					const lat = parseFloat(pos.latitude);
					const lng = parseFloat(pos.longitude);

					// 检查纬度是否在-90到90之间，经度是否在-180到180之间
					if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
						mapMarkers.value.push({
							id: index + 1, // ID必须是数字，避免和用户位置的ID冲突
							// iconPath: '/static/scan-icon.png',
							width: 30,
							height: 30,
							latitude: lat,
							longitude: lng,
							title: pos.name,
							position: pos, // 存储原始位置数据，用于事件处理
							callout: {
								content: pos.name,
								color: '#333333',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#ffffff',
								padding: 6,
								display: 'BYCLICK' // 点击时显示
							}
						})
					} else {
						console.warn(`忽略无效坐标: ${pos.name}, 纬度=${lat}, 经度=${lng}`);
					}
				}
			})
		}

		isLoading.value = false
	}

	// 移动地图到指定位置
	const moveToLocation = (location) => {
		if (!location || !location.longitude || !location.latitude) return

		if (mapContext.value) {
			mapContext.value.moveToLocation({
				longitude: location.longitude,
				latitude: location.latitude,
				success: () => {
					console.log('地图已移动到指定位置')
				},
				fail: (error) => {
					console.error('移动地图失败:', error)
				}
			})
		}
	}

	// 监听用户位置变化
	watch(() => props.userLocation, (newLocation) => {
		if (newLocation && newLocation.longitude && newLocation.latitude) {
			mapCenter.value = {
				longitude: newLocation.longitude,
				latitude: newLocation.latitude
			}
			updateMapMarkers()
			moveToLocation(newLocation)
		}
	}, {
		immediate: true,
		deep: true
	})

	// 监听位置列表变化
	watch(() => props.filteredPositions, (newPositions) => {
		updateMapMarkers()
	}, {
		deep: true
	})

	// 地图加载完成事件
	const onMapUpdated = () => {
		isLoading.value = false
	}

	// 地图区域变化事件
	const onMapRegionChange = (e) => {
		// 当地图区域变化结束时，更新mapCenter
		if (e.type === 'end' && e.causedBy === 'drag') {
			// 获取地图中心点
			if (mapContext.value) {
				mapContext.value.getCenterLocation({
					success: (res) => {
						if (res.longitude && res.latitude) {
							mapCenter.value = {
								longitude: res.longitude,
								latitude: res.latitude
							}
							emit('mapCenterChange', mapCenter.value)
						}
					}
				})
			}
		}
	}

	// 标记点点击事件
	const onMapMarkerTap = (e) => {
		const markerId = e.markerId
		const marker = mapMarkers.value.find(item => item.id === markerId)

		if (marker) {
			if (markerId === 0) { // 用户位置标记
				uni.showToast({
					title: '这是您的位置',
					icon: 'none'
				})
				return
			}

			if (marker.position) {
				emit('markerTap', marker.position)
			}
		}
	}

	// 标记点气泡点击事件
	const onCalloutTap = (e) => {
		const markerId = e.markerId
		const marker = mapMarkers.value.find(item => item.id === markerId)

		if (marker && marker.position) {
			emit('markerTap', marker.position)
		}
	}

	// 地图错误事件
	const onMapError = (error) => {
		console.error('地图加载失败:', error)
		isLoading.value = false
	}

	const handleRelocate = () => {
		emit('relocate')
	}

	const handleScan = () => {
		emit('scan')
	}

	const handleShowList = () => {
		emit('showList')
	}

	// 生命周期钩子
	onMounted(() => {
		// 初始化地图上下文
		nextTick(() => {
			// 需要使用nextTick确保地图组件已经渲染
			mapContext.value = uni.createMapContext('map')
			updateMapMarkers()

			// 初始化折叠面板
			if (collapseRef.value) {
				collapseRef.value.init()
			}
		})
	})

	onUnmounted(() => {
		// 清理工作
		mapContext.value = null
	})

	// 折叠面板事件处理
	const onCollapseChange = (names) => {}

	const onCollapseOpen = (names) => {}

	const onCollapseClose = (names) => {}

	// 暴露给父组件的方法
	defineExpose({
		mapCenter: computed(() => mapCenter.value),
		moveToLocation,
		updateMapMarkers,
		initCollapse: () => {
			if (collapseRef.value) {
				collapseRef.value.init()
			}
		}
	})
</script>

<style lang="scss" scoped>
	/* 地图容器 */
	.map-container {
		flex: 1;
		position: relative;
		height: 60vh;
		/* 增加高度 */
		width: 92%;
		/* 略微增加宽度 */
		margin: 10rpx auto 30rpx;
		/* 调整上下间距，左右自动居中 */
		border-radius: 24rpx;
		/* 添加圆角 */
		overflow: hidden;
		/* 确保圆角生效 */
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */

		.map-wrapper {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			border-radius: 24rpx;
			/* 内层也添加圆角 */

			.native-map {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 24rpx;
				/* 地图也添加圆角 */
			}
		}

		.map-loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.8);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;

			.loading-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.loading-spinner {
					width: 60rpx;
					height: 60rpx;
					border: 8rpx solid #f3f3f3;
					border-top: 8rpx solid #3498db;
					border-radius: 50%;
					animation: spin 1s linear infinite;
					margin-bottom: 20rpx;
				}

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

		.map-controls {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20rpx;

			.control-btn {
				min-width: 120rpx;
				/* 减小按钮宽度 */
				height: 70rpx;
				/* 减小按钮高度 */
				background: #ffffff;
				border-radius: 35rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				transition: all 0.2s ease;
				padding: 0 16rpx;

				&:active {
					transform: scale(0.95);
				}

				.control-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 26rpx;
					color: #333;
					white-space: nowrap;
					font-weight: 500;
				}

				&.main-btn {
					min-width: 140rpx;
					/* 减小主按钮宽度 */
					height: 80rpx;
					/* 减小主按钮高度 */
					box-shadow: 0 6rpx 20rpx rgba(33, 150, 243, 0.4);
					transform: translateY(-5rpx);

					.control-icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 600;
					}

					&:active {
						transform: translateY(-5rpx) scale(0.95);
					}
				}
			}

			.scan-control {
				background: #2196F3;

				.control-icon {
					filter: brightness(0) invert(1);
				}

				text {
					color: #ffffff;
				}
			}

			.list-control {
				background: #4CAF50;

				.control-icon {
					filter: brightness(0) invert(1);
				}

				text {
					color: #ffffff;
				}
			}

			.location-control {
				background: #ffffff;
				border: 2rpx solid #e0e0e0;

				.control-icon {
					filter: none;
				}

				text {
					color: #333;
				}
			}
		}
	}

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

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

	
</style>