<template>
	<view class="map_container"></view>
</template>

<script>
	export default {
		data() {
			return {
				map: null,
				centerMarker: null,
				currentPoint: null,
				currentAddress: '',
			}
		},
		mounted() {
			this.createMap();
			this.initializeMap();
		},
		methods: {
			createMap() {
				const mapId = "map_" + Math.random();
				const map = plus.maps.create(mapId, {
					zoom: 13,
					MapType: plus.maps.MapType.MAPTYPE_NORMAL,
					traffic: true,
					zoomControls: true,
					top: "0",
					left: "0",
					width: '100%',
					height: '100%',
					position: "static",
				});
				
				plus.webview.currentWebview().append(map);
				this.map = map;
			},
			
			initializeMap() {
				const _this = this;
				
				// 获取当前位置
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						const point = new plus.maps.Point(res.longitude, res.latitude);
						_this.map.setCenter(point);
						_this.currentPoint = point;
						_this.addCenterMarker(point);
						_this.getAddressByPoint(point);
						_this.setupMapMoveListener();
						_this.map.show();
					},
					fail() {
						// 如果获取位置失败，使用默认位置
						const defaultPoint = new plus.maps.Point(116.4074, 39.9042);
						_this.map.setCenter(defaultPoint);
						_this.currentPoint = defaultPoint;
						_this.addCenterMarker(defaultPoint);
						_this.getAddressByPoint(defaultPoint);
						_this.setupMapMoveListener();
						_this.map.show();
					}
				});
			},
			
			addCenterMarker(point) {
				// 移除旧的marker
				if (this.centerMarker) {
					this.map.removeOverlay(this.centerMarker);
				}
				
				// 添加中心点marker
				this.centerMarker = new plus.maps.Marker(point);
				this.centerMarker.setIcon("/static/images/chat/marker.png");
				this.map.addOverlay(this.centerMarker);
			},
			
			setupMapMoveListener() {
				const _this = this;
				
				// 使用定时器轮询来检测地图位置变化
				// plus.maps 的 H5 版本可能不支持事件监听，通过定时器实现
				let lastCenter = this.map.getCenter ? this.map.getCenter() : null;
				
				setInterval(() => {
					_this.map.getCurrentCenter((state, point) => {
						if (state !== 0 || !point) {
							return;
						}
						
						// 简单的位置变化检测
						if (!lastCenter || 
							lastCenter.getLng() !== point.getLng() || 
							lastCenter.getLat() !== point.getLat()) {
							
							lastCenter = point;
							_this.updateCenterMarker();
						}
					});
				}, 500);
			},
			
			updateCenterMarker() {
				const _this = this;
				
				this.map.getCurrentCenter((state, point) => {
					if (state !== 0) {
						return;
					}
					
					_this.currentPoint = point;
					_this.addCenterMarker(point);
					_this.getAddressByPoint(point);
				});
			},
			
			getAddressByPoint(point) {
				const _this = this;
				
				// 简化处理：直接显示"位置已选择"，不调用外部 API
				// 如果需要真实地址，可以在确认时调用服务端 API
				_this.currentAddress = '位置已选择';
			},
			
			getCurrentCenter(callback) {
				const _this = this;
				
				this.map.getCurrentCenter((state, point) => {
					if (state !== 0) {
						callback(state, null);
						return;
					}
					
					// 直接返回当前数据，地址会异步更新
					callback(state, {
						point: point,
						lng: point.getLng(),
						lat: point.getLat(),
						address: _this.currentAddress || '位置已选择'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map_container {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
</style>