<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
    <div class="popup-box3">
			
    	<div class="map-info">
				<div class="map_close">
					<el-image class="close_img" @click="PopClose()" :src="require('@/assets/img/close.png')" fit="cover"></el-image>
				</div>
    		<div class="map2">
    			<div class="map-icon">
    				<el-image class="" :src="require('@/assets/img/info001.png')" fit="cover"></el-image>
    			</div>
    			<div class="map-2">
    				<div class="info2">企业名称</div>
    				<div class="num2">
    					<span class="tit1">{{ item.data.machine_name }}</span>
    				</div>
    			</div>
    		</div>
    		<div class="map2">
    			<div class="map-icon">
    				<el-image class="" :src="require('@/assets/img/info004.png')" fit="cover"></el-image>
    			</div>
    			<div class="map-2">
    				<div class="info2">设备统计</div>
    				<div class="num2">
    					<span class="tit1">{{ item.data.machine_company_num }}</span>
    				</div>
    			</div>
    		</div>
			<div class="map2">
				<div class="map-icon">
					<el-image class="" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
				</div>
				<div class="map-2">
					<div class="info2">节水改造日期</div>
					<div class="num2">
						<span class="tit1">{{ item.data.machine_setup_time| trimTime }}</span>
					</div>
				</div>
			</div>
    		<div class="map2">
    			<div class="map-icon">
    				<el-image class="" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
    			</div>
    			<div class="map-2">
    				<div class="info2">改造前流量(吨/小时)</div>
    				<div class="num2">
    					<span class="tit1">{{item.data.machine_use_before_hour }}</span>
    				</div>
    			</div>
    		</div>
    		<div class="map2">
    			<div class="map-icon">
    				<el-image class="" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
    			</div>
    			<div class="map-2">
    				<div class="info2">改造后流量(吨/小时)</div>
    				<div class="num2">
    					<span class="tit1">{{ item.data.machine_use_now_hour  }}</span>
    				</div>
    			</div>
    		</div>
    		
    	</div>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['item', 'position', 'active'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    },
  },
  filters: {
  	trimTime: function(value) {
  		return value.split(' ')[0];
  	}
  },
  methods: {
    handleClick () {
      global.alert('Well done.')
    },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
		PopClose() {
			this.item.alertShow = false
		}
  }
}
</script>

<style lang="scss">
.sample {
  width: 250px;
  height: 300px;
  line-height: 40px;
  // background: rgba(0,0,0,0.5);
  overflow: hidden;
  // box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  // background: rgba(0,0,0,0.75);
  color: #fff;
}
.popup-box3 {
		border-radius: 4px;
		.map-info {
			border-radius: 4px;
			position: absolute;
			background-color: #ffffff;
			top: 10px;
			left: 7px;
			padding: 10px;
			.map_close {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				// padding: 8px 6px 0 0;
				.close_img {
					width: 18px;
					height: 18px;
				}
			}
			.map1 {
				padding: 4px 4px;
				// width: 100%;
				// height: 78rpx;
				border-radius: 5px;
				background-color: #ffffff;
				display: flex;
				align-items: center;

				.map1-left {
					// width: 50%;
					padding-right: 9px;
					border-right: 1px solid #f0f0f0;
					display: flex;

					.map-icon {
						width: 44px;
						height: 44px;

						image {
							width: 44px;
							height: 44px;
						}
					}

					.map-2 {
						display: flex;
						flex-direction: column;

						.info2 {
							color: #101010;
							font-size: 16px;
						}

						.num2 {
							display: flex;
							align-items: center;

							image {
								margin: 0 3px;
								width: 4px;
								height: 5px;
							}

							.tit2 {
								font-size: 2px;
							}
						}
					}
				}

				.map1-right {
					padding: 0 16rpx;
					// width: 50%;
					font-size: 8rpx;

					.warn1 {
						display: flex;
						align-items: center;

						.circle {
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							margin-right: 6px;
							background-color: #448ef7;
						}

						.circle1 {
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							margin-right: 6px;
							background-color: #d9d2be;
						}

						.circle2 {
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							margin-right: 6px;
							background-color: #eeeeee;
						}
					}
				}
			}

			.map2 {
				padding: 4px 4px;
				// padding-top: 5px;
				// width: 260rpx;
				// border-radius: 4px;
				// background-color: #fff;
				display: flex;
				align-items: center;

				.map-icon {
					width: 44px;
					height: 44px;

					image {
						width: 44px;
						height: 44px;
					}
				}

				.map-2 {
					text-align: left;
					display: flex;
					flex-direction: column;

					.info2 {
						color: #101010;
						font-size: 16px;
						line-height: 1;
					}

					.num2 {
						display: flex;
						align-items: center;
						line-height: 1;
						color: #101010;
						margin-top: 2px;
						image {
							margin: 0 6rpx;
							width: 8rpx;
							height: 11rpx;
						}

						.tit2 {
							font-size: 4rpx;
						}
					}
				}
			}
		}
	}
</style>