<style lang='scss' scoped>
	.projectMap{
		width: 750rpx;
		/* min-height: 1214rpx; */
	}
	/* .projectMap-map{
		position: relative;
	} */
	.projectMap-map-total{
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		background-color: #fff;
		padding: 30rpx;
		width: 300rpx;
		/* margin-left: -300rpx; */
		border-radius: $uni-border-radius-lg;
		box-shadow: $box-shadow;
	}
	.row{
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 20rpx;
		font-weight: bold;
	}
	.projectMap-map-getPt{
		position: absolute;
		bottom: 260rpx;
		right: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx;
		border-radius: $uni-border-radius-lg;
		box-shadow: $box-shadow;
		
	}
	.row-label{
		font-size: 26rpx;
	}
	.row-value-blue{
		color: #008CFF;
	}
	.row-value-green{
		color: #50CF89;
	}
	.row-value-red{
		color: #FF5E5A;
	}
	.pb0{
		padding-bottom: 0;
	}
	.current-img{
		width: 63rpx;
		height: 63rpx;
	}
	.projectMap-map-option{
		position: absolute;
		bottom: 80rpx;
		right: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx;
		border-radius: $uni-border-radius-lg;
		box-shadow: $box-shadow;
	}
	.add{
		border-bottom: 1rpx solid #ececec;
	}
	.add-img{
		width: 63rpx;
		height: 63rpx;
	}
	.cut-img{
		width: 63rpx;
		height: 63rpx;
	}

</style>
<template>
	<view class="projectMap">
		<map id="maps" class="projectMap-map" :style="{width: '100%',height: height}" :latitude="mapCoordinate.latitude" :longitude="mapCoordinate.longitude"
		:markers="mapMarkers" :scale="scale" @callouttap="onClickCallout">

		</map>
		<view class="projectMap-map-total">
			<view class="row">
				<text class="row-label">项目总数</text>
				<text class="row-value-blue" style="">{{(projectList && projectList.length) || 0}}</text>
			</view>
			<view class="row">
				<text class="row-label">设备总数</text>
				<text class="row-value-green">{{mapDeviceTotal}}</text>
			</view>
			<view class="row">
				<text class="row-label">在线总数</text>
				<text class="row-value-green">{{mapOnlineTotal}}</text>
			</view>
			<view class="row">
				<text class="row-label">报警总数</text>
				<text class="row-value-red">{{mapAlarmTotal}}</text>
			</view>
			<view class="row pb0">
				<text class="row-label">今日报警数</text>
				<text class="row-value-red">{{mapTodayAlarm}}</text>
			</view>
		</view>
		
		<!-- 当前点 -->
		<view class="projectMap-map-getPt" @click="currentLocation">
			<image src="http://static.drgyen.com/app/hc-app-power/images/project/curPosition-btn.png" class="current-img"></image>
		</view>
		
		<!-- 操作 -->
		<view class="projectMap-map-option">
			<view class="add" @click="scaleAddFn">
				<image src="http://static.drgyen.com/app/hc-app-power/images/project/addScale.png" class="add-img"></image>
			</view>
			<view class="cut" @click="scaleCutFn">
				<image src="http://static.drgyen.com/app/hc-app-power/images/project/cutScale.png" class="cut-img"></image>
			</view>
		</view>
		
	</view>
</template>
<script>
	import {post,get,DELETE,put} from "@/common/api/request.js"
	export default {
		data() {
			return {
				height:'1214rpx',
				projectList:null,
				mapCoordinate:null,
				mapMarkers:[],
				mapAlarmTotal:0,
				mapDeviceTotal:0,
				mapTodayAlarm:0,
				mapOnlineTotal:0,
				includePoints:[],
				scale: 8
			}
		},
		onLoad(e) {
			this.getSystemInfo();
			// 判断页面带来参数是否有项目
			if(e && e.projectList){
				this.projectList = JSON.parse(e.projectList);
				let list = {
					latitude:this.projectList[0].projectLat,
					longitude:this.projectList[0].projectLng
				}
				this.$set(this,'mapCoordinate',list)
				this.getMarkersListFn();
			} else{
				let list = {
					latitude:26.028788,
					longitude:119.216327
				}
				this.$set(this,'mapCoordinate',list)
			}
		},
		onReady() {
			if (!this.mapCtx) {
				this.mapCtx = uni.createMapContext("maps"); // map 组件绑定，操作对应的 map 组件
			}
			setTimeout(() => {
				this.includePointFn(this.includePoints);
				this.getCurScale().then(res => {
					let s = res.scale;
					_this.scale = Number(s);
				})
			}, 500)
		},
		methods: {
			// 设置地图高度
			getSystemInfo() {
				let _this = this
				uni.getSystemInfo({
					success: function(res) {
						_this.height = res.windowHeight + 'px'
					}
				})
			},
			getMarkersListFn(){
				let mapMarkerList = [];
				this.projectList.forEach((item)=>{
					this.mapAlarmTotal += item.tenantIndexVo.alarmTotal;
					this.mapDeviceTotal += item.tenantIndexVo.deviceTotal;
					this.mapTodayAlarm += item.tenantIndexVo.todayAlarmTotal;
					this.mapOnlineTotal += item.tenantIndexVo.onlineTotal;
					get("/app/alarm/table",{projectId:item.projectId,alarmDivide:"ALARM"}).then((res)=>{
						let processStateList = res.rows.filter((item)=>{
							return item.processState == 1;
						})
						let alarmStr = "";
						processStateList.forEach((item)=>{
							// alarmStr += `${item.spaceName}${item.deviceName}发生${item.typeName},`;
							alarmStr += `${item.typeName},`;
						})
						console.log(processStateList,"processStateList");
						mapMarkerList.push({
							id:item.projectId,
							latitude: item.projectLat,
							longitude: item.projectLng,
							iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location-blue.png',
							width:20,
							height:22,
							callout:{//终点的点击气泡
								content:`设备数：${item.tenantIndexVo.deviceTotal}`,
								borderRadius:6,
								bgColor:"#FFFFFF",
								padding: 8,
								display:"ALWAYS",
								textAlign:"center"
							}
						})
						console.log("mapMarkerList",mapMarkerList);
						this.$set(this,'mapMarkers',mapMarkerList)
						this.includePoints.push({
							latitude: item.projectLat,
							longitude: item.projectLng
						})
						this.includePointFn(this.includePoints);
					});
				})
			},
			onClickCallout(e){
				const proId = e.detail.markerId;
				if(proId) {
					uni.navigateTo({
						url: `/pages/project/index?projectId=${proId}`
					})
				}
			},
			// 缩放视野展示所有经纬度
			includePointFn(points){
				this.mapCtx.includePoints({
					padding: [10],
					points: points
				})
			},
			// 获取当前地图缩放大小
			getCurScale() {
				return new Promise((resolve, reject) => {
					this.mapCtx.getScale({
						success(res) {
							resolve(res);
						},
						fail(err) {
							reject(err);
						}
					})
				})
			},
			// 定位到当前位置
			currentLocation() {
				let _this = this;
				//当前位置
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_this.mapCoordinate = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						_this.mapCtx.moveToLocation({ //将中心点移回当前位置
							latitude: res.latitude,
							longitude: res.longitude
						})
					},
					fail(err){
						console.log("获取到当前位置失败",err)
					}
				})
			},
			// 放大地图
			scaleAddFn() {
				let _this = this;
				this.getCurScale().then(res => {
					let s = res.scale;
					_this.scale = Number(s) + 1 > 20? 20 : Number(s) + 1;
				})
			},
			// 缩小地图
			scaleCutFn() {
				let _this = this;
				this.getCurScale().then(res => {
					let s = res.scale;
					_this.scale = Number(s) - 1 < 4? 4 : Number(s) - 1;
				})
			},
		}
	}
</script>
