<template>
	<div class="map_box">
		<baidu-map class="bm-view" @zoomend='zoomendChange' @ready="init" :min-zoom="5" :max-zoom="18">
			<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
			<bm-copyright anchor="BMAP_ANCHOR_TOP_RIGHT" :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>添利节能科技有限公司</a>'}]">
			</bm-copyright>
			<bm-marker class="bm-marker" v-for="(item, index) in companyList" :key="index" :position="{
					lng: item.longtitude,
					lat: item.lattitude
				}"
			 @click="infoWindowOpen(item)">
				<bm-label v-if='zoomActive>=15' :content="item.name" :labelStyle="item.style" :offset="item.textType" />
			 <my-overlay
						 :position="{lng: item.longtitude, lat: item.lattitude-0.003}"
						 :item="item"
						 v-if='item.alertShow == true'
						 >
					 </my-overlay>
			</bm-marker>

		</baidu-map>
		<div class="sjkb_wrap">
			<div class="sjkb_item">
				<el-image class="sjkb_img" :src="require('@/assets/img/info003.png')" fit="cover"></el-image>
				<div class="shebeitji_box">
					<span class="sjkb_title">经济效益（万元）</span>
					<div class="sjkb_content">
						<span class="sjkb_now">{{ parseFloat(machineData.machine_save_money/10000).toFixed(2) || '0' }}</span>
						<!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
						<span class="sjkb_upNum">0</span> -->
					</div>
				</div>
			</div>
			<div class="sjkb_item">
				<el-image class="sjkb_img" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
				<div class="shebeitji_box">
					<span class="sjkb_title">用水总量(万吨)</span>
					<div class="sjkb_content">
						<span class="sjkb_now">{{ parseFloat(machineData.machine_use_water/10000).toFixed(2) || '0' }}</span>
						<!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
						<span class="sjkb_upNum">{{ machineData.machine_use_time_max }}</span> -->
					</div>
				</div>
			</div>
			<div class="sjkb_item">
				<el-image class="sjkb_img" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
				<div class="shebeitji_box">
					<span class="sjkb_title">节水总量(万吨)</span>
					<div class="sjkb_content">
						<span class="sjkb_now">{{ parseFloat(machineData.machine_save_water/10000).toFixed(2) || '0' }}</span>
						<!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
						<span class="sjkb_upNum">{{ machineData.machine_use_time_max }}</span> -->
					</div>
				</div>
			</div>
			<div class="sjkb_item">
				<el-image class="sjkb_img" :src="require('@/assets/img/info001.png')" fit="cover"></el-image>
				<div class="shebeitji_box">
					<span class="sjkb_title">合作企业(家)</span>
					<div class="sjkb_content">
						<span class="sjkb_now">{{ machineData.machine_company_num || '0' }}</span>
						<!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
						<span class="sjkb_upNum">0</span> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyOverlay from '../components/MyOverlay.vue'
	import {
		companies,
		machine
	} from '../api/index.js';
	export default {
		name: 'Shuju',
		components: {
			MyOverlay
		},
		data() {
			return {
				// 公司列表
				companyList: [],
				// 默认层级
				zoomActive: 9,
				machineData: {
					machine_num: 0, //设备数量 <number>
					machine_use_time_max: 0, //运行时间 <number>
					machine_company_num: 0, //企业数量 <number>
					machine_use_water: 0, //用水量 <string>
					machine_save_water: 0, //节水量 <string>
					machine_save_money: 0 //省了多少钱 <string>
				},
				machineDataModal: {
					machine_num: 0, //设备数量 <number>
					machine_use_time_max: 0, //运行时间 <number>
					machine_company_num: 0, //企业数量 <number>
					machine_use_water: 0, //用水量 <string>
					machine_save_water: 0, //节水量 <string>
					machine_save_money: 0, //省了多少钱 <string>
					machine_name: '',
				},
				infoWindow: {
					show: false
				},
				map: '', // 地图
				itemData: {}, // 选中数据
				machineid: '', // 选中id
				mapZoomChangeStatus: false, //判断是否已经触发过显示事件
				position: {},
			}
		},
		created() {
			this.loadData();
		},
		methods: {
			loadData() {
				companies().then(e => {
					this.companyList = e.data.map(e => {
						// 初始化弹窗显示隐藏
						e.alertShow = false;
						// e.lattitude = 28.243198;
						// e.longtitude = 121.279239;
						// 设置文字样式
						e.textType = {
							width: -((e.name.length / 2) * 10),
							height: 30
						};
						e.data = {};
						e.style = {
							background: 'none',
							color: '#333333',
							fontSize: '10px',
							border: 'none'
						};
						return e;
					});
					this.setCompanyData();
				})

				machine({}, 0).then(res => {
					this.machineData = res.data;
				})
			},
			setCompanyData() {
				let obj = this;
				console.log(this.companyList, 55);
				for (let i = 0; i < this.companyList.length; i++) {
					let data = this.companyList[i];
					setTimeout(() => {
						obj.getData(data.id).then((e) => {
							data.data = e.data;
							data.data.machine_name = data.name
						}).catch(e => {
							console.log(e);
						})
					}, 100 * i)
				}
			},
			/* 设置弹窗 */
			zoomendChange(type) {
				const obj = this;
				obj.zoomActive = type.target.getZoom();
				if (obj.zoomActive >= 15) {
					for(let i=0; i< obj.companyList.length; i++) {
						obj.companyList[i].alertShow = true;
					}
				}
				if (obj.zoomActive <= 10) {
					for(let i=0; i< obj.companyList.length; i++) {
						obj.companyList[i].alertShow = false;
					}
				}
			},
			getData(machineid) {
				return new Promise((ok, err) => {
					machine({}, machineid).then(e => {
							ok(e);
						})
						.catch(e => {
							err(e);
							console.log(e);
						});
				})
			},
			infoWindowClose(item) {
				console.log(item);
				item.alertShow = false
			},
			// 显示数据
			infoWindowOpen(item) {
				item.alertShow = true
			},
			init({
				BMap,
				map
			}) {
				this.map = map;
				// 初始化地图,设置中心点坐标
				var point = new BMap.Point(121.434817, 29.653849);
				map.centerAndZoom(point, this.zoomActive);
				// 添加鼠标滚动缩放
				map.enableScrollWheelZoom();
			},
			//切换事件
			// onAction(start=true) {
			// 	console.log('触发点击');
			// 	this.autoPlay = false;
			// 	clearTimeout(this.outPlay);
			// 	if(start){
			// 		this.outPlay = setTimeout(e => {
			// 			this.autoPlay = true;
			// 		}, this.setOutTime);
			// 	}
			// },
		}
	}
</script>

<style lang="scss">
	.map_box {
		width: 100%;
		height: 100vh;
		position: relative;

		.bm-view {
			width: 100%;
			height: 100vh;
		}

		.sjkb_wrap {
			position: absolute;
			top: 20px;
			left: 30px;
			display: flex;
			align-items: center;

			.sjkb_item {
				margin-right: 15px;
				background: #ffffff;
				display: flex;
				align-items: center;
				.sjkb_img {
					width: 100px;
					height: 100px;
				}
				// &:last-of-type {
				// 	margin-right: 0;
				// 	padding-right: 20px;
				// }
				// align-items: center;
				.shebeitji_box {
					margin-left: 5px;
					padding-right: 20px;
					// padding-top: 8px;
					// border-right: 1px solid #f0f0f0;
					text-align: left;
					.sjkb_title {
						font-size: 18px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #101010;
					}
					.sjkb_content {
						margin-top: 10px;
						text-align: left;
						.sjkb_now {
							font-size: 20px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #101010;
						}
						.sjkb_upNum {
							margin-left: 3px;
							font-size: 20px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #101010;
						}
					}
				}
				
				.sbtj_tongji {
					padding: 0 70px 10px 20px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.sbtj_shuju {
						display: flex;
						align-items: center;
						font-size: 18px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #101010;

						.sbtj_dian {
							margin-right: 3px;
							width: 10px;
							height: 10px;
							border-radius: 50%;
						}

						.lanse {
							background: #1890ff;
						}

						.hongse {
							background: #f25657;
						}

						.huise {
							background: #eeeeee;
						}
					}
				}
			}
		}
	}

	
</style>
