<template>
	<view class="page">
		<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' :title-bold='true' height='45' id="navbar">
		</u-navbar>
		<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
			:show-location='true' :markers="covers"></map>
        
		<view class="fxtongji">
			<view class="one">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
				<text class="wz">蜂场</text>
				<text class="shu">{{listmap.length}}</text>
			</view>
			<view class="two">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
				<text class="wz">蜂箱</text>
				<text class="shu">{{listmaps.length}}</text>
			</view>
		</view> 
		
		<tab-bar :indexs='3' style=""></tab-bar>
		<!-- <span style="">福鼎蜂场</span> -->
	</view>
</template>

<script> 
	export default { 
		data() {
			return {   
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				title: "地图",   
				latitude: '',
				longitude: '',
				isMap: false,
				zoomSize: 15,
				markers: [{
					id: 1,
					latitude: 39.90469,
					longitude: 116.40717,

					iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
					width: 39,
					height: 46,
					callout: {
						content: '福鼎蜂场福建省宁德市福鼎市太姥山镇秦屿大道二号\n', // 修改为你想要显示的文字内容
						color: '#000', // 修改为文字颜色
						fontSize: 14, // 修改为文字大小
						borderRadius: 10, // 修改为气泡圆角大小
						bgColor: '#FFFFFF', // 修改为气泡背景颜色
						padding: 10, // 修改为气泡内边距
						display: 'ALWAYS', // 修改为气泡的显示策略
						textAlign: 'center', // 设置文字对齐方式

					}
				}, {
					id: 2,
					latitude: 39.90969,
					longitude: 116.41217,
					iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
					width: 39,
					height: 46,
					callout: {
						content: '未上架', // 修改为你想要显示的文字内容
						color: '#ffffff', // 修改为文字颜色
						fontSize: 14, // 修改为文字大小
						borderRadius: 10, // 修改为气泡圆角大小
						bgColor: '#000000', // 修改为气泡背景颜色
						padding: 6, // 修改为气泡内边距
						display: 'ALWAYS', // 修改为气泡的显示策略
					}
				}],
                jinweidu:'',
				covers: [],
				mapContext: null,
				mapScaleInterval: null,
                listmap:[],
				listmaps:[]
			}
		},
		onLoad() {

		},
		onShow() {
            this.getMyLocation()
			this.getMyLocations()
		},
		onReady() {
			this.mapContext = uni.createMapContext('map', this)
			this.mapScaleInterval = setInterval(this.updateMarkers, 1000)
		},
		beforeDestroy() {
			if (this.mapScaleInterval) {
				clearInterval(this.mapScaleInterval)
				this.mapScaleInterval = null
			}
		},
		methods: {
			getMyLocations() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.jinweidu = res.longitude + ',' + res.latitude
						this.latitude = Number(res.latitude.toFixed(5)) - 0.004
						this.longitude = Number(res.longitude.toFixed(5)) + 0.004
						// this.setMapScale()
						// 请求附近的店铺  
						this.$u.get("/farm/beehive/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
							res => {
								if (res.code == 200) {
									this.listmaps = res.data
									res.data.forEach(item => {
										this.covers.push({
											id: parseFloat(item.storeId),
											latitude: item.lat,
											longitude: item.lng,
											width: 25,
											height: 30,
											iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
											label: {
												content: item.name,
												anchorX: (() => {
													if (item.name.length <= 2) {
														return -12
													} else if (item.name.length <= 3) {
														return -20
													} else if (item.name.length <= 4) {
														return -25
													} else if (item.name.length <= 5) {
														return -30
													} else if (item.name.length <= 6) {
														return -35
													} else if (item.name.length <= 8) {
														return -40
													} else if (item.name.length <=
														10) {
														return -45
													} else {
														return -item.name.length * 5
													}
												})(),
												fontWeight: 700,
												color: '#FFCC25',
												textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
												borderColor:'#fff',
												borderRadius:5,
												bgColor: 'rgba(255, 255, 255, 0.7)'
											}
										})
										// this.covers.push(shopCover)
									});
								}
							})
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				});
			},
			
             getMyLocation() {
             	uni.getLocation({
             		type: 'wgs84',
             		success: (res) => {
             			this.jinweidu = res.longitude + ',' + res.latitude
             			this.latitude = Number(res.latitude.toFixed(5)) - 0.004
             			this.longitude = Number(res.longitude.toFixed(5)) + 0.004
             			// this.setMapScale()
             			// 请求附近的店铺  
             			this.$u.get("/farm/apiary/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
             				res => {
             					if (res.code == 200) {
									this.listmap = res.data
             						res.data.forEach(item => {
             							this.covers.push({
             								id: parseFloat(item.storeId),
             								latitude: item.lat,
             								longitude: item.lng,
             								width: 25,
             								height: 30,
             								iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
             								label: {
             									content: item.name,
             									anchorX: (() => {
             										if (item.name.length <= 2) {
             											return -12
             										} else if (item.name.length <= 3) {
             											return -20
             										} else if (item.name.length <= 4) {
             											return -25
             										} else if (item.name.length <= 5) {
             											return -30
             										} else if (item.name.length <= 6) {
             											return -35
             										} else if (item.name.length <= 8) {
             											return -40
             										} else if (item.name.length <=
             											10) {
             											return -45
             										} else {
             											return -item.name.length * 5
             										}
             									})(),
             									fontWeight: 700,
             									color: '#FFCC25',
             									textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
             									borderColor:'#fff',
             									borderRadius:5,
             									bgColor: 'rgba(255, 255, 255, 0.7)'
             								}
             							})
             							// this.covers.push(shopCover)
             						});
             					}
             				})
             		},
             		fail: (err) => {
             			console.error('获取位置失败：', err)
             		}
             	});
             },
			 // 缩放显示隐藏
			 updateMarkers() {
			 	this.mapContext.getScale({
			 		success: (res) => {
			 			this.covers = [] 
			 			if (res.scale <= 14) {
			 				this.addMarkersWithoutLabels()
			 			} else {
			 				this.addMarkersWithLabels()
			 			}
			 		},
			 		fail: (error) => {
			 			// console.error('获取地图缩放级别失败：', error);
			 		},
			 	});
			 },
			 addMarkersWithoutLabels() {
			 	this.listmap.forEach((item) => {
			 		this.covers.push({
			 			id: parseFloat(item.storeId),
			 			latitude: item.lat,
			 			longitude: item.lng,
			 			width: 25,
			 			height: 30,
			 			iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
			 			borderColor:'#fff',
			 			borderRadius:5,
			 			bgColor: 'rgba(255, 255, 255, 0.7)'
			 		})
			 		// this.covers.push(shopCover)
			 	});
				this.listmaps.forEach((item) => {
					this.covers.push({
						id: parseFloat(item.storeId),
						latitude: item.lat,
						longitude: item.lng,
						width: 25,
						height: 30,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
						borderColor:'#fff',
						borderRadius:5,
						bgColor: 'rgba(255, 255, 255, 0.7)'
					})
					// this.covers.push(shopCover)
				});
			 },
			 addMarkersWithLabels() {
			 	this.listmap.forEach((item) => {
			 		this.covers.push({
			 			id: parseFloat(item.storeId),
			 			latitude: item.lat,
			 			longitude: item.lng,
			 			width: 25,
			 			height: 30,
			 			iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
			 			label: {
			 				content: item.name,
			 				anchorX: this.calculateAnchorX(item.name),
			 				fontWeight: 700,
			 				color: '#FFCC25',
			 				textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
			 				rotate: 20,
			 				borderColor:'#fff',
			 				borderRadius:5,
			 				bgColor: 'rgba(255, 255, 255, 0.7)'
			 			}
			 		})
			 		// this.covers.push(shopCover)
			 	});
				this.listmaps.forEach((item) => {
					this.covers.push({
						id: parseFloat(item.storeId),
						latitude: item.lat,
						longitude: item.lng,
						width: 25,
						height: 30,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
						label: {
							content: item.name,
							anchorX: this.calculateAnchorX(item.name),
							fontWeight: 700,
							color: '#FFCC25',
							textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
							rotate: 20,
							borderColor:'#fff',
							borderRadius:5,
							bgColor: 'rgba(255, 255, 255, 0.7)'
						}
					})
					// this.covers.push(shopCover)
				});
			 },
			 calculateAnchorX(name) {
			 	let chineseLength = 0;
			 	let englishLength = 0;
			 	for (let i = 0; i < name.length; i++) {
			 		const charCode = name.charCodeAt(i);
			 		if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
			 			chineseLength++;
			 		} else if (/[a-zA-Z]/.test(name[i])) {
			 			englishLength = englishLength + 0.3
			 		}
			 	}
			 	const totalLength = chineseLength + englishLength * 2
			 	return -totalLength * 7
			 },

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFDFD;
	}

	.page {
		// position: relative;
		width: 750rpx;
        .fxtongji{
			position: fixed;
			top: 15vh;
			right: 50rpx;
			z-index: 99;
			.one{
				display: flex;
				align-items: center;
				background-color: rgba(191, 191, 191, 0.4);
				padding: 4rpx 20rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				.wz{
					color: #3D3D3D;
					font-size: 32rpx;
					margin: 0 15rpx;
					font-weight: 600;
				}
				.shu{
					color: #FFC107;
					font-size: 32rpx;
				}
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.two{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				background-color: rgba(191, 191, 191, 0.4);
				padding: 4rpx 20rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				.wz{
					color: #3D3D3D;
					font-size: 32rpx;
					margin: 0 15rpx;
					font-weight: 600;
				}
				.shu{
					color: #FFC107;
					font-size: 32rpx;
				}
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.map {
			width: 750rpx;
			height: 100vh;
		}




	}
</style>