<template>
	<view class="container">
		<!-- <image src="../../static/zddt.jpg" mode="" class="bgimg"  @click="todetail()"></image> -->
		<map id="map" style="width: 100%; height:2000rpx;" scale="13" :markers="markers" longitude="111.436625"
			latitude="36.771975" show-location @markertap="markertap" @callouttap="callouttap">
			<cover-view slot="callout">
				<cover-view v-for="(item,index) in markers" :key="index" class="customCallout" :marker-id="item.id">
					<cover-image class="imgs" src="@/static/zhandian_icon_xuqin_title.png"
						v-if="item.stationType == 'livestock'"></cover-image>
					<cover-image class="imgs" src="@/static/zhandian_icon_nongtian_title.png"
						v-if="item.stationType == 'orient'"></cover-image>
					<cover-image class="imgs" src="@/static/zhandian_icon_qiye_title.png"
						v-if="item.stationType == 'cusLocaltion'"></cover-image>
					<cover-view class="content"
						v-if="item.stationType == 'livestock' || item.stationType == 'orient'|| item.stationType == 'cusLocaltion'">
						{{item.stationName}}
					</cover-view>
				</cover-view>
			</cover-view>
		</map>
		<view class="zdxq">
			<view class="zdxqitem" @click="switch2Change">
				<image src="../../static/zhandian_xuqin_dingwei.png" mode=""></image>
				<view class="textss">
					团柏河典型小流域监测站
				</view>
				<view class="crildon" :style="!issscd?'background:#00ff37':'background: #ccc;'"></view>
			</view>
			<view class="zdxqitem" @click="switch3Change">
				<image src="../../static/zhandian_nongtian_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 selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	export default {
		components: {
			selectSwitch
		},
		data() {
			return {
				markers: [],
				markersNoPest: [],
				list: [],
				pointers: [],
				imgurl1: '@/static/zhandian_icon_nongtian_title.png',
				imgurl2: '@/static/zhandian_icon_xuqin_title.png',
				isscd: true,
				issscd: true,
				isssscd: true,
				pestlight: [],
				cusLocation: [],
				stationInfo: [],
				pestlightMarker: null,
				stationlist: [],
				timerSet: null
			};
		},
		onLoad() {
			// this.isscd = true
			// this.getList()
			this.$nextTick(() => {
				this.getList()
			})
		},
		onShow() {
			var that = this
			if (uni.getStorageSync('third_session')) {
				uni.login({
					success: function(res) {
						console.log(res.code)
						this.code = res.code
						let params = {}
						params.jsCode = this.code
						console.log(params, 152)
						api.wxlogin(params).then(res => {
							console.log(res, 165)
							if (res.data.code == 0) {
								let userInfo = res.data.data;
								// uni.setStorageSync('third_session', userInfo.thirdSession);
								if (!userInfo.id) {
									uni.reLaunch({
										url: '/packDetail/pages/login/login'
									})
								} else {
									// that.isscd = true
									//
								}
							}
						})
					}
				});
			} else if (!uni.getStorageSync('third_session')) {
				uni.reLaunch({
					url: '/pages/loginindex'
				})
			}

		},
		onReady() {
			// 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性
			this.mapContext = uni.createMapContext("alarm_map", this);
		},
		methods: {
			getList() {
				this.markers = []
				this.markersNoPest = []
				this.pointers = []
				this.list = []
				uni.showLoading({
					title: '加载中'
				});
				this.$http.get('/applet/survStationInfo/stationMap').then(res => {
					this.stationlist = [...res.data.data.pestlight, ...res.data.data.cusLocation, ...res.data.data
						.stationInfo
					]
					this.stationlist.forEach((item, index) => {
						item.id = index;
						if (item.inType == 'pestlight') {
							this.pestlight.push(item)
						}
						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()
					this.list2query()
					uni.hideLoading();
				})
			},
			// 处理 stationlist 数据方法
			processStationList(stationlist) {
				if (stationlist) {
					stationlist.forEach(item => {
						this.list.push({
							latitude: item.inType === 'pestlight' ? Number(item.latitude) : Number(item
								.stationLatitude),
							longitude: item.inType === 'pestlight' ? Number(item.longitude) : Number(item
								.stationLongitude),
							stationType: item.inType === 'pestlight' ? 'pestlight' : item.stationType,
							sortNo: item.sortNo,
							stationName: item.stationName,
							stationCode: item.stationCode
						})
					})
				}
			},
			markertap(e) {
				const index = e.detail.markerId
				console.log(e.detail, 'index')
				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
					})
					// 创建符合 markers 格式的对象
					const markerItem = {
						id: item.id,
						iconPath: item.iconPath,
						latitude: item.latitude,
						longitude: item.longitude,
						width: item.width,
						height: item.height,
						customCallout: {
							anchorY: 0, // Y轴偏移量
							anchorX: 0, // X轴偏移量
							display: 'ALWAYS' // 一直展示
						},
						stationType: item.stationType,
						stationName: item.stationName,
						stationCode: item.stationCode,
						joinCluster: true // 是否参与点聚合
					};
					this.markers.push(markerItem);
				}
			},
			switch2Change() {
				this.issscd = !this.issscd
				this.list1query()
			},
			switch3Change() {
				this.isssscd = !this.isssscd
				this.list2query()
			},
			list1query() {
				if (!this.issscd) {
					for (let i = 0; i < this.stationInfo.length; i++) {
						const item = this.stationInfo[i];
						if (item.stationType === 'orient') {
							item.iconPath = '/static/zhandian_nongtian_dingwei.png';
							item.latitude = Number(item.stationLatitude);
							item.longitude = Number(item.stationLongitude);
							item.width = 35;
							item.height = 52;
							// 创建符合 markers 格式的对象
							const markerItem = {
								id: item.id,
								iconPath: item.iconPath,
								latitude: item.latitude,
								longitude: item.longitude,
								width: item.width,
								height: item.height,
								customCallout: {
									anchorY: 0, // Y轴偏移量
									anchorX: 0, // X轴偏移量
									display: 'ALWAYS' // 一直展示
								},
								stationType: item.stationType,
								stationName: item.stationName,
								stationCode: item.stationCode,
								joinCluster: true // 是否参与点聚合
							};
							this.markers.push(markerItem);
						}
					}
				} else {
					this.markers = this.markers.filter((item) => {
						return item.stationType !== 'orient'
					})
				}
			},
			list2query() {
				if (!this.isssscd) {
					for (let i = 0; i < this.stationInfo.length; i++) {
						const item = this.stationInfo[i];
						if (item.stationType === 'livestock') {
							item.iconPath = '/static/zhandian_xuqin_dingwei.png';
							item.latitude = Number(item.stationLatitude);
							item.longitude = Number(item.stationLongitude);
							item.width = 35;
							item.height = 52;
							// 创建符合 markers 格式的对象
							const markerItem = {
								id: item.id,
								iconPath: item.iconPath,
								latitude: item.latitude,
								longitude: item.longitude,
								width: item.width,
								height: item.height,
								customCallout: {
									anchorY: 0, // Y轴偏移量
									anchorX: 0, // X轴偏移量
									display: 'ALWAYS' // 一直展示
								},
								stationType: item.stationType,
								stationName: item.stationName,
								stationCode: item.stationCode,
								joinCluster: true // 是否参与点聚合
							};
							this.markers.push(markerItem);
						}
					}
				} else {
					this.markers = this.markers.filter((item) => {
						return item.stationType !== 'livestock'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bgimg {
		position: fixed;
		// z-index: -99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.customCallout {
		width: 349rpx;
		height: 49rpx;
		color: #fff;
		font-size: 24rpx;
		text-shadow: 1rpx 2rpx 0rpx #0D1934;
		font-weight: bold;
		// background-image: url('@/static/zhandian_icon_nongtian_title.png');
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.customCallout1 {
		width: 349rpx;
		height: 49rpx;
		color: #fff;
		font-size: 24rpx;
		text-shadow: 1rpx 2rpx 0rpx #0D1934;
		font-weight: bold;
		// background-image: url('@/static/zhandian_icon_xuqin_title.png');
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zdxq {
		position: fixed;
		left: 33rpx;
		bottom: 36rpx;
	}

	.zdxqitem {
		padding: 8rpx 0 7rpx 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		text-shadow: 0rpx 1rpx 0rpx rgba(4, 49, 52, 0.55);
		width: 359rpx;
		background: rgba(0, 0, 0, 0.52);
		border: 1px solid #4B677C;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.crildon {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.zdxqitem:last-child {
		margin-bottom: 0;
	}

	.zdxqitem image {
		width: 33rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.zdxqitem:first-child image {
		width: 30rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.textss {
		flex: 1;
		text-align: left;
	}

	.imgs {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -9;
	}

	.switchs {
		position: fixed;
		top: 36rpx;
		right: 40rpx;
		display: flex;
		align-items: center;
	}
</style>