<template>
	<div id="pageBox">
		<div id="map"></div>
		<div class="reserveInfo">
			<div class="info" v-for="item in menuList.reserveList" :key="item.prop" @click="openReserveInfo(item)">
				<p><img :src="`/public/img/geography/${item.prop}.png`" alt="" />{{ item.label }}</p>
				<span
					><b>{{ statistics[item.prop] }}</b
					>{{ item.unit }}</span
				>
			</div>
		</div>
		<div class="menuBox">
			<a-menu v-model:selectedKeys="current" mode="horizontal">
				<a-menu-item v-for="item in menuList.grainReserve" :key="item.key" @click="getPoint(item.key)"
					>{{ item.title }}
				</a-menu-item>
			</a-menu>
		</div>
		<Arehouse v-if="isType == 1" :drawerInfo="drawerInfo" @closeDrawer="closeDrawer" />
		<!--仓库数量  -->
		<WarehouseArea v-if="isType == 2" :drawerInfo="drawerInfo" @closeDrawer="closeDrawer" />
		<!--库区数量  -->
		<inventory v-if="isType == 3" :drawerInfo="drawerInfo" @closeDrawer="closeDrawer" />
		<!--粮食总仓  -->
	</div>
</template>
<script setup>
	import { useRouter } from 'vue-router'
	import api from '@/api/RLGI/system.js'
	import { message } from 'ant-design-vue'
	import Arehouse from './comonents/drawerModule/arehouse.vue'
	import inventory from './comonents/drawerModule/inventory.vue'
	import WarehouseArea from './comonents/drawerModule/warehouseArea.vue'
	/**
	 * 菜单功能模块
	 */
	const statistics = reactive({})
	const router = useRouter()
	const drawerInfo = reactive({
		title: '',
		showDrawer: false
	})
	const isType = ref(null)
	const current = ref([''])
	const menuList = {
		reserveList: [
			{
				type: 'cfsl',
				unit: '个',
				prop: 'cfsl',
				label: '仓房数量'
			},
			{
				type: 'kqsl',
				unit: '个',
				prop: 'kqsl',
				label: '库区数量'
			},
			{
				type: 'lszkc',
				unit: '吨',
				prop: 'lszkc',
				label: '粮食总库存'
			}
		],
		grainReserve: [
			{
				key: '',
				title: '全部'
			},
			{
				key: '6877',
				title: '省级储备粮'
			},
			{
				key: '6878',
				title: '市级储备粮'
			},
			{
				key: '6879',
				title: '县级储备粮'
			}
		]
	}
	onMounted(() => {
		initMap() // 初始化地图
		getReservoirInfo()
		getAllReservoirArea()
	})

	// 全部库区
	function getAllReservoirArea() {
		api.selectOrgInfoPage({ current: 1, size: 9999 }).then((res) => {
			res.records.map((item) => {
				drawMarker(item)
			})
		})
	}
	// 储备粮
	function getGrainReserve(type) {
		api.selectGrainNatureName({ type }).then((res) => {
			res.map((item) => {
				drawMarker(item)
			})
		})
	}

	// 获取仓房数量 库区数量和粮食总库存
	function getReservoirInfo() {
		// 仓房数量
		api.selectStoreHouseCount().then((res) => {
			statistics.cfsl = res
		})
		// 库区数量
		api.selectOrgInfoCount().then((res) => {
			statistics.kqsl = res
		})
		// 粮食总库存
		api.selectInventoryCount().then((res) => {
			statistics.lszkc = res
		})
	}

	/**
	 *地图功能模块
	 */
	let map
	var popup
	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)
	}

	// 绘制marker点
	function drawMarker(data) {
		let marker = L.marker([data.latitude, data.longitude]).addTo(map)
		marker.on('click', (e) => {
			markerClick(data)
		})
		markers.push(marker)
	}

	// marker点击事件
	function markerClick(data) {
		api.selectStoreHousePage({ current: 1, size: 100, orgName: data.orgName }).then((res) => {
			if (res.records.length) {
				createPopup(res.records[0], data)
			} else {
				message.error('暂无数据')
			}
		})
	}
	// 生成弹框
	function createPopup(stash, data) {
		let html = `<div class="infoBox">
			            <div class="title">库区信息</div>
						<div class="info"><span class="label">库点名称:</span><span>${data.orgName}</span></div>
						<div class="info"><span class="label">总仓容（吨）:</span><span>${stash.designCapacitySum}</span></div>
						<div class="info"><span class="label">核定仓容（吨）:</span><span>${stash.actualCapacitySum}</span></div>
						<div class="info"><span class="label">总罐容（吨）:</span><span>${stash.tankCapacitySum}</span></div>
						<div class="info"><button id="btnClick">库区详情</button></div>
			        </div>`
		// 按钮点击事件
		map.on('popupopen', () => {
			document.getElementById('btnClick').onclick = () => {
				console.log(data, 'data')
				router.push({
					path: '/RLGI/reservoirArea',
					query: {
						orgId: data.orgId,
						orgName: data.orgName
					}
				})
			}
		})

		popup = L.popup({ autoPan: true, offset: L.point(0, -20) })
			.setLatLng([data.latitude, data.longitude]) // 设置弹窗出现的位置为点击的经纬度
			.setContent(html) // 设置弹窗的内容为相关信息
			.openOn(map) // 在地图上打开弹
	}
	// 打开仓库 库区 粮食总库存弹窗
	function openReserveInfo(data) {
		if (data.prop == 'cfsl') {
			drawerInfo.title = '仓库数量汇总表'
			isType.value = 1
		} else if (data.prop == 'kqsl') {
			drawerInfo.title = '库区数量'
			isType.value = 2
		} else {
			drawerInfo.title = '粮食总库存'
			isType.value = 3
		}
		drawerInfo.showDrawer = true
	}

	// 菜单功能模块
	function getPoint(type) {
		clearLayer()
		if (type) {
			getGrainReserve(type)
		} else {
			// 全部
			getAllReservoirArea()
		}
	}
	// 清理图层
	function clearLayer() {
		if (popup) {
			popup.close()
		}
		// 清除marker
		markers.map((item) => {
			map.removeLayer(item)
		})
	}

	// 关闭抽屉
	function closeDrawer(data) {
		drawerInfo.showDrawer = false
		if (data) {
			clearLayer()
			drawMarker(data)
			map.setView([data.latitude, data.longitude], 10)
		}
	}
</script>
<style scoped lang="less">
	@import url('@/style/RLGI/system.less');
</style>
