<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">
			<image src="/static/south.png" class="south-img" />
			<text class="south-text">南</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 class="btn-mjcl right-btn" @click="toggleMeasure">
				<image :src="measureStatus==='mjcl'?'/static/mjcl-sel.png':'/static/mjcl.png'" class="btn-img"></image>
			</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 class="btn-logout right-btn" @click="mapModule.clear">
				<image src="/static/clear.png" class="img-clear" />
			</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="popup" background-color="#fff" @change="popupChange">
				<view class="popup-title">图层叠加</view>
				<view class="popup-content">
					<uni-data-checkbox mode="tag" v-model="currentLayer" :localdata="layerItems"></uni-data-checkbox>
				</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;">详情</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">
							<uni-tag :circle="true" @click="changeDetailTab(groupItem.tab)" :text="groupItem.tab"
								style="margin-right: 8px;"
								: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 {
				searchVisible: false,
				searchValue: '',
				mapData: {
					center: [102.45438, 32.53223]
				},
				currentLayer: null,
				layerItems: [{
					text: '生态修复工程图层',
					value: 'stxfgc'
				}, {
					text: '征占用图层',
					value: 'cdzzy_view'
				}, {
					text: '非法占用图层',
					value: 'ffzy_layer'
				}, {
					text: '草地图层',
					value: 't_grassland_result'
				}],
				detailItems: [],
				detailGroups: [],
				currentGroupTab: null,
				token: '',
				measureStatus: ''
			}
		},
		watch: {
			currentLayer(newVal, oldVal) {
				const map = this.$map;
				console.log(newVal, oldVal, map);
				this.$refs.popup.close()
				if (newVal) {
					this.mapData = {
						layerName: newVal
					}

				}
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'token',
				success: (token) => {
					this.token = token.data;
				}
			})
		},
		methods: {
			closeMeasureStatus() {
				this.measureStatus = ''
				this.mapData = {}
			},
			toggleXzgj() {
				if (this.measureStatus === 'xzgj') {
					this.measureStatus = ''
					this.mapData = {}
				} else {
					this.measureStatus = 'xzgj';
					this.mapData = {
						xzgj: true
					}
				}
			},
			toggleMeasure() {
				if (this.measureStatus === 'mjcl') {
					this.measureStatus = ''
					this.mapData = {}
				} else {
					this.measureStatus = 'mjcl'
					this.mapData = {
						mjcl: true
					}
				}
			},
			showFfzy(id) {
				console.log(id)
				this.currentLayer = 'ffzy_layer'
				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()
			},
			logout() {
				const toLogin = (token) => {
					uni.request({
						url: `${helper.serverUrl}/user/logout`,
						method: 'POST',
						header: {
							Authorization: `Bearer ${token}`
						},
						success() {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						},
						fail() {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
				uni.showModal({
					content: '是否退出当前用户？',
					title: '提示',
					success(res) {
						if (res.confirm) {
							uni.getStorage({
								key: 'token',
								success(resp) {
									uni.removeStorage({
										key: 'token'
									})
									toLogin(resp.data);
								},
								fail() {
									toLogin();
								}
							})
						} else if (res.cancel) {}
					}
				})
			},
			showSearch(visible) {
				this.searchVisible = visible;
			},
			clear(res) {
				this.searchValue = '';
			},
			search(res) {
				console.log('查询值：' + res.value);
			},
			location() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.mapData = {
							center: [res.longitude, res.latitude, Math.random()]
						}
					}
				});
			},
			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')
			},
			requestDetail({
				wkt,
				url
			}) {
				uni.request({
					url,
					success: (resp) => {
						console.log(resp?.data?.features?.[0])
						if (resp?.data?.features?.[0]) {
							this.mapData = {
								highLightData: resp?.data?.features?.[0]
							}
							let apiStr = '';
							switch (this.currentLayer) {
								case 'stxfgc':
									apiStr = '/stxh/details';
									break;
								case 't_grassland_result':
									apiStr = '/cdzy/cdDetails';
									break;
								case 'cdzzy_view':
									apiStr = '/cdzhy/details';
									break;
								case 'ffzy_layer':
									apiStr = '/cdzhy/ffzyDetails';
									break;
							}
							if (apiStr) {
								uni.request({
									url: `${helper.mgServerUrl}${apiStr}?wkt=${wkt}`,
									success: (resp2) => {
										console.log(resp2)
										const groups = _.groupBy(resp2?.data?.data
											.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');
									}
								})
							}
						}
						// const props = resp?.data?.features?.[0]?.properties;
						// if (helper.layerDetails[this.currentLayer]) {
						// 	this.detailItems = helper.layerDetails[this.currentLayer].map(item => {
						// 		return {
						// 			...item,
						// 			value: props[item.field]
						// 		}
						// 	});
						// 	this.$refs.popupDetail.open('bottom');
						// }
					},
					fail: (resp) => {
						console.log(resp)
					}
				})
			}
		}
	}
</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
	} 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
	} from 'ol/style'
	import helper from '../../common/helper';
	import {
		Image
	} from 'ol/layer';
	import {
		ImageWMS
	} from 'ol/source';
	import {
		GeoJSON,
		WKT
	} from 'ol/format'
	import {
		getForViewAndSize
	} from 'ol/extent'
	let map, vectorLayer;
	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, 0]
							})
						}))
						vectorLayer.getSource().clear();
						vectorLayer.getSource().addFeature(pFeature);
						map.getView().fit(point, {
							maxZoom: 18
						});
					}
					if (newValue.layerName) {
						const layer = new Image({
							id: 'business-layer',
							source: new ImageWMS({
								ratio: 1,
								url: `${helper.geoserverUrl}/geoserver/yzt/wms`,
								params: {
									'FORMAT': 'image/png',
									'VERSION': '1.1.1',
									"STYLES": '',
									"LAYERS": `yzt:${newValue.layerName}`,
									"exceptions": 'application/vnd.ogc.se_inimage',
								}
							})
						});
						vectorLayer.getSource().clear();
						map.removeLayer(map.getAllLayers().find(layer => {

							return layer.get('id') === 'business-layer'
						}))
						map.addLayer(layer);
					}
					if (newValue.highLightData) {
						const feature = new GeoJSON().readFeature(newValue.highLightData)
						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)
						})
					}
				}
			},
			clear() {
				if (map) {
					map.removeLayer(map.getAllLayers().find(l => l.get('id') === 'draw-layer'));
					vectorLayer.getSource().clear();
				}
			},
			// 初始化天地图
			initMap() {
				let that = this
				//天地图影像
				var tdt = new TileLayer({
					source: new XYZ({
						maxZoom: 18,
						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: [tdt, tdtLabel],
					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: 99
				})
				map.addLayer(vectorLayer);
				map.on('singleclick', evt => {
					vectorLayer.getSource().clear();
					console.log('evt', evt)
					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
						});
					if (url) {
						this.ownerInstance?.callMethod('requestDetail', {
							wkt: wkt,
							url
						})
					}
				}
			}
		}
	}
</script>

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

	.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-logout,
	.img-message,
	.img-search {
		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;
		display: flex;
		align-items: center;
		padding: 0;
		justify-content: center;
	}

	.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: 160px;
		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;
	}

	.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>