<template>
	<view class="content">
		<!-- 地图容器 - 固定在底部（放在最后渲染，降低层级优先级） -->
		<web-view class="map-container" ref="webViewRef" :src="webViewSrc" 
			@message="handleWebMessage" @load="webViewLoad"></web-view>
	</view>
</template>

<script>
	import * as wzLocation from '@/utils/wz_sdk_uniapp.js';

	export default {
		data() {
			return {
				webViewSrc: 'static/map/map_view.html',
				webViewReady: false, // 标记web-view原生实例是否就绪
				title: 'Hello',
				wzLocation: {
					accuracy: 0,
					address: {
						name: "初始地址" // 加初始值，方便测试显示
					},
					place: {
						name: "初始位置" // 加初始值，方便测试显示
					},
					latitude: 27.945061, // 加初始值
					longitude: 107.191693, // 加初始值
					source: "",
					spatialReference: "",
					timestamp: new Date().toLocaleString() // 加初始值
				}
			}
		},
		onLoad() {},
		// 新增：页面渲染完成兜底初始化
		onReady() {
			console.log('页面onReady，兜底初始化web-view就绪状态');
			// 延迟1000ms，确保无论@load是否触发，原生实例都能初始化
			setTimeout(() => {
				if (!this.webViewReady) { // 仅当@load未触发时，才兜底标记
					this.webViewReady = true;
					//this.sendLocationData();
					console.log('@load未触发，已兜底标记web-view就绪');
				}
			}, 1000);
		},
		methods: {
			// web-view加载完成回调：延迟标记就绪，等待原生实例初始化
			webViewLoad() {
				console.log('web-view DOM加载完成，等待原生实例初始化');
				// App端延迟500ms，其他端立即标记，避免原生实例未初始化
				const delay = process.env.UNI_PLATFORM === 'app-plus' ? 500 : 0;
				setTimeout(() => {
					this.webViewReady = true;
					this.sendLocationData(); // 初始发送一次默认定位数据
					console.log('web-view 原生实例就绪，标记完成');
				}, delay);
			},
			// 向 web-view 发送定位数据（全端兼容修复版）
			sendLocationData() {
				if (!this.webViewReady) {
					console.warn('web-view 尚未就绪，跳过数据发送');
					return;
				}
				// 深拷贝+序列化数据，避免引用问题和引号冲突
				const locationData = JSON.parse(JSON.stringify(this.wzLocation));
				const dataStr = JSON.stringify(locationData);

				// #ifdef APP-PLUS
				// App端：穿透Vue壳 + 页面根webview兜底，获取真实原生实例
				let webView = null;
				try {
					// 方式1：从$refs穿透Vue组件壳获取
					const webViewVueRef = this.$refs.webViewRef;
					webView = webViewVueRef.$el || webViewVueRef._nativeInstance || webViewVueRef;
				    console.log('【App端】webView.evalJS是否存在：', typeof webView?.evalJS === 'function');
					// 方式2：兜底 - 通过页面根webview获取子web-view（精准匹配src）
					if (!webView || typeof webView.evalJS !== 'function') {
						const pages = getCurrentPages();
						const currentPage = pages[pages.length - 1];
						if (currentPage && currentPage.$getAppWebview) {
							const pageWebview = currentPage.$getAppWebview();
							const allSubWebview = pageWebview.children();
							// 遍历子实例，通过src匹配精准找到地图web-view
							for (let i = 0; i < allSubWebview.length; i++) {
								const subWeb = allSubWebview[i];
								if (subWeb.getURL && subWeb.getURL().includes('map_view.html')) {
									webView = subWeb;
									break;
								}
							}
						}
					}

					// 打印验证
					console.log('【App端】Vue组件壳：', webViewVueRef);
					console.log('【App端】原生web-view实例：', webView);
					console.log('【App端】webView.evalJS是否存在：', typeof webView?.evalJS === 'function');

					// 执行evalJS（单行代码避免解析错误）
					if (webView && typeof webView.evalJS === 'function') {
						const jsCode = `window.dispatchEvent(new CustomEvent('uniMessage',{detail:{wzLocation:${dataStr}}}))`;
						webView.evalJS(jsCode);
						console.log('【App端】evalJS执行成功，定位数据已发送');
					} else {
						console.error('【App端】未获取到带evalJS的原生web-view实例');
						// 终极兜底：1秒后重试一次
						setTimeout(() => this.sendLocationData(), 1000);
					}
				} catch (e) {
					console.error('【App端】sendLocationData异常：', e);
				}
				// #endif

				// #ifdef H5
				// H5端：web-view是iframe，用postMessage原生通信
				try {
					const webViewIframe = document.querySelector('.map-container iframe');
					if (webViewIframe) {
						webViewIframe.contentWindow.postMessage({ wzLocation: locationData }, '*');
						console.log('【H5端】postMessage执行成功，定位数据已发送');
					} else {
						console.error('【H5端】未找到map-container下的iframe');
					}
				} catch (e) {
					console.error('【H5端】sendLocationData异常：', e);
				}
				// #endif

				// #ifdef MP-WEIXIN
				// 微信小程序端：原生selectQuery获取实例
				wx.createSelectorQuery().select('.map-container').node((res) => {
					const webview = res.node;
					console.log('【小程序端】webview实例：', webview);
					console.log('【小程序端】webview.evalJS是否存在：', typeof webview?.evalJS === 'function');
					if (webview && typeof webview.evalJS === 'function') {
						const jsCode = `window.dispatchEvent(new CustomEvent('message',{detail:{wzLocation:${dataStr}}}))`;
						webview.evalJS(jsCode);
						console.log('【小程序端】evalJS执行成功，定位数据已发送');
					} else {
						console.error('【小程序端】webview.evalJS不存在');
					}
				}).exec();
				// #endif
			},
			// 接收 web-view 按钮点击消息
			handleWebMessage(e) {
				console.log('收到 web-view 消息：', e.detail.data);
				const message = e.detail.data[e.detail.data.length - 1];
				if (!message || !message.type) return;

				// 根据按钮类型执行对应逻辑
				switch (message.type) {
					case 'singleClick':
						this.singleClick();
						break;
					case 'conitueClick':
						this.conitueClick();
						break;
					case 'stopLocation':
						this.stopLocation();
						break;
					case 'getAddress':
						this.getAddress();
						break;
					case 'getGeoCode':
						this.getGeoCode();
						break;
					case 'poiSearch':
						this.poiSearch();
						break;
					case 'poiNearBySearch':
						this.poiNearBySearch();
						break;
				}
			},
			singleClick() {
				const deviceInfo = uni.getDeviceInfo()
				console.log("deviceId：", deviceInfo.deviceId);
				wzLocation.initOption("定位 KEY", deviceInfo.deviceId, true, 0)
				wzLocation.getLocation(
					res => {
						console.log("index success", res);
						res.timestamp = new Date(res.timestamp).toLocaleString()
						this.wzLocation = res;
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					fail => {
						console.log("fail" + fail.code + fail.msg);
					}
				);
			},
			conitueClick() {
				const deviceInfo = uni.getDeviceInfo()
				console.log("deviceId：", deviceInfo.deviceId);
				wzLocation.initOption("定位 KEY", deviceInfo.deviceId, false, 10000)
				wzLocation.getLocation(
					res => {
						console.log("index success", res);
						res.timestamp = new Date(res.timestamp).toLocaleString()
						this.wzLocation = res;
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					fail => {
						console.log("fail" + fail.code + fail.msg);
					}
				);
			},
			getAddress() {
				wzLocation.setAk("定位 KEY")
				wzLocation.getReverseCode(107.191693, 27.945061, 'wgs84').then(
					(res) => {
						console.log("address : " + res.address.name);
						// 更新定位信息显示
						this.wzLocation.address.name = res.address.name;
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					(error) => {
						console.log("error : " + error);
					}
				);
			},
			getGeoCode() {
				wzLocation.setAk("定位 KEY")
				wzLocation.getGeoCode("旺座", '西安市').then(
					(res) => {
						let dataList = res;
						console.log(dataList[0].geoPoint, dataList[0].address.name)
						// 更新定位信息显示
						this.wzLocation.address.name = dataList[0].address.name;
						this.wzLocation.longitude = dataList[0].geoPoint.split(',')[0];
						this.wzLocation.latitude = dataList[0].geoPoint.split(',')[1];
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					(error) => {
						console.log("error : ", error);
					}
				);
			},
			poiSearch() {
				wzLocation.setAk("POI KEY")
				wzLocation.poiSearch("泛悦城T2", '武汉市', 2, 20).then(
					(res) => {
						let dataList = res;
						console.log("poi搜索：", dataList)
						console.log("poi搜索：", dataList[0].geoPoint, dataList[0].address.name)
						// 更新定位信息显示
						this.wzLocation.address.name = dataList[0].address.name;
						this.wzLocation.longitude = dataList[0].geoPoint.split(',')[0];
						this.wzLocation.latitude = dataList[0].geoPoint.split(',')[1];
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					(error) => {
						console.log("error : ", error);
					}
				);
			},
			poiNearBySearch() {
				wzLocation.setAk("POI KEY")
				wzLocation.poiNearbySearch("乒乓球", "体育场馆", '120.59986,31.25979').then(
					(res) => {
						let dataList = res;
						console.log("poi搜索：", dataList[0].geoPoint, dataList[0].address.name)
						// 更新定位信息显示
						this.wzLocation.address.name = dataList[0].address.name;
						this.wzLocation.longitude = dataList[0].geoPoint.split(',')[0];
						this.wzLocation.latitude = dataList[0].geoPoint.split(',')[1];
						// 数据更新后，立即推送到 web-view
						this.sendLocationData();
					},
					(error) => {
						console.log("error : ", error);
					}
				);
			},
			stopLocation() {
				wzLocation.stopLocation()
			}
		}
	}
</script>

<style scoped>
	/* 页面主容器 */
	.content {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	/* 地图容器 - 固定在底部 */
	.map-container {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60vh;
		/* APP端原生组件层级问题修复：降低web-view的层级优先级 */
		z-index: 0;
	}

	/* 定位信息 - 悬浮在地图上方（调整位置到地图内的左上角） */
	.location-info {
		position: absolute;
		top: 20rpx;
		/* 相对于地图顶部20rpx */
		left: 20rpx;
		z-index: 9999;
		/* 提升层级到最高 */
		background-color: rgba(255, 255, 255, 0.95);
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		max-width: 70%;
		/* 强制显示，避免被遮挡 */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

	.location-info .name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
	}

	.location-info .sub {
		font-size: 26rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.location-info .time {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	/* 按钮组 - 悬浮在地图上方（地图内的底部） */
	.button-group {
		position: absolute;
		bottom: 40rpx;
		/* 相对于页面底部40rpx，即地图内的底部 */
		left: 20rpx;
		right: 20rpx;
		z-index: 9999;
		/* 提升层级到最高 */
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		justify-content: center;
		/* 强制显示，避免被遮挡 */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

	.button-group button {
		flex: 1;
		min-width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgba(0, 122, 255, 0.95);
		color: #fff;
		border: none;
		border-radius: 40rpx;
		font-size: 28rpx;
		padding: 0;
		/* 按钮点击穿透修复 */
		pointer-events: auto;
	}

	.button-group button:active {
		background-color: rgba(0, 100, 200, 0.95);
	}

	/* 兼容APP端原生组件层级问题 */
	::v-deep .uni-webview {
		z-index: 0 !important;
	}
</style>