<template>
	<view class="container">
		<map id="map" ref="map" style="width: 100%; height:2000rpx;" scale="13" :markers="markers" longitude="111.436625"
			latitude="36.771975" show-location @markertap="markertap" @callouttap="callouttap">
		</map>
		<view class="zdxq">
			<view class="zdxqitem" @click="switch2Change('团柏河')">
				<image src="../../static/zhandian_nongtian_dingwei.png" mode=""></image>
				<view class="textss">
					团柏河典型小流域监测站
				</view>
				<view class="crildon" :style="!issscd?'background:#00ff37':'background: #ccc;'"></view>
			</view>
			<view class="zdxqitem" @click="switch2Change('对竹河')">
				<image src="../../static/zhandian_xuqin_dingwei.png" mode=""></image>
				<view class="textss">
					对竹河典型小流域监测站
				</view>
				<view class="crildon" :style="!isssscd?'background:#00ff37':'background: #ccc;'"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import configService from '@/common/service/config.service.js';
	export default {
		data() {
			return {
				baseUrl:configService.staticDomainURL,
				markers: [],
				list: [],
				issscd: true,
				isssscd: true,
				stationInfo: [],
				cusLocation: [],
				stationlist: [],
				stationTwolist:[],
				mapCtx: null // 添加地图上下文
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.getList()
			})
		},
		onReady() {
			// 在onReady中初始化地图上下文
			this.mapCtx = uni.createMapContext('map', this);
		},
		onShow() {
			if (!uni.getStorageSync('third_session')) {
				uni.reLaunch({
					url: '/pages/loginindex'
				})
			}
		},
		methods: {
			getList() {
				this.markers = []
				this.list = []
				uni.showLoading({
					title: '加载中'
				});
				
				this.$http.get('/applet/survStationInfo/stationMap').then(res => {
					this.stationlist = [...res.data.data.stationInfo]
					this.stationTwolist = [...res.data.data.stationInfo]
					this.stationlist.forEach((item, index) => {
						item.id = index;
						if (item.stationType == 'cusLocaltion') {
							this.cusLocation.push(item)
						}
						if (item.stationType == 'orient' || item.stationType == 'livestock') {
							this.stationInfo.push(item)
						}
						this.list.push({
							latitude: Number(item.stationLatitude),
							longitude: Number(item.stationLongitude),
							stationType: item.stationType,
							sortNo: item.sortNo,
							stationName: item.stationName,
							stationCode: item.stationCode
						})
					})
					
					this.issscd = false
					this.isssscd = false
					this.qiyeChange()
					this.list1query()
					
					// 延迟执行以确保标记已经添加到地图
					setTimeout(() => {
						this.adjustMapToFitAllMarkers();
					}, 500);
					
					uni.hideLoading();
				})
			},
			
			// 调整地图视野以包含所有标记点
			adjustMapToFitAllMarkers() {
				if (this.mapCtx && this.list.length > 0) {
					this.mapCtx.includePoints({
						points: this.list.map(item => ({
							latitude: item.latitude,
							longitude: item.longitude
						})),
						padding: [40, 40, 40, 40] // 上下左右的边距
					});
				}
			},
			
			// 调整地图视野到特定区域的标记点
			adjustMapToRegion(regionName) {
				let points = [];
				
				if (regionName === '团柏河') {
					// 获取团柏河区域的所有标记点
					points = this.stationTwolist
						.filter(item => item.groupName === '团柏河')
						.map(item => ({
							latitude: Number(item.stationLatitude),
							longitude: Number(item.stationLongitude)
						}));
				} else if (regionName === '对竹河') {
					// 获取对竹河区域的所有标记点
					points = this.stationTwolist
						.filter(item => item.groupName === '对竹河')
						.map(item => ({
							latitude: Number(item.stationLatitude),
							longitude: Number(item.stationLongitude)
						}));
				}
				
				if (points.length > 0 && this.mapCtx) {
					this.mapCtx.includePoints({
						points: points,
						padding: [60, 60, 60, 60] // 可以调整边距以获得更好的显示效果
					});
				}
			},
			
			markertap(e) {
				const index = e.detail.markerId
				if (['orient', 'livestock'].includes(this.list[index].stationType)) {
					uni.navigateTo({
						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
					})
				}
			},
			callouttap(e) {
				const index = e.detail.markerId
				if (['orient', 'livestock'].includes(this.list[index].stationType)) {
					uni.navigateTo({
						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
					})
				}
			},
			qiyeChange() {
				for (let i = 0; i < this.cusLocation.length; i++) {
					const item = this.cusLocation[i];
					item.iconPath = '/static/qiyeIcon.png';
					item.latitude = Number(item.stationLatitude);
					item.longitude = Number(item.stationLongitude);
					item.width = 35;
					item.height = 52;
					this.list.push({
						latitude: Number(item.stationLatitude),
						longitude: Number(item.stationLongitude),
						stationType: item.stationType,
						sortNo: item.sortNo,
						stationName: item.stationName,
						stationCode: item.stationCode
					})
					
					const markerItem = {
						id: item.id,
						iconPath: item.iconPath,
						latitude: item.latitude,
						longitude: item.longitude,
						width: item.width,
						height: item.height,
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: 'ALWAYS'
						},
						stationType: item.stationType,
						stationName: item.stationName,
						stationCode: item.stationCode,
						joinCluster: true
					};
					this.markers.push(markerItem);
				}
			},
			switch2Change(name) {
				// 切换显示状态
				if (name === "团柏河") {
					this.stationlist = this.issscd ? 
						this.stationTwolist.filter(item => item.groupName !== "团柏河") : 
						this.stationTwolist;
				} else {
					this.stationlist = this.isssscd ? 
						this.stationTwolist.filter(item => item.groupName !== "对竹河") : 
						this.stationTwolist;
				}
				
				// 更新标记显示
				this.list1query();
				
				// 调整地图视野到指定区域
				setTimeout(() => {
					this.adjustMapToRegion(name);
				}, 300);
			},
			list1query() {
				// 先清除所有orient类型的标记
				this.markers = this.markers.filter(item => item.stationType !== 'orient');
				
				if (!this.issscd) {
					for (let i = 0; i < this.stationlist.length; i++) {
						const item = this.stationlist[i];
						if (item.stationType === 'orient') {
							item.iconPath = this.baseUrl +'/'+ item.stationIcon;
							item.latitude = Number(item.stationLatitude);
							item.longitude = Number(item.stationLongitude);
							item.width = 172;
							item.height = 148;
							
							const markerItem = {
								id: item.id,
								iconPath: item.iconPath,
								latitude: item.latitude,
								longitude: item.longitude,
								width: item.width,
								height: item.height,
								customCallout: {
									anchorY: 0,
									anchorX: 0,
									display: 'ALWAYS'
								},
								stationType: item.stationType,
								stationName: item.stationName,
								stationCode: item.stationCode,
								joinCluster: true
							};
							this.markers.push(markerItem);
						}
					}
				}
			},
		}
	}
</script>