<template>
	<div id="mainPage">
		<div id="map"></div>
		<div class="menuBox">
			<a-menu v-model:selectedKeys="current" mode="horizontal">
				<a-menu-item v-for="item in menuList" :key="item.key" @click="getPoint(item.key)"
					>{{ item.title }}
				</a-menu-item>
			</a-menu>
		</div>
	</div>
</template>
<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { yjbzPopup } from '@/utils/mapPopup.js'
	import api from '@/api/emergencySupport/emergencySupportCenter.js'
	onMounted(() => {
		initMap() // 初始化地图
		getPoint('0') //加载全部信息
	})
	/**
	 * 菜单功能模块
	 */
	const current = ref(['0'])
	const menuList = [
		{
			key: '0',
			title: '全部企业'
		},
		{
			key: '1',
			title: '应急网点'
		},
		{
			key: '2',
			title: '应急加工企业'
		},
		{
			key: '3',
			title: '应急配送企业'
		},
		{
			key: '4',
			title: '应急仓储企业'
		}
	]

	/**
	 *地图功能模块
	 */
	let map
	var markers = []
	const uppLeft = [39.14515901971413, 89.43171594317553] //左上角
	const lowRight = [30.95947265625, 103.4307861328125] // 右下角
	const host = 'http://59.220.179.103/iserver/services/'
	const baseMap = host + 'map-arcgis-3/rest/maps/Vec_Pub_QH_WMTS_L01_L20' // 地图层
	const dateMap = host + 'map-arcgis/rest/maps/VecLab_Pub_QH_WMTS_L01_L20' // 数据层
	const mapOptions = {
		zoom: 5.5, // 地图当前缩放比例
		// minZoom: 5.5, // 地图最小缩放比例
		maxZoom: 18, // 地图最大缩放比例
		crs: L.CRS.EPSG4326, // 坐标系统类
		maxBounds: L.latLngBounds(uppLeft, lowRight), // 设置边界划出边界回弹
		layers: L.supermap.tiledMapLayer(baseMap, {
			tileSize: 256, //瓦片大小
			cacheEnabled: true // 启用缓存
		})
	}
	function initMap() {
		// 初始化地图
		map = L.map('map', mapOptions).setView([36.91, 96.24], 5.5)
		// 叠加图层
		new L.supermap.TiledMapLayer(dateMap).addTo(map)
	}

	// 菜单功能模块
	function getPoint(type) {
		// 清除所有标记
		clearMarker()
		// 清除弹框
		map.closePopup()
		api.getAllList({ type }).then((res) => {
			if (res) {
				map.setView([res[0].wd, res[0].jd])
				res.map((item) => {
					let point = [item.wd, item.jd]
					let icon = `/img/${item.type}.png`
					let marker = L.marker(point, {
						icon: new L.Icon({
							iconUrl: icon,
							iconSize: [26, 39] // 图标宽高
						})
					}).addTo(map)
					marker.on('click', (e) => {
						markerClick(e, item)
					})
					markers.push(marker)
				})
			}
		})
	}
	// marker 点击事件
	function markerClick(e, data) {
		let apiFun = null
		switch (data.type) {
			case '1': //应急网点
				apiFun = api.getYjwdDetail
				break
			case '2': //应急加工企业
				apiFun = api.getYjjgqyDetail
				break
			case '3': //应急配送企业
				apiFun = api.getYjpsqyDetail
				break
			default: //应急仓储企业
				apiFun = api.getYjccqyDetail
		}
		apiFun({ id: data.id }).then((res) => {
			res.processData = { oilQuantity: '', riceQuantity: '', wheatQuantity: '' }
			// 加工能力
			if (data.type == 2) {
				let obj = {
					enterpriseName: data.enterpriseName,
					managementAreaCity: data.managementAreaCity,
					managementAreaCounty: data.managementAreaCounty,
					managementAreaProvince: data.managementAreaCounty
				}
				api.getProcessData(obj).then((list) => {
					if (list.length) {
						res.processData = list[0]
					}
				})
			}

			let html = yjbzPopup(data.type, res)
			L.popup({ autoPan: true })
				.setLatLng([data.wd, data.jd]) // 设置弹窗出现的位置为点击的经纬度
				.setContent(html) // 设置弹窗的内容为相关信息
				.openOn(map) // 在地图上打开弹
		})
	}
	// 清除marker
	function clearMarker() {
		markers.map((item) => {
			map.removeLayer(item)
		})
	}
</script>
<style scoped lang="less">
	#mainPage {
		width: 100%;
		background: #fff;
		height: calc(100vh - 236px);
		#map {
			width: 100%;
			height: calc(100vh - 236px);
		}
		.menuBox {
			right: 10px;
			top: 152px;
			z-index: 999;
			position: fixed;
			opacity: 0.7;
			height: 28px;
			width: 564px;
			.ant-menu {
				line-height: 28px;
				.ant-menu-item {
					padding: 0 5px;
				}
			}
		}
	}
	// 修改弹框样式
	::v-deep(.leaflet-popup) {
		.leaflet-popup-content-wrapper {
			width: 630px;
			opacity: 0.9;
			background: #4f8dff;
			.leaflet-popup-content {
				margin: 0;
				width: 630px;
			}
		}
		.leaflet-popup-tip {
			opacity: 0.9;
			background: #4f8dff;
		}
		.leaflet-popup-close-button {
			top: 18px;
			right: 15px;
			color: #fff;
			font-size: 18px;
		}
	}
</style>
