<style lang='scss' scoped>
	.kong{display:inline-block;width:30rpx;}
	.row-number{
		display: flex;
	}
	.projectMap{
		width: 100%;
		height: 100%;
		&-map{
			width: 100%;
			height: 100%;
			position: relative;

			&-total{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				padding-right: 0;
				width: 200rpx;
				border-radius: $uni-border-radius-lg;
				box-shadow: $box-shadow;
				.row{
					/* #ifndef APP-PLUS */
					display: flex;
					/* #endif */
					justify-content: space-between;
					padding-bottom: 40rpx;
					font-weight: bold;
				 font-family: -apple-system;
					&:last-child{
						padding-bottom: 0;
					}
				}
			}

			&-getPt{
				position: absolute;
				bottom: 260rpx;
				right: 20rpx;
				background-color: #FFFFFF;
				padding: 10rpx;
				border-radius: $uni-border-radius-lg;
				box-shadow: $box-shadow;
				.current-img{
					width: 63rpx;
					height: 63rpx;
				}
			}

			&-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"
			:latitude="mapCoordinate.latitude"
			:longitude="mapCoordinate.longitude"
			:markers="mapMarkers"
			:show-location="true"
			:scale="scale"
			@callouttap="onClickCallout">

			<!-- 汇总 -->
			<cover-view class="projectMap-map-total">
				<cover-view class="row">
					<cover-view>项目总数</cover-view>
					<cover-view class="row-number" style="color: #008CFF;">{{(projectList && projectList.length) || 0}}<cover-view class="kong"></cover-view></cover-view>

				</cover-view>
				<cover-view class="row">
					<cover-view>设备总数</cover-view>
					<cover-view class="row-number" style="color: #50CF89;">{{mapDeviceTotal}}<cover-view class="kong"></cover-view></cover-view>

				</cover-view>
				<cover-view class="row">
					<cover-view>在线总数</cover-view>
					<cover-view class="row-number" style="color: #50CF89;">{{mapOnlineTotal}}<cover-view class="kong"></cover-view></cover-view>

				</cover-view>
				<cover-view class="row">
					<cover-view>报警总数</cover-view>
					<cover-view class="row-number" style="color: #FF5E5A;">{{mapAlarmTotal}}<cover-view class="kong"></cover-view></cover-view>

				</cover-view>
				<cover-view class="row">
					<cover-view>今日报警数</cover-view>
					<cover-view class="row-number" style="color: #FF5E5A;">{{mapTodayAlarm}}<cover-view class="kong"></cover-view></cover-view>

				</cover-view>
			</cover-view>

			<!-- 当前点 -->
			<cover-view class="projectMap-map-getPt" @click="currentLocation">
				<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/curPosition-btn.png" class="current-img"></cover-image>
			</cover-view>

			<!-- 操作 -->
			<cover-view class="projectMap-map-option">
				<cover-view class="add" @click="scaleAddFn">
					<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/addScale.png" class="add-img"></cover-image>
				</cover-view>
				<cover-view class="cut" @click="scaleCutFn">
					<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/cutScale.png" class="cut-img"></cover-image>
				</cover-view>
			</cover-view>
		</map>
	</view>
</template>
<script>
	var _this;
	export default {
		data() {
			return {
				projectList:null,
				mapCoordinate:null,
				mapCtx: null,
				mapMarkers:[],
				mapAlarmTotal:0,
				mapDeviceTotal:0,
				mapTodayAlarm:0,
				mapOnlineTotal:0,
				includePoints: [],
				scale: 8
			}
		},
		onLoad(e) {
			_this = this;
			if(e && e.projectList){
				this.projectList = JSON.parse(e.projectList);
				this.mapCoordinate = {
					latitude:this.projectList[0].projectLat,
					longitude:this.projectList[0].projectLng
				}
				// console.log(this.projectList,"projectList");
				this.getMarkersListFn();
			} else{
				this.mapCoordinate = {
					latitude:26.028788,
					longitude:119.216327
				}
			}
		},
		onReady() {
			console.log('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: {
			getMarkersListFn(){
				this.projectList.forEach((item)=>{
					this.mapAlarmTotal += item.tenantIndexVo.alarmTotal;
					this.mapDeviceTotal += item.tenantIndexVo.deviceTotal;
					this.mapTodayAlarm += item.tenantIndexVo.todayAlarmTotal;
					this.mapOnlineTotal += item.tenantIndexVo.onlineTotal;
					this.$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},`;
						})
						this.mapMarkers.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"
							}
						})
						this.includePoints.push({
							latitude: item.projectLat,
							longitude: item.projectLng
						})

					});
				})
			},
			includePointFn(points){
				this.mapCtx.includePoints({
					padding: [10],
					points: points
				})
			},
			currentLocation() {
				//当前位置
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_this.mapCoordinate = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						_this.mapCtx.moveToLocation({ //将中心点移回当前位置
							latitude: res.latitude,
							longitude: res.longitude
						})
					}
				})
			},
			getCurScale() {
				return new Promise((resolve, reject) => {
					this.mapCtx.getScale({
						success(res) {
							resolve(res);
						},
						fail(err) {
							reject(err);
						}
					})
				})
			},
			scaleAddFn() {
				this.getCurScale().then(res => {
					let s = res.scale;
					_this.scale = Number(s) + 1 > 20? 20 : Number(s) + 1;
					console.log(_this.scale);
				})
			},
			scaleCutFn() {
				this.getCurScale().then(res => {
					let s = res.scale;
					_this.scale = Number(s) - 1 < 4? 4 : Number(s) - 1;
					console.log(_this.scale);
				})
			},
			onClickCallout(e) {
				console.log(e)
				const proId = e.detail.markerId;
				if(proId) {
					uni.navigateTo({
						url: `/pages/project/index?projectId=${proId}`
					})
				}
			}
		}
	}
</script>
