<template>
	<div class="zy-template">
		<div class="zy-main-title title">设备列表-路牌</div>
		<div class="zy-module search">
			<el-form ref="form" :model="form" label-width="60px">
				<el-form-item label="设备码:" class="zy-search-form-item">
					<el-select v-model="form.openNum" filterable clearable placeholder=" " size="mini">
						<el-option v-for="item in openNumList" :key="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div id="map" class="map">
			<div class="map__panel" v-if="device != null">
				<p>设 备 号: {{device.openNum}}</p>
				<p>设 备 组: {{device.groupId}}</p>
				<p>状 态: {{device.status==1?"在线":"离线"}}</p>
				<p>电 量: {{device.battery}}</p>
				<p>温 度: {{device.temp}}</p>
				<p>信号强度: {{device.s4g}}</p>
				<p>唤醒间隔(小时): {{device.wakeInt}}</p>
				<p>阈值: {{device.thresh}}</p>
				<p>X: {{device.x}}</p>
				<p>Y: {{device.y}}</p>
				<p>Z: {{device.z}}</p>
				<p>angleX: {{device.anglex}}</p>
				<p>angleY: {{device.angley}}</p>
				<p>angleZ: {{device.anglez}}</p>
				<p>经 度: {{device.lon}}</p>
				<p>纬 度: {{device.lat}}</p>
				<p>定位模式: {{device.mode==1?"GPS":"基站"}}</p>
				<p>上传时间: {{device.updateTime}}</p>
				<p>位置: {{device.site}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				map: null, //地图对象
				markers: [], //地图中已经有的标记
				icon: '', //地图中的图标
				form: {
					openNum: ""
				}, //搜索选择的设备号
				openNumList: [], // 选择框匹配的设备号
				deviceList: [], //全部的设备集合
				device: null, //选中的设备对象
			}
		},
		activated() {
			this.initMap();
			this.getDeviceList();
		},
		methods: {

			/**
			 * 初始化地图
			 */
			initMap: function() {
				const option = {
					zoom: 6
				};
				this.map = new AMap.Map('map', option);
				//默认图标样式
				this.icon = new AMap.Icon({
					image: "/static/img/point.png",
					size: [40, 40],
					imageSize: [40, 40]
				})
			},

			/**
			 * 提交搜索
			 */
			submit: function() {
				if (this.form.openNum === "") return;
				this.deviceList.forEach(item => {
					if (this.form.openNum === item.openNum) {
						if (item.latGcj != null && item.lonGcj != null) {
							this.map.setZoomAndCenter(16, [item.lonGcj, item.latGcj]);
						} else {
							this.$message.warning("该设备暂无定位信息")
						}
						this.device = item;
					}
				})
			},

			/**
			 * 向地图中添加标记
			 */
			addMarkers: function(devices) {
				const that = this;
				const markers = [];
				//清空原来的标记点
				if (this.markers != null && this.markers.length !== 0) {
					this.map.remove(this.markers);
				}
				devices.forEach(item => {
					if (item.latGcj != null && item.lonGcj != null) {
						markers.push(that.buildMarker(item))
					}
				});
				this.map.add(markers);
				this.markers = markers;
			},

			/**
			 * 构建 地图标记物
			 */
			buildMarker: function(item) {
				const that = this;
				return new AMap.Marker({
					position: [item.lonGcj, item.latGcj],
					icon: this.icon, // 添加 Icon 图标 URL
					title: item.deviceId,
					animation: "AMAP_ANIMATION_DROP"
				}).on("click", function() {
					that.map.setZoomAndCenter(16, [item.lonGcj, item.latGcj]);
					that.device = item;
				})
			},

			/**
			 * 获取设备列表
			 */
			getDeviceList: function() {
				this.$http.Get(this.$global.lp.listAll, {}).then(res => {
					this.deviceList = res.data;
					console.log(res.data);
					this.openNumList = res.data.map(item => {
						return item.openNum;
					});
					this.addMarkers(this.deviceList);
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.zy-template {
		position: relative;
		box-sizing: border-box;
		padding-top: 150px;
		height: 100%;

		.title {
			position: absolute;
			top: 0px;
		}

		.search {
			position: absolute;
			top: 40px;
		}

		.map {
			width: 100%;
			height: 100%;
			position: relative;

			&__panel {
				color: white;
				box-sizing: border-box;
				z-index: 9;
				position: absolute;
				right: 10px;
				top: 10px;
				width: 220px;
				padding: 10px;
				border-radius: 5px;
				background: rgba(0, 0, 0, .5);

				& p {
					font-size: 14px;
					line-height: 20px;
					margin: 0 0 3px;
				}
			}
		}
	}
</style>
