<template>
	<div class="app-container" style="margin: 0; position: relative;">
		<div id="container">

		</div>
		<div id="search-box">
			<el-input v-model="keyWord" placeholder="请输入电站编码、用户姓名进行搜索" clearable></el-input>
			<el-button icon="el-icon-search" @click="getMapDistribution()"></el-button>
		</div>
		<div class="top-data">
			<h3>运行电站：{{ total }}</h3>
			<p style="color: red;font-weight: bolder;">故障：{{ totalError }}</p>
		</div>
		<!-- <div style="padding-bottom: 10px;">
			<div class="marker-content">
				<div class="txt">XM1002039-009<span>王贤</span></div>
				<ul>
					<li>
						<div>装机功率(KW)</div>
						<big>39</big>
					</li>
					<li>
						<div>日发电量(度)</div>
						<big>39</big>
					</li>
					<li>
						<div>实时功率(KW)</div>
						<big>39</big>
					</li>
					<li>
						<div>累计电量(万度)</div>
						<big>39</big>
					</li>
				</ul>
			</div>
		</div> -->
	</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
import func from '@/utils/func';
import { getMapDistribute } from "@/api/nh/powerStation";
export default {
	name: "MapSpread",
	data() {
		return {
			map: null,//初始化 map 对象
			keyWord: '',
			markers: [],//marker点
			total: 0,
			totalError: 0
		};
	},
	created() {
		//DOM初始化完成进行地图初始化
		this.initMap();
		console.log("江苏省坐标：")
		console.log(func.getProvicePosition("江苏省"))
		console.log(func.getProvicePosition("江苏"))
	},
	methods: {
		initMap() {
			AMapLoader.load({
				key: "727b25e7366ab5015225754e8ee00fef", //此处填入我们注册账号后获取的Key
				version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("container", {
					zoom: 5,
				});
				this.initMapDistribution();
			}).catch(e => {
			})
		},
		//获取地标数据
		initMapDistribution() {
			const that = this;
			getMapDistribute().then(res=>{
				res.data.data.forEach(item => {
					this.addTxtMarker(item);
					this.total += item.total;
					this.totalError += item.error;
				});
			})
		},
		addTxtMarker(item){
			 let pos = func.getProvicePosition(item.province);
			 let point = new AMap.LngLat(pos.longitude, pos.latitude)
			console.log("point:"+point)
			var text = new AMap.Text({
				title:item.province,
				text:'<b>'+item.province+'：'+item.total+'<b/><p style="color:red;">故障：'+item.error+'<p/>',
				anchor:'center', // 设置文本标记锚点
				// draggable:true,
				cursor:'pointer',
				// angle:10,
				style:{
					'padding': '10px 0 0 10px',
					'border-radius': '5px',
					// 'background-color': 'white',
					'width': '100px',
					'border-width': 1,
					'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
					'text-align': 'left',
					'font-size': '12px',
					'color': 'blue'
				},
				position: point
			});
			text.on('click', markerClick);
			function markerClick(e) {
				alert(e.target._originOpts.title);
			}
			text.setMap(this.map);
		},
		addMarkWindew(itm) {
			const that = this;
			var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(10, -10) });

			console.log(itm)
			if (itm.longitude && itm.latitude) {
				var marker = new AMap.Marker({
					position: [itm.longitude, itm.latitude],
					map: that.map
				});

				marker.content = that.createContent(itm);
				
				
				marker.on('click', markerClick);
				// marker.emit('click', {target: marker});
				// that.markers.push(marker)
				that.map.add(marker); 
			}

			function markerClick(e) {
				infoWindow.setContent(e.target.content);
				infoWindow.open(that.map, e.target.getPosition());
			}

		},
		createContent(item) {  //信息窗体内容
			console.log("----createContent----")
			let s = [];
			s.push("<b>"+item.privince+"：" + item.totalCount+"</b>");
			s.push("<p style='color:red;'>故障：" + item.faultCCount+"</p>");
			let result = s.join("<br>");
			console.log("result:"+result)
			return result;
		}

	}
};
</script>

<style rel="stylesheet/scss" lang="scss">
#container {
	width: 100%;
	height: calc(100vh - 84px);
}

.top-data {
	position: absolute;
	right: 30px;
	top: 30px;
}

#search-box {
	position: absolute;
	left: 30px;
	top: 30px;
	width: 530px;
	height: 50px;
	background-color: #ffffff;
	box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;

	.el-input__inner {
		border: 0;
		font-size: 14px;
	}

	.el-button {
		width: 70px;
		height: 50px;
		background-color: #117fbc;
		border-radius: 0;
		border: 0;
		font-size: 24px;
		color: #fff;
	}
}

.marker-content {
	width: 390px;

	.txt {
		font-size: 16px;
		padding: 5px 10px 5px;
		font-weight: 600;

		span {
			margin-left: 16px;
		}
	}

	ul {
		display: flex;
		flex-wrap: wrap;

		li {
			width: calc(50% - 10px);
			text-align: center;
			background-color: #f5f6fa;
			border-radius: 3px;
			margin: 5px;
			padding: 5px 5px;
			font-size: 14px;
			color: #555;
			list-style: none;
			

			big {
				font-size: 18px;
				margin-top: 10px;
				display: inline-block;
				color: #222;
			}
		}
	}
}
</style>
