<template>
	<view class="page">
		<u-navbar :is-back="false" title="地图" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
			title-size='36' height='45' id="navbar">
		</u-navbar>
		<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
			:show-location='true' :markers="covers" @markertap="handleMarkerTap"></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>

		<!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 -->
		<view class="fctan" v-if="fxslag">
			<view class="fctop">
				<view class="fclt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
					<view class="fctit">{{fxobj.name == undefined ? '--' : fxobj.name}}</view>
					<!-- <view class="fcry">已认养</view> -->
				</view>
				<view class="fcrt" @click="fxslag = false">
					x
				</view>
			</view>
			<view class="fcbh">
				设备编号：{{fxobj.sn == undefined ? '--' : fxobj.sn}}
			</view>
			<view class="fcdz">
				<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fxobj.apiaryAddress == undefined ? '--' : fxobj.apiaryAddress}}
			</view>
			<view class="fctq">
				<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
				<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
			</view>
			<view class="fcfm">
				<view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
				</view>
				<view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
				</view>
			</view>
			<view class="fclist">
				<view class="fcli">
					<view class="">箱内温度：{{fxobj.innerTemperature == undefined ? '--' : fxobj.innerTemperature}}℃</view>
				</view>
				<view class="fcli">
					<view class="">箱内湿度：{{fxobj.innerHumidity == undefined ? '--' : fxobj.innerHumidity}}%</view>
				</view>
				<view class="fcli">
					<view class="">蜂箱重量：{{fxobj.totalYield == undefined ? '--' : (Number(fxobj.totalYield / 1000)).toFixed(2) + 'kg'}}</view>
				</view>
				<view class="fcli">
					<view class="">二氧化碳浓度：{{fxobj.innerCo2 == undefined ? '--' : fxobj.innerCo2}}ppm</view>
				</view>
				<view class="fcli">
					<view class="">进出量(日)：{{fxobj.ioCountDay == undefined ? '--' : fxobj.ioCountDay}}次</view>
				</view>
				<view class="fcli">
					<view class="">频率：{{fxobj.volume == undefined ? '--' : (fxobj.volume / 1000).toFixed(1) + 'KHz'}}</view>
				</view>
			</view>
			<view class="btncha" @click="btnpage(1)">
				立即查看
			</view>
		</view>
		
		<!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 -->
		<view class="fxtan" v-if="fcflag">
			<view class="fctop">
				<view class="fclt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
					<view class="fctit">{{fcobj.name == undefined ? '--' : fcobj.name}}</view>
					<!-- <view class="fcry">已认养</view> -->
				</view>
				<view class="fcrt" @click="fcflag = false">
					x
				</view>
			</view>
			<view class="fcdz">
				<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fcobj.address == undefined ? '--' : fcobj.address}}
			</view>
			<view class="fctq">
				<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
				<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
			</view>
			<view class="fcfm">
				<view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
				</view>
				<view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
				</view>
				<view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image> {{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱
				</view>
			</view>
			<view class="fclist">
				<view class="fcli">
					<view class="">当前温度：{{nowtqobj.temp == undefined ? '--' : nowtqobj.temp}}℃</view>
				</view>
				<view class="fcli">
					<view class="">当前湿度：{{nowtqobj.humidity == undefined ? '--' : nowtqobj.humidity}}%</view>
				</view>
				<view class="fcli">
					<view class="">总蜂箱数：{{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱</view>
				</view>
			</view>
			<view class="btncha" @click="btnpage(2)">
				立即查看
			</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: 12,
				markers: [],
				jinweidu: '',
				covers: [],
				mapContext: null,
				mapScaleInterval: null,
				listmap: [],
				listmaps: [],
				id:'',
				fxslag:false,
				fcflag:false,
				fxobj:{},
				fcobj:{},
				longitudetq:'',
				latitudetq:'',
				daily:[],
				listfz:'',
				listmy:'',
				nowtqobj:{}
			}
		},
		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: {
			// 立即查看蜂箱或者蜂场详情
			btnpage(num){
				if(num == 1){
					uni.navigateTo({
						url:'/page_Beehive/Beehive_detail?beehiveId=' + this.fxobj.beehiveId
					})
				}else{
					uni.navigateTo({
						url: '/pages/Apiary/Apiary_detail?id=' + this.fcobj.apiaryId
					})
				}
			}, 
			// 请求蜂种
			getfz() {
				this.$u.get(`/common/getDictByType?dictType=apiary_bee_type`).then(res => {
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].dictValue == this.fcobj.beeType) {
								this.listfz = res.data[i].dictLabel
							}
						}
					}
				})
			},
			// 请求蜜源
			getmy() {
				this.$u.get(`/common/getDictByType?dictType=apiary_honey_type`).then(res => {
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].dictValue == this.fcobj.honeyType) {
								this.listmy = res.data[i].dictLabel
							}
						}
					}
				})
			},
			
			// 请求天气预告
			gettq(){
				this.$u.get(`weather/7d?location=${this.longitudetq},${this.latitudetq}`).then(res => {
					if(res.code == 200){
						this.daily = res.data.daily
					}
				})
			},
			// 请求当前天气
			gettqs(){
				this.$u.get(`weather/now?location=${this.longitudetq},${this.latitudetq}`).then(res => {
					if(res.code == 200){
						this.nowtqobj = res.data.now
					}
				})
			},
			// 点击地图图标
			handleMarkerTap(e) {
				let markerId = e.markerId.toString()
				let firstDigit = markerId.charAt(0)
				if (firstDigit === '1') {
					// 蜂场
					this.fxslag = false
					this.fcflag = true
					markerId = markerId.substring(1)
					this.id = markerId
                    this.$u.get(`/farm/apiary/${this.id}`).then(res => {
						if(res.code == 200){
							this.fcobj = res.data
							this.latitudetq = res.data.lat
							this.longitudetq = res.data.lng
							this.gettq()
							this.getfz()
							this.getmy()
							this.gettqs()
						}
					})					
				} else if (firstDigit === '2') {
					// 蜂箱
					this.fcflag = false
					this.fxslag = true
					markerId = markerId.substring(1)
					this.id = markerId
					this.$u.get(`/app/beehive/${this.id}`).then(res => {
						if(res.code == 200){
							this.fxobj = res.data
							// 请求蜂箱之后请求蜂箱所属蜂场 计算蜂种和蜜源
							this.$u.get(`/farm/apiary/${this.fxobj.apiaryId}`).then(res => {
								if(res.code == 200){
									this.fcobj = res.data
									this.getfz()
									this.getmy()
								}
							})
							this.latitudetq = res.data.lat
							this.longitudetq = res.data.lng
							this.gettq()
							this.gettqs()
						}
					})	
				}
			},
			// 地图回正
			async setMapScale(e, val) {
				let mapContext = uni.createMapContext('map', this);
				let setScale = () => {
					return new Promise((resolve, reject) => {
						mapContext.getScale({
							success: r => {
								this.mapScale = 15
								resolve()
							}
						})
					})
				};
				await setScale();
				mapContext.moveToLocation({
					success: (res) => {
						const timer = setTimeout(() => {
							this.mapScale = 15
							clearTimeout(timer);
						}, 500);
					},
				})
			},
			// 
			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/listAll').then(res => {
									if (res.code == 200) {
										// 蜂箱
										this.listmaps = res.data
										res.data.forEach(item => {
											let id = "2" + item.beehiveId //蜂箱id前加2 以此进行判断
											this.covers.push({
												id: parseFloat(id),
												latitude: item.lat,
												longitude: item.lng,
												width: 33,
												height: 33,
												iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
												label: {
													type: 2,
													content: item.name,
													anchorX: this.calculateAnchorX(item.name),
													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,
												}
											})
										})
									}
								})
					},
					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.$u.get('/farm/apiary/listAll').then(res => {
									if (res.code == 200) {
										// 蜂场
										this.listmap = res.data
										res.data.forEach(item => {
											let id = '1' + item.apiaryId //蜂箱id前加1 以此进行判断
											this.covers.push({
												id: parseFloat(id),
												latitude: item.lat,
												longitude: item.lng,
												width: 25,
												height: 30,
												iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
												label: {
													type: 1,
													content: item.name,
													anchorX: this.calculateAnchorX(item.name),
													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,
												}
											})
										})
									}
								})
					},
					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);
					},
				})
			},
			// 地图缩放层级小于14则调用
			addMarkersWithoutLabels() {
				this.listmap.forEach((item) => {
					let id = '1' + item.apiaryId
					this.covers.push({
						id: parseFloat(id),
						latitude: item.lat,
						longitude: item.lng,
						width: 25,
						height: 30,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
						borderColor: '#fff',
						borderRadius: 5,
						label: {
							type: 1,
						}
					})
				});
				this.listmaps.forEach((item) => {
					let id = "2" + item.beehiveId
					this.covers.push({
						id: parseFloat(id),
						latitude: item.lat,
						longitude: item.lng,
						width: 30,
						height: 33,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
						borderColor: '#fff',
						borderRadius: 5,
						label: {
							type: 2,
						}
					})
				})
			},
			// 地图缩放层级大于14则调用
			addMarkersWithLabels() {
				this.listmap.forEach((item) => {
					let id = '1' + item.apiaryId
					this.covers.push({
						id: parseFloat(id),
						latitude: item.lat,
						longitude: item.lng,
						width: 25,
						height: 30,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
						label: {
							type: 1,
							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,
						}
					})
				})
				this.listmaps.forEach((item) => {
					let id = "2" + item.beehiveId
					this.covers.push({
						id: parseFloat(id),
						latitude: item.lat,
						longitude: item.lng,
						width: 30,
						height: 33,
						iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
						label: {
							type: 2,
							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,
						}
					})
				})
			},
			// map进行文字居中
			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 {
		width: 750rpx;
		// 蜂场弹窗
		.fxtan {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 670rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			z-index: 99;
			padding: 30rpx 52rpx;
			box-sizing: border-box;
			.btncha{
				width: 658rpx;
				height: 88rpx;
				background: #FFCC25;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 26rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		    .fclist{
				 display: flex;  
				 flex-wrap: wrap;  
				 margin-top: 28rpx;
				 justify-content: space-between;
				 .fcli{
					  margin: 10rpx;  
					  // flex: 1 0 calc(50% - 20rpx);
				 }
			}
			.fcfm {
				display: flex;
				align-items: center;
				margin-top: 28rpx;
				justify-content: space-between;
				view {
					width: 182rpx;
					height: 60rpx;
					background: rgba(61,61,61,0.3);
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FAFDFD;
					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 4rpx;
					}
				}
			}
			.fctq {
				margin-top: 20rpx;
				font-size: 28rpx;
				display: flex;
				color: #3D3D3D;
				view {
					margin-right: 40rpx;
				}
			}
			.fcdz {
				font-size: 32rpx;
				color: #808080;
				margin-top: 20rpx;
				text {
					margin-right: 10rpx;
				}
			}
			.fcbh {
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.fctop {
				display: flex;
				justify-content: space-between;
				.fclt {
					display: flex;
					align-items: center;
					.fctit {
						font-weight: 600;
						font-size: 40rpx;
						color: #3D3D3D;
						margin-right: 32rpx;
					}
					.fcry {
						width: 90rpx;
						height: 42rpx;
						background: #FFC107;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						line-height: 42rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
					}
					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 28rpx;
					}
				}
				.fcrt {
					font-size: 64rpx;
					padding-bottom: 10rpx;
					box-sizing: border-box;
				}
			}
		}
		// 蜂箱弹窗
		.fctan {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 730rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			z-index: 99;
			padding: 30rpx 52rpx;
			box-sizing: border-box;
			.btncha{
				width: 658rpx;
				height: 88rpx;
				background: #FFCC25;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 46rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}
            .fclist{
				 display: flex;  
				 flex-wrap: wrap;  
				 margin-top: 28rpx;
				 .fcli{
					  margin: 10rpx;  
					  flex: 1 0 calc(50% - 20rpx);
				 }
			}
			.fcfm {
				display: flex;
				align-items: center;
				margin-top: 28rpx;
				view {
					width: 182rpx;
					height: 60rpx;
					margin-right: 50rpx;
					background: rgba(61,61,61,0.3);
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FAFDFD;
					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 4rpx;
					}
				}
			}
			.fctq {
				margin-top: 20rpx;
				font-size: 28rpx;
				display: flex;
				color: #3D3D3D;
				view {
					margin-right: 40rpx;
				}
			}
			.fcdz {
				font-size: 32rpx;
				color: #808080;
				margin-top: 20rpx;
				text {
					margin-right: 10rpx;
				}
			}
			.fcbh {
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.fctop {
				display: flex;
				justify-content: space-between;
				.fclt {
					display: flex;
					align-items: center;
					.fctit {
						font-weight: 600;
						font-size: 40rpx;
						color: #3D3D3D;
						margin-right: 32rpx;
					}
					.fcry {
						width: 90rpx;
						height: 42rpx;
						background: #FFC107;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						line-height: 42rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
					}
					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 28rpx;
					}
				}
				.fcrt {
					font-size: 64rpx;
					padding-bottom: 10rpx;
					box-sizing: border-box;
				}
			}
		}
		.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>