<template>
<div>
	<el-input v-bind="$attrs" v-model="defaultValue" placeholder="请输入关键字" style="width: 100%;" readonly @foucs="showMap" @click="showMap" />
	<el-dialog title="地图" v-model="visible" width="800px">
		<template #default="scope">
			<b-map ref="map" width="100%" height="500px" ak="Mnx3XVAmyovK9wohstKt94nRfDpTy8qd" :center="point.lng ? point : '南昌'" :zoom="zoom" :minZoom="3" :mapType="'BMAP_NORMAL_MAP'" :enableDragging="true" :enableScrollWheelZoom="true" @dblclick="mapClick">
				<BCityList :offset="{ x: 20, y: 20 }" />
				<b-zoom :offset="{ x: 22, y: 40 }" />
				
				<template v-if="point.lng != ''">
					<BMarker :position="point"></BMarker>
					<BCircle strokeStyle="solid" strokeColor="#0099ff" :strokeOpacity="0.8" fillColor="#0099ff" :fillOpacity="0.5" :center="point" />
				</template>
			</b-map>
		</template>
	</el-dialog>
</div>
</template>

<script>
import { BMap, BZoom, BCityList, BMarker, BCircle } from 'vue3-baidu-map-gl'

export default {
	props: {
		modelValue: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			visible: false,
			point: {lng: '', lat: ''},
			zoom: 12,
			defaultValue: ''
		}
	},
	mounted() {
		this.defaultValue = this.modelValue
	},
	watch: {
		modelValue:{
			handler(val) {
				this.defaultValue = val
			},
			deep: true,
			immediate: true
		}
	},
	components: {
		BMap,
		BZoom,
		BCityList,
		BMarker,
		BCircle
	},
	methods: {
		showMap(){
			this.visible = true
			if(this.defaultValue) {
				let arr = this.defaultValue.split(',')
				this.point = {
					lng: arr[1],
					lat: arr[0]
				}
			}
			this.$nextTick(() => {
				this.zoom = 20
				this.$refs.map.resetCenter()
			})
		},
		mapClick(e) {
			this.$emit('update:modelValue', e.latlng.lat+','+e.latlng.lng)
			this.visible = false
		}
	}
}
</script>