<template>
	<a-modal
		v-model:open="visible"
		title="选择坐标"
		:width="1000"
		:mask-closable="false"
		:destroy-on-close="true"
		@ok="handleOk"
		@cancel="handleClose"
	>
		<div>
			<input id="id" hidden />
			<a-auto-complete
				style="width: 40%; left: 40px; top: 120px; position: absolute; border-radius: 5px; z-index: 100"
				v-model:value="address"
				:options="addressArr"
				placeholder="请输入地址"
				@search="toSearch"
				:trigger-on-focus="false"
				clearable
				@select="handleSelect"
			>
				<template #option="item">
					<div style="overflow: hidden">
						<span class="address ellipsis"><environment-outlined />&nbsp;{{ item.value }}</span>
					</div>
				</template>
			</a-auto-complete>
			<div class="bmap" id="container"></div>
		</div>
	</a-modal>
</template>

<script setup name="getMapPoint">
	// 弹窗是否打开
	const visible = ref(false)
	const emit = defineEmits({ onBack: null })
	// 自动完成的地址列表
	const addressArr = ref([])
	const address = ref('')
	const bMap = ref()
	const bAc = ref()
	const bInfo = ref()
	const bSearch = ref()
	const centerPoint = ref({ lng: 98.59994960975786, lat: 29.685411052081477 })
	const targetPoint = ref()
	const show = (lng, lat) => {
		visible.value = true
		initMap(lng, lat)
	}
	// 初始化地图组件
	const initMap = (lng, lat) => {
		if (lng && lat) {
			centerPoint.value = { lng: lng, lat: lat }
			targetPoint.value = { lng: lng, lat: lat }
		}
		nextTick(() => {
			const center = new BMapGL.Point(centerPoint.value.lng, centerPoint.value.lat)
			bMap.value = new BMapGL.Map('container')
			bMap.value.centerAndZoom(center, 12)
			bMap.value.enableScrollWheelZoom(true)
			bInfo.value = new BMapGL.InfoWindow(``, {
				width: 200,
				height: 100,
				title: '选中坐标',
				enableCloseOnClick: false
			})
			bAc.value = new BMapGL.Autocomplete({
				input: 'id',
				location: bMap.value,
				onSearchComplete: (results) => {
					var temp = []
					for (let i = 0; i < results.getNumPois(); i++) {
						var result = results.getPoi(i)
						temp.push({ value: `${result.province}${result.city}${result.district}${result.street}${result.business}` })
					}
					addressArr.value = temp
					bAc.value.hide()
				}
			})
			if (targetPoint.value) {
				checkPoint(lng, lat)
			}
			bMap.value.addEventListener('click', (e) => {
				// 获取点击位置的经度和纬度
				checkPoint(e.latlng.lng, e.latlng.lat)
			})
			bSearch.value = new BMapGL.LocalSearch(bMap.value, {
				onSearchComplete: (e) => {
					var pp = bSearch.value.getResults().getPoi(0).point //获取第一个智能搜索的结果
					bMap.value.centerAndZoom(pp, 12)
					checkPoint(pp.lng, pp.lat)
				}
			})
		})
	}
	const handleOk = () => {
		emit('onBack', targetPoint.value)
		handleClose()
	}

	const handleClose = () => {
		targetPoint.value = null
		visible.value = false
		address.value = null
		addressArr.value = []
	}

	// 返回的搜索内容事件处理
	const toSearch = (str) => {
		bAc.value.search(str)
	}
	// 选择地址触发事件
	const handleSelect = (item) => {
		address.value = item
		bSearch.value.search(item)
	}
	// 选中了某个点
	const checkPoint = (lng, lat) => {
		targetPoint.value = { lng: lng, lat: lat }
		bInfo.value.setContent(`<p>经度：${lng}</p><p>纬度：${lat}</p>`)
		bMap.value.openInfoWindow(bInfo.value, new BMapGL.Point(lng, lat))
	}
	// 清除
	const clear = () => {
		form.addressDetail = '' // 详细地址
		form.longitude = '' // 经度
		form.latitude = '' // 纬度
	}

	defineExpose({
		show
	})
</script>

<style scoped lang="less">
	.bmap {
		width: 100%;
		height: 500px;
	}
</style>
