<template>
	<div class="page page-full">
		<el-select
			v-model="productKey"
			style="position: absolute; top: 20px; left: 20px; width: 200px; z-index: 1000"
			filterable
			clearable
			:loading="loading"
			placeholder="选择产品"
			@change="handleProductChange"
		>
			<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key" value-key="id"> </el-option>
		</el-select>
		<div class="map" id="device-map"></div>
	</div>
</template>

<script lang="ts" setup>
import { initMap, MapStyleJson } from '/@/utils/map'
import { onMounted, ref, watch } from 'vue'
import api from '/@/api/device'
import { ElMessage } from 'element-plus'
import { useStore } from '/@/store/index'

const store = useStore()

let BMapGL: any = null
let map: any = null

const productKey = ref('')
const productData = ref<any[]>([])
const loading = ref(false)

api.product.getLists().then((res: any) => {
	productData.value = res.product
})

const initMapFunc = async () => {
	const { BMapGL: theBMapGL } = await initMap()

	BMapGL = theBMapGL

	map = new BMapGL.Map('device-map')

	if (store.state.themeConfig.themeConfig.isIsDark) {
		map.setMapStyleV2({
			styleJson: MapStyleJson,
		})
	}

	map.enableScrollWheelZoom(true)
	map.centerAndZoom('四川', 5)
	setTimeout(setMarker, 1200)

	map.addEventListener('click', function () {
		map.closeInfoWindow()
	})
}

onMounted(initMapFunc)

watch(() => store.state.themeConfig.themeConfig.isIsDark, initMapFunc)

// 监听产品变化
const handleProductChange = () => {
	setMarker()
}

async function setMarker() {
	loading.value = true
	try {
		const { device } = await api.device.allList({ productKey: productKey.value })

		// 清除现有标记
		map.clearOverlays()

		const list = (device || []).filter((row: any) => row.lat && row.lng)

		if (!list.length) {
			ElMessage.warning('该产品在不存在有坐标的设备！')
			return map.centerAndZoom('四川', 5)
		}

		const points: any[] = []
		const markers: any[] = []

		list?.map((row: any) => {
			if (!row.lat || !row.lng) return

			const point = new BMapGL.Point(row.lng, row.lat)
			const marker = new BMapGL.Marker(point, {
				icon: new BMapGL.Icon('/imgs/device.png', new BMapGL.Size(146, 85)),
				// offset: new BMapGL.Size(-73, -42.5),
			})
			points.push(point)
			markers.push(marker)
			map.addOverlay(marker)

			marker.addEventListener('click', function () {
				const deviceType = row.product.deviceType === '网关' ? '网关' : '设备'
				// api.screen.alarmCount(row.key).then(({ handled, number, unhandled }: any) => {
				const number = 0
				const unhandled = 0
				const handled = 0
				const infoWindow = new BMapGL.InfoWindow(
					`
          <div class="map-hover-box">
            <div class="map-hover-title">${row.name}</div>
					${
						false
							? `
          <div class="map-hover-nums">
            <div class="map-hover-nums-item">
              <div class="map-hover-nums-label">今日报警总数</div>
              <div class="map-hover-nums-value">${number}</div>
            </div>
            <div class="map-hover-nums-item">
              <div class="map-hover-nums-label">今日未处理报警</div>
              <div class="map-hover-nums-value">${unhandled}</div>
            </div>
            <div class="map-hover-nums-item">
              <div class="map-hover-nums-label">今日已处理报警</div>
              <div class="map-hover-nums-value">${handled}</div>
            </div>
          </div>`
							: ''
					}
            <div class="map-hover-row-item">
              <div class="map-hover-label">编号：</div>
              <div class="map-hover-value">${row.key}</div>
            </div>
            <div class="map-hover-row-item">
              <div class="map-hover-label">最后在线时间：</div>
              <div class="map-hover-value">${row.lastOnlineTime || '-'}</div>
            </div>
            <div class="map-hover-row-item">
              <div class="map-hover-label">${deviceType}地址：</div>
              <div class="map-hover-value">${row.address || '-'}</div>
            </div>
          </div>
            `,
					{
						width: 268 * 1.2, // 信息窗口宽度  268 * 193
						// height: 120 * 1.2, // 信息窗口高度
						title: '',
					}
				)
				map.openInfoWindow(infoWindow, point) //开启信息窗口
				// })
			})
		})

		if (!markers.length) return

		// 设置地图显示范围
		map.setViewport(points, {
			enableAnimation: true, // 启用动画过渡
			margins: [30, 30, 30, 30], // 设置四个边界的边距
		})
	} finally {
		loading.value = false
	}
}
</script>
<style scoped lang="scss">
.map {
	width: 100%;
	height: 100%;
	background-color: #ccc;
}
</style>

<style lang="scss">
.map-hover-station {
	.view-div-head,
	.view-div {
		color: #fff;
		background: #222;
	}
}

.BMap_bubble_pop {
	width: 220px;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #fff !important;
	margin-top: 0;
	margin-left: -20px;
	// pointer-events: none;

	& > img {
		display: none !important;
	}
}

.BMap_bubble_content {
	color: #fff !important;
}

// .BMap_bubble_content,
// .BMap_bubble_center {
// 	height: 150px !important;
// }

.BMap_bubble_content {
	width: 100% !important;
	height: 100% !important;
	// background: rgba(0, 29, 122, 0.6) !important;
	background-image: url('/@/assets/window.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 3px;
	backdrop-filter: blur(5px);
}

.BMap_bubble_top,
.BMap_bubble_bottom {
	display: none !important;
}

.map-hover-box {
	color: #fff;
	font-size: 14px;
	padding: 15px 20px;

	.map-hover-nums {
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid #3ba4fc;

		.map-hover-nums-item {
			text-align: center;

			.map-hover-nums-label {
				font-weight: 500;
			}

			.map-hover-nums-value {
				font-size: 18px;
				font-weight: bold;
				color: #fd1d1a;
				margin-top: 5px;
			}

			&:last-child .map-hover-nums-value {
				color: #4496df;
			}
		}
	}

	.map-hover-title {
		line-height: 1.4;
		font-size: 16px;
		font-weight: 500;
		background-image: url('/@/assets/map-title.png');
		background-size: 14px 14px;
		background-repeat: no-repeat;
		background-position: left center;
		text-indent: 20px;
	}

	.map-hover-label {
		white-space: nowrap;
	}

	.map-hover-btn {
		white-space: nowrap;
		background: #67c23a;
		padding: 6px 12px;
		border-radius: 4px;
		cursor: pointer;
	}

	.map-hover-row-item {
		display: flex;
		align-items: flex-start;
		line-height: 1.4;
		margin-top: 5px;

		// gap: 20px;
		.map-hover-value {
			// font-size: 22px;
			color: #4decff;
			font-weight: 500;
			word-break: break-all;
		}
	}
}
</style>
