<template>
	<view class="container" @click="showSearch(false)">
		<view id="map" class="map" :prop="mapData" :change:prop="mapModule.updateMapData"></view>
		<!-- <image-button @click="location" className="location" imgSrc="/static/dw.png"></image-button> -->

		<view class="south" :style="'transform:rotate('+compassNum.toString()+'deg)'">
			<image src="/static/south.png" class="south-img" />
			<text class="south-text" style="transform:rotate(180deg)">南</text>
		</view>
		<view class="right-actions">
			<view class="btn-tcdj right-btn" @click="showLayerModal">
				<image src="/static/tcdj.png" class="btn-img"></image>
				<view>图层</view>
			</view>
			<view class="btn-mjcl right-btn" @click="toggleMeasure">
				<image :src="measureStatus==='mjcl'?'/static/mjcl-sel.png':'/static/mjcl.png'" class="btn-img"></image>
				<view>测量</view>
			</view>
			<view class="btn-xzgj right-btn" @click="toggleXzgj">
				<image :src="measureStatus==='xzgj'?'/static/xzgj-sel.png':'/static/xzgj.png'" class="btn-img"></image>
				<view>绕地</view>
			</view>
			<view class="btn-location right-btn" @click="location">
				<image src="/static/dw.png" class="img-location" />
				<view>{{locationing?'定位中':'定位'}}</view>
			</view>
			<view class="btn-mjcl right-btn" @click="showJwdPopup">
				<image src="/static/jwd.png" class="img-jwd" />
				<view>经纬度</view>
			</view>
			<view class="btn-clear right-btn" @click="mapModule.clear">
				<image src="/static/clear.png" class="img-clear" />
				<view>清除</view>
			</view>
			<!-- <view class="btn-logout right-btn" @click="logout">
				<image src="/static/logout.png" class="img-logout" />
			</view> -->
		</view>
		<button class="btn-workbench" @click="toWorkBench">
			<image src="/static/gzt.png" class="workbench-img" />
			<div>工作台</div>
		</button>
		<view>
			<!-- 经纬度输入弹窗 -->
			<uni-popup ref="jwdPopup" background-color="#fff">
				<view class="popup-detail-title">
					<text style="flex:1;font-size: 18px; font-weight: bold;">经纬度定位</text>
					<button type="primary" size="mini" @click="navWithJwd">确定</button>
				</view>
				<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
					<uni-forms ref="jwdForm" :modelValue="jwdData">
						<uni-forms-item label="经度" name="longitude" required>
							<uni-easyinput type="number" v-model="jwdData.longitude" placeholder="请输入经度" />
						</uni-forms-item>
						<uni-forms-item label="纬度" name="latitude" required>
							<uni-easyinput type="number" v-model="jwdData.latitude" placeholder="请输入纬度" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup>
			<!-- 图层叠加弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="popupChange">
				<view class="popup-title">图层叠加</view>
				<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
					<view class="uni-flex uni-row" style="flex:1;flex-wrap: wrap;">
						<layer-checkbox v-for="(item,i) in layerItems" :icon="item.icon" :label="item.text" :value="i"
							@change="checkLayer" :checked="currentLayers.indexOf(i)>-1"
							:iconStyle="item.iconStyle"></layer-checkbox>
					</view>
				</view>
			</uni-popup>
			<!-- 图层详情弹窗 -->
			<uni-popup ref="popupDetail" background-color="#fff">
				<view class="popup-detail-title">
					<text
						style="flex:1;font-size: 18px; font-weight: bold;">{{currentClickLayerItem?currentClickLayerItem.text:''}}详情</text>
					<text @click="closeDetail()" style="font-size: 16px;color: #555; padding-bottom: 4px;">关闭</text>
				</view>
				<view class="popup-content" style="padding: 12px;">
					<view class="detail-tab">
						<view v-if="detailGroups.length>1" v-for="groupItem in detailGroups"
							style="margin-bottom: 8px;margin-right: 8px;">
							<uni-tag :circle="true" @click="changeDetailTab(groupItem.tab)" :text="groupItem.tab"
								:type="currentGroupTab===groupItem.tab?'success':''"></uni-tag>
						</view>
					</view>

					<view v-if="!!currentGroupTab" style="border: 0.5px solid rgba(5, 5, 5, 0.1);">
						<view v-for="item in detailGroups.find(g=>g.tab===currentGroupTab).children">
							<view class="uni-flex uni-row">
								<view
									style="display: flex;align-items: center; width:30%;padding: 2px 4px;background-color: rgba(0, 0, 0, 0.02);border: 0.5px solid rgba(5, 5, 5, 0.1);">
									<text style="color: #666;">{{item.title}}</text>
								</view>
								<view
									style="display: flex;align-items: center;width:70%;padding: 2px 8px;border: 0.5px solid rgba(5, 5, 5, 0.1);">
									<text
										v-if="!item.value.toString().endsWith('.png')&&!item.value.toString().endsWith('.jpg')"
										style="color: #222;">{{item.value}}{{item.unit}}</text>
									<view
										v-if="item.value.toString().endsWith('.png')||item.value.toString().endsWith('.jpg')">
										<image v-for="(img,index) in item.value.split(',')"
											style="height: 36px; width: 36px;margin-right: 8px;" :src="img"
											@click="preview(index,item.value.split(','))">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="top-right">
			<view @click.stop="showSearch(true)" v-if="searchVisible" style="flex: 1;">
				<uni-search-bar :focus="true" v-model="searchValue" @confirm="search"
					cancelButton="none"></uni-search-bar>
			</view>
			<!-- <view class="search" @click.stop="showSearch(true)" v-if="!searchVisible">
				<image src="/static/search.png" class="img-search" />
			</view> -->
			<view class="message" @click="toWdxx">
				<image src="/static/message.png" class="img-message" />
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper';
	import {
		GeoJSON
	} from 'ol/format'
	import _ from 'lodash'
	export default {
		data() {
			return {
				locationing: false,
				searchVisible: false,
				searchValue: '',
				mapData: {
					center: [102.45438, 32.53223]
				},
				currentLayers: [],
				currentLayer: null,
				layerItems: [],
				detailItems: [],
				detailGroups: [],
				currentGroupTab: null,
				token: '',
				measureStatus: '',
				currentClickLayerItem: null,
				xzgjPoints: [],
				compassNum: 0,
				jwdData: {},
				rules: {
					longitude: {
						rules: [{
							required: true,
							errorMessage: '经度不能为空',
						}, {
							format: "number",
							validateFunction: function(rule, value, data, callback) {
								if (value < 0 || value > 180) {
									callback('经度范围应在 0 到 180 之间')
								}
								return true
							}
						}]
					},
					latitude: {
						rules: [{
							required: true,
							errorMessage: '纬度不能为空',
						}, {
							format: "number",
							validateFunction: function(rule, value, data, callback) {
								if (value < -90 || value > 90) {
									callback('纬度范围应在 -90 到 90 之间')
								}
								return true
							}
						}]
					}
				}
			}
		},
		watch: {
			currentLayers(newVal, oldVal) {
				const map = this.$map;
				console.log(newVal, oldVal, map);
				if (newVal) {
					this.mapData = {
						layerOpts: newVal?.map(val => {
							const item = this.layerItems[val];
							return {
								layerName: item.value,
								layerIndex: val,
								...item
							}
						})
					}

				}
			}
		},
		onLoad() {
			this.token = helper.tempToken;
			let testIndex = 0;
			const settings = uni.getAppAuthorizeSetting()
			console.log(settings)
			uni.onLocationChange(res => {
				let {
					longitude,
					latitude,
					isFullAccuracy
				} = res;
				console.log(res)
				// longitude = longitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
				// latitude = latitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
				// ++testIndex;
				if (!this.xzgjPoints.find(point => {
						return point[0] === longitude && point[1] === latitude;
					})) {
					this.xzgjPoints.push([longitude, latitude]);
				}
				console.log(this.xzgjPoints)
				this.mapData = {
					xzgjPoints: this.xzgjPoints
				}
			})

			this.compassHandler = res => {
				this.compassNum = res.direction;
			}
			uni.onCompassChange(this.compassHandler);

			this.loadLayerItems();
		},
		onShow() {
			uni.startCompass()
		},
		onHide() {
			uni.stopCompass();
		},
		methods: {
			navWithJwd() {
				this.$refs.jwdForm.validate((err, formData) => {
					// 如果校验成功 ，err 返回 null
					if (!err) {
						console.log('success', formData)
						this.mapData = {
							center: [formData.longitude, formData.latitude, Math.random()]
						}
						this.$refs.jwdPopup.close();
						return
					}
					console.log('error', err, formData)
				}).then(res => {
					// res 返回 null
				})
			},
			showJwdPopup() {
				this.$refs.jwdPopup.open('bottom');
				setTimeout(() => {
					this.$refs.jwdForm.setRules(this.rules)
				}, 500)
			},
			loadLayerItems() {
				uni.request({
					url: `${helper.mgServerUrl}/app/config/layer`,
					header: {
						Authorization: `Bearer ${this.token}`
					},
					success: (resp) => {
						console.log(resp)
						if (resp.data.data) {
							const item = resp.data.data;
							const defaultShowIndexs = [];
							this.layerItems = item?.layerItems.map((layerItem, i) => {
								if (layerItem.visible) {
									defaultShowIndexs.push(i);
								}
								return {
									text: layerItem.title,
									value: layerItem.layerName,
									icon: layerItem.icon,
									zIndex: 99,
									detailUrl: layerItem.detailUrl,
									geoserverUrl: layerItem.geoserverUrl || item.geoserverUrl,
									layerWorkspace: layerItem.layerWorkspace || item.layerWorkspace,
									...layerItem
								}
							});
							if (defaultShowIndexs.length > 0) {
								this.currentLayers = defaultShowIndexs;
							}
						}
					},
				})
			},
			checkLayer(value) {
				console.log('check', value)
				const index = this.currentLayers.findIndex(l => l === value);
				if (index > -1) {
					this.currentLayers.splice(index, 1);
				} else {
					this.currentLayers.push(value)
				}
			},
			closeMeasureStatus() {
				this.measureStatus = ''
				this.mapData = {}
			},
			toggleXzgj() {
				if (this.measureStatus === 'xzgj') {
					this.measureStatus = ''
					this.mapData = {}
					uni.stopLocationUpdate();
				} else {
					this.measureStatus = 'xzgj';
					this.xzgjPoints = []
					uni.startLocationUpdate({
						// type: 'gcj02',
						needFullAccuracy: true
					})
					this.mapData = {
						xzgj: true
					}
				}
			},
			toggleMeasure() {
				if (this.measureStatus === 'mjcl') {
					this.measureStatus = ''
					this.mapData = {}
				} else {
					this.measureStatus = 'mjcl'
					this.mapData = {
						mjcl: true
					}
					uni.stopLocationUpdate();
				}
			},
			showFfzy(id) {
				console.log(id)
				const ffzyLayerIndex = this.layerItems.findIndex(item => item.value === 'ffzy_layer')
				if (!this.currentLayers.find(l => l === ffzyLayerIndex)) {
					this.currentLayers.push(ffzyLayerIndex)
				}
				uni.request({
					url: `${helper.serverUrl}/ffzy/ffzy/${id}`,
					header: {
						Authorization: `Bearer ${this.token}`
					},
					success: (resp) => {
						console.log(resp)
						if (resp.data.data) {
							const item = resp.data.data;
							if (item.geom) {
								this.mapData = {
									ffzyWkt: item.geom
								}
							}
						}
					},
				})
			},
			toWdxx() {
				uni.navigateTo({
					url: "/pages/wdxx/wdxx"
				})
			},
			preview(index, imgs) {
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			changeDetailTab(tabName) {
				this.currentGroupTab = tabName;
			},
			closeDetail() {
				this.$refs.popupDetail.close()
			},
			showSearch(visible) {
				this.searchVisible = visible;
			},
			clear(res) {
				this.searchValue = '';
			},
			search(res) {
				console.log('查询值：' + res.value);
			},
			location() {
				this.locationing = true;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res);
						this.locationing = false;
						const coords = helper.gcj02towgs84(res.longitude, res.latitude)
						console.log(coords, [res.longitude, res.latitude])
						this.mapData = {
							center: [...coords, Math.random()]
						}
					},
					fail: () => {
						this.locationing = false;
					}
				});
			},
			toWorkBench() {
				uni.navigateTo({
					url: '/pages/workbench/workbench',
					success(a) {
						debugger
					},
					fail(a) {
						debugger
					}
				})
			},
			popupChange(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			showLayerModal() {
				this.$refs.popup.open('bottom')
			},
			_request(index, wkt, apis, callback) {
				if (apis[index]) {
					uni.request({
						url: `${helper.mgServerUrl}${apis[index]}?wkt=${wkt}`,
						success: (resp2) => {
							console.log(resp2)
							if (resp2?.data?.data?.dyColumn?.length > 0) {
								const layerItem = this.layerItems.find(item => item.detailUrl === apis[index]);
								this.currentClickLayerItem = layerItem;
								callback(resp2?.data?.data, layerItem)
							} else {
								this._request(++index, wkt, apis, callback)
							}
						}
					})
				} else {
					callback();
				}
			},
			requestDetail({
				wkt
			}) {
				// if (resp?.data?.features?.[0]) {
				// 	this.mapData = {
				// 		highLightData: resp?.data?.features?.[0]
				// 	}

				// }
				const apis = [];
				this.layerItems.forEach((item, i) => {
					const layerIndex = this.currentLayers.findIndex(l => l === i);
					if (layerIndex > -1) {
						apis.push(item.detailUrl);
					}
				});
				this._request(0, wkt, apis, (resp) => {
					if (resp) {
						if (resp.geom) {
							this.mapData = {
								highLightWkt: resp.geom
							}

						}
						const groups = _.groupBy(resp.dyColumn, 'tab');
						this.detailGroups = _.keys(groups).map(key => {
							return {
								tab: key,
								children: groups[key]?.map(item => {
									return {
										...item,
										value: item.value || ''
									}
								})
							}
						});
						this.currentGroupTab = this.detailGroups?.[0]?.tab;
						this.$refs.popupDetail.open('bottom');

					}
				});
			}
		}
	}
</script>

<script module="mapModule" lang="renderjs">
	import 'ol/ol.css'
	import {
		Map,
		View
	} from 'ol'
	import {
		get as getProjection
	} from 'ol/proj';
	import {
		Tile as TileLayer,
		Vector as VectorLayer
	} from 'ol/layer'
	import {
		XYZ,
		Vector as VectorSource
	} from 'ol/source'
	import {
		Point,
		Polygon,
		Circle,
		LineString
	} from 'ol/geom'
	import {
		fromExtent,
		fromCircle
	} from 'ol/geom/Polygon';
	import Feature from 'ol/Feature';
	import {
		Style,
		Icon as IconStyle,
		Circle as CircleStyle,
		Fill,
		Stroke,
		Text as TextStyle
	} from 'ol/style'
	import helper from '../../common/helper';
	import {
		Image,
		Tile
	} from 'ol/layer';
	import {
		ImageWMS,
		WMTS
	} from 'ol/source';
	import {
		GeoJSON,
		WKT
	} from 'ol/format'
	import {
		getForViewAndSize
	} from 'ol/extent';
	import {
		WMTS as WMTSGrid
	} from 'ol/tilegrid'
	let map, vectorLayer, locationVectorLayer;
	export default {
		name: 'c-ol-map',
		data() {
			return {
				ownerInstance: null
			}
		},
		mounted(args) {
			console.log(args)
			this.initMap()
		},
		methods: {
			updateMapData(newValue, oldValue, ownerInstance, instance) {
				this.ownerInstance = ownerInstance;
				// 监听 service 层数据变更
				if (map) {
					if (newValue.center) {
						const point = new Point([newValue.center[0], newValue.center[1]]);
						const pFeature = new Feature({
							geometry: point
						});
						pFeature.setStyle([new Style({
								image: new IconStyle({
									src: './static/wz.png',
									scale: 0.5,
									anchor: [0.5, 1]
								})
							})
							// , new Style({
							// 	image: new CircleStyle({
							// 		radius: 8,
							// 		fill: new Fill({
							// 			color: 'rgba(0,0,0,0)',
							// 		}),
							// 		stroke: new Stroke({
							// 			width: 3,
							// 			color: '#00ffff'
							// 		}),
							// 	})
							// })
						])
						locationVectorLayer.getSource().clear();
						locationVectorLayer.getSource().addFeature(pFeature);
						map.getView().fit(point, {
							maxZoom: 16
						});
					}
					if (newValue.layerOpts) {
						const businessLayers = map.getAllLayers().filter(l => {
							return l.get('businessId') === 'business-layer';
						}) || []
						const layers = newValue.layerOpts.map(opt => {
							let layer = businessLayers.find(l => {
								return l.get('businessIndex') === opt.layerIndex;
							})
							if (!layer) {
								if (opt.layerType === 'wmts') {
									var gridsetName = 'EPSG:4326';
									var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
										'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7',
										'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11',
										'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15',
										'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19',
										'EPSG:4326:20', 'EPSG:4326:21'
									];
									var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
										0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
										0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
										1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
										2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
										2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7,
										3.3527612686157227E-7
									];

									// const url = `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts?layer=${opt.layerWorkspace}:${opt.layerName}&style=${opt.layerStyle||''}&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={y}&TileRow={x}`
									// console.log(url)
									var source = new WMTS({
										url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts`,
										// url,
										layer: `${opt.layerWorkspace}:${opt.layerName}`,
										matrixSet: gridsetName,
										format: 'image/png',
										projection: "EPSG:4326",
										tileGrid: new WMTSGrid({
											tileSize: [256, 256],
											extent: [-180.0, -90.0, 180.0, 90.0],
											origin: [-180.0, 90.0],
											resolutions: resolutions,
											matrixIds: gridNames
										}),
										style: opt.layerStyle || '',
										wrapX: true
									});
									layer = new Tile({
										businessId: 'business-layer',
										businessName: opt.layerName,
										businessIndex: opt.layerIndex,
										zIndex: opt.zIndex,
										source,
										extent: opt.extent || undefined
									});
								} else if (opt.layerType === 'xyz') {
									layer = new TileLayer({
										source: new XYZ({
											maxZoom: opt.maxZoom || 18,
											url: opt.url,
											// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
											projection: opt.projection || 'EPSG:3857',
											crossOrigin: '*',
										}),
										zIndex: opt.zIndex,
										extent: opt.extent || undefined,
										businessId: 'business-layer',
										businessName: opt.layerName,
										businessIndex: opt.layerIndex,
									})
								} else {
									layer = new Image({
										businessId: 'business-layer',
										businessName: opt.layerName,
										businessIndex: opt.layerIndex,
										extent: opt.extent || undefined,
										source: new ImageWMS({
											ratio: 1,
											url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/wms`,
											params: {
												'FORMAT': 'image/png',
												'VERSION': '1.1.1',
												"STYLES": opt.layerStyle || '',
												"LAYERS": `${opt.layerWorkspace}:${opt.layerName}`,
												"exceptions": 'application/vnd.ogc.se_inimage',
											}
										}),
										zIndex: opt.zIndex
									});
								}
								businessLayers.push(layer);
								map.addLayer(layer);
							} else {
								layer.setVisible(true)
							}
							return layer;
						})
						vectorLayer.getSource().clear();
						businessLayers.forEach(layer => {
							const index = newValue.layerOpts.findIndex(opt => opt.layerIndex === layer.get(
								'businessIndex'));
							if (index === -1) {
								layer.setVisible(false);
							}
						})
					}
					if (newValue.highLightWkt) {
						const feature = new WKT().readFeature(newValue.highLightWkt)
						feature.setStyle(new Style({
							fill: new Fill({
								color: 'rgba(0,0,0,0)',
							}),
							stroke: new Stroke({
								width: 3,
								color: '#ff0000'
							}),
							image: new CircleStyle({
								radius: 8,
								fill: new Fill({
									color: 'rgba(0,0,0,0)',
								}),
								stroke: new Stroke({
									width: 3,
									color: '#00ffff'
								}),
							})
						}));
						vectorLayer.getSource().clear();
						vectorLayer.getSource().addFeature(feature)
					}
					if (newValue.ffzyWkt) {
						const point = new WKT().readGeometry(newValue.ffzyWkt);
						const coordinate = point.getCoordinates();
						map.getView().setCenter(coordinate)
						this.showByWkt(coordinate)
					}
					if (newValue.mjcl) {
						helper.startMeasure(map, () => {
							this.ownerInstance?.callMethod('closeMeasureStatus', false)
						})
					}
					if (newValue.xzgjPoints) {
						this.clear();
						if (newValue.xzgjPoints.length === 1) {
							const point = new Point(newValue.xzgjPoints[0]);
							const feature = new Feature({
								geometry: point
							})
							const style = new Style({
								image: new CircleStyle({
									fill: new Fill({
										color: '#0ff'
									}),
									radius: 8
								})
							})
							feature.setStyle(style);
							vectorLayer.getSource().addFeature(feature)
							map.getView().setCenter(newValue.xzgjPoints[0])
						} else if (newValue.xzgjPoints.length === 2) {
							const line = new LineString(newValue.xzgjPoints);
							const feature = new Feature({
								geometry: line
							})
							const style = helper.generateStyle(feature, {
								fillOpt: {
									color: 'rgba(255, 255, 255, 0.4)',
								},
								strokeOpt: {
									color: '#ffcc33',
									width: 2,
								}
							})
							feature.setStyle(style);
							vectorLayer.getSource().addFeature(feature)
							const geom = line.clone();
							geom.scale(2, 2)
							map.getView().fit(geom)
						} else if (newValue.xzgjPoints.length >= 3) {
							const polygon = new Polygon([
								[...newValue.xzgjPoints, newValue.xzgjPoints[0]]
							]);
							const feature = new Feature({
								geometry: polygon
							})
							const style = helper.generateStyle(feature, {
								fillOpt: {
									color: 'rgba(255, 255, 255, 0.4)',
								},
								strokeOpt: {
									color: '#ffcc33',
									width: 2,
								},
								withNode: true
							})
							feature.setStyle(style);
							vectorLayer.getSource().addFeature(feature)
							const geom = polygon.clone();
							geom.scale(2, 2)
							map.getView().fit(geom)
						}
					}
				}
			},
			clear() {
				if (map) {
					map.removeLayer(map.getAllLayers().find(l => l.get('id') === 'draw-layer'));
					vectorLayer.getSource().clear();
					locationVectorLayer.getSource().clear();
				}
			},
			// 初始化天地图
			initMap() {
				let that = this
				//天地图影像
				// var tdt = new TileLayer({
				// 	source: new XYZ({
				// 		maxZoom: 16,
				// 		url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
				// 		// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				// 		projection: 'EPSG:3857',
				// 		crossOrigin: '*',
				// 	}), 
				// })
				//天地图标注
				// var tdtLabel = new TileLayer({
				// 	source: new XYZ({
				// 		maxZoom: 18,
				// 		url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				// 		projection: 'EPSG:3857',
				// 	}),
				// })
				map = new Map({
					controls: [],
					target: 'map',
					layers: [],
					view: new View({
						projection: 'EPSG:4326',
						center: [102.45438, 32.53223],
						// center: [102.712251, 25.040609],
						zoom: 12,

						enableRotation: false
					}),
				})
				vectorLayer = new VectorLayer({
					id: 'v-layer',
					source: new VectorSource(),
					zIndex: 999
				})
				map.addLayer(vectorLayer);
				locationVectorLayer = new VectorLayer({
					id: 'l-v-layer',
					source: new VectorSource(),
					zIndex: 1000
				})
				map.addLayer(locationVectorLayer);
				map.on('singleclick', evt => {
					vectorLayer.getSource().clear();
					console.log('evt', evt, map.getView().calculateExtent())
					this.showByWkt(evt.coordinate);
				})
			},
			showByWkt(coordinate) {
				// const source = map.getAllLayers().find(l => l.get('id') === 'business-layer')?.getSource();
				// if (source) {
				const view = map.getView();
				const viewResolution = view.getResolution();
				const [x1] = map.getCoordinateFromPixel([0, 0]);
				const [x2] = map.getCoordinateFromPixel([10, 0]);
				const radius = x2 - x1;
				const circle = new Circle(coordinate, radius);
				const polygon = fromCircle(circle);
				const wkt = new WKT().writeGeometry(polygon);
				// const url = source.getFeatureInfoUrl(
				// 	coordinate, viewResolution, view.getProjection(), {
				// 		'INFO_FORMAT': 'application/json',
				// 		'FEATURE_COUNT': 50
				// 	});
				this.ownerInstance?.callMethod('requestDetail', {
					wkt: wkt
				})
				// }
			}
		}
	}
</script>

<style scoped>
	.detail-tab {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		/* margin-bottom: 12px; */
		padding-bottom: 12px;
		flex-wrap: wrap;
	}

	.popup-detail-title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		border-bottom: 1px solid #ddd;
	}

	.logout {}

	.search {
		margin-right: 24px;
	}

	.btn-logout {
		margin-top: 12px;
		border-radius: 10px;
	}

	.img-clear,
	.img-logout {
		opacity: 0.6;
	}

	.img-clear,
	.img-jwd {
		width: 26px;
		height: 26px;
	}

	.img-logout,
	.img-message,
	.img-search,
	.img-location {
		width: 30px;
		height: 30px;
	}

	.top-right {
		position: absolute;
		top: 40px;
		right: 28px;
		display: flex;
		align-items: center;
		left: 10px;
		justify-content: end;
		height: 56px;
	}

	.popup-title {
		font-weight: bold;
		font-size: 22px;
		text-align: center;
		margin: 24px 0 0 0;
	}

	.popup-content {
		padding: 24px;
	}

	.container>>>.checklist-box {
		margin-right: 0 !important;
	}

	.container>>>.checklist-group {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container>>>.checklist-content {
		width: 70vw;
		height: 32px;
	}

	.btn-img {
		width: 26px;
		height: 26px;
	}

	.right-btn {
		width: 48px;
		height: 48px;
		background-color: #fff;
		flex-direction: column;
		display: flex;
		align-items: center;
		padding: 0;
		justify-content: center;
		font-size: 12px;
		padding: 2px 0;
	}

	.btn-location {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom: 1px solid #ddd;
		margin-top: 12px;
	}

	.btn-clear {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.btn-tcdj {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom: 1px solid #ddd;
	}

	.btn-mjcl {
		border-bottom: 1px solid #ddd;
	}

	.btn-xzgj {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.right-actions {
		position: absolute;
		top: 100px;
		right: 20px;
	}

	.map {
		height: 100vh;
	}

	.location {
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.south {
		position: absolute;
		top: 100px;
		left: 20px;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.south-img {
		position: absolute;
		top: 0;
		left: -5px;
		width: 60px;
		height: 60px;

	}

	.south-text {
		z-index: 1;
		font-weight: bold;
		font-size: 17px;
		margin-top: 8px;
	}

	.btn-workbench {
		width: 80px;
		height: 80px;
		border-radius: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		justify-content: center;
		position: absolute;
		bottom: 20px;
		right: 20px;
		background: linear-gradient(0deg, #02C3AF, #00D883);
		color: #fff;
		/* height: 24px; */
		line-height: 24px;
		/* font-size: 16px; */
	}

	.workbench-img {
		width: 30px;
		height: 30px;
	}
</style>