<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="110.628279"
		 latitude="35.546105"
		 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-view class="content" v-if="item.stationType == 'livestock' || item.stationType == 'orient'">
		 				{{item.stationName}}
		 			</cover-view>
		 		</cover-view>
		 </cover-view>
		 </map>
		 <view class="zdxq">
		 	<view class="zdxqitem">
		 		<image src="../../static/zhandian_sahchong_dingwei.png" mode=""></image>
				<view class="textss">
					联网式太阳能杀虫灯
				</view>
		 	</view>
			<view class="zdxqitem">
				<image src="../../static/zhandian_xuqin_dingwei.png" mode=""></image>
				<view class="textss">
					畜禽养殖污染监测站
				</view>
			</view>
			<view class="zdxqitem">
				<image src="../../static/zhandian_nongtian_dingwei.png" mode=""></image>
				<view class="textss">
					农田面源污染监测站
				</view>
			</view>
		 </view>
		 <view class="switchs">
			 <selectSwitch @change="switch1Change" :defaultSwitch="isscd" checked_bj_color="#13ce66"/>
		 	<!-- <switch style="margin-right: 10rpx;" :checked="isscd" @change="switch1Change" /> -->
			<!-- 显示/隐藏杀虫灯	 -->
		 </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: [],
				list:[],
				pointers:[],
				imgurl1:'@/static/zhandian_icon_nongtian_title.png',
				imgurl2:'@/static/zhandian_icon_xuqin_title.png',
				isscd:true,
			};
		},
		onLoad() {
			// this.isscd = true
			// this.getList()
		},
		onShow() {
			this.isscd = true
			this.$nextTick(()=>{
				this.getList()
			})
		},
		methods: {
			getList(){
				this.markers = []
				this.pointers = []
				this.list = []
				uni.showLoading({
					title: '加载中'
				});
				this.$http.get('/applet/survStationInfo/stationMap').then(res =>{					
					if(this.isscd == true){
						this.list = []
					}else if(this.isscd == false){
						this.list = res.data.data.pestlight
					}
					var stationlist = res.data.data.stationInfo
					if(this.list.length!=0){
						for(var i=0;i<this.list.length;i++){
							this.list[i].stationType = this.list[i].inType
						}
					}
					if(stationlist){
						for(var k=0;k<stationlist.length;k++){
							this.list.push({
								latitude:stationlist[k].stationLatitude,
								longitude:stationlist[k].stationLongitude,
								stationType:stationlist[k].stationType,
								sortNo:stationlist[k].sortNo,
								stationName:stationlist[k].stationName,
								stationCode:stationlist[k].stationCode
							})
						}
					}
					console.log(this.list,'数组')
					// return
					if(this.list.length != 0){
						for(var i=0;i<this.list.length;i++){
							if(this.list[i].stationType == 'pestlight'){
								this.list[i].iconPath = '/static/zhandian_sahchong_dingwei.png'
								this.list[i].latitude = Number(this.list[i].latitude)
								this.list[i].longitude = Number(this.list[i].longitude)
								this.list[i].width = 15
								this.list[i].height = 20
							}else if(this.list[i].stationType == 'orient'){
								this.list[i].iconPath = '/static/zhandian_nongtian_dingwei.png'
								this.list[i].latitude = Number(this.list[i].latitude)
								this.list[i].longitude = Number(this.list[i].longitude)
								this.list[i].width = 35
								this.list[i].height = 52
							}else if(this.list[i].stationType == 'livestock'){
								this.list[i].iconPath = '/static/zhandian_xuqin_dingwei.png'
								this.list[i].latitude = Number(this.list[i].latitude)
								this.list[i].longitude = Number(this.list[i].longitude)
								this.list[i].width = 35
								this.list[i].height = 52
							}
							this.pointers.push({
								id:i,
								iconPath:this.list[i].iconPath,
								latitude:this.list[i].latitude,
								longitude:this.list[i].longitude,
								width:this.list[i].width,
								height:this.list[i].height,
								customCallout: {
									anchorY: 0, // Y轴偏移量
									anchorX: 0, // X轴偏移量
									display: 'ALWAYS' ,// 一直展示								
								},
								stationType:this.list[i].stationType,
								stationName:this.list[i].stationName,
								stationCode:this.list[i].stationCode,
							})
						}
					}	
					this.markers = this.pointers
					console.log(this.markers,1523)
					uni.hideLoading();
				})
			},
			markertap(e){
				console.log(e,'点击')
				var index = e.detail.markerId
				if(this.list[index].stationType == 'orient' || this.list[index].stationType == 'livestock'){
					uni.navigateTo({
						url:'/packDetail/pages/Site/detail?item='+ encodeURIComponent(JSON.stringify(this.list[index]))
					})
				}
			},
			callouttap(e){
				console.log(e,'点击111')
				var index = e.detail.markerId
				if(this.list[index].stationType == 'orient' || this.list[index].stationType == 'livestock'){
					uni.navigateTo({
						url:'/packDetail/pages/Site/detail?item='+ encodeURIComponent(JSON.stringify(this.list[index]))
					})
				}
			},
			todetails(item){
				console.log(item,'还是个然后')
			},
			switch1Change(e){
				console.log(e,'gwgweg')
				this.isscd = e
				// this.isscd = e.detail.value
				this.$nextTick(()=>{
					this.getList()
				})
			}
		}
	}
</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: 299rpx;
		background: rgba(0,0,0,0.52);
		border: 1px solid #4B677C;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
		position: relative;
	}
	.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>