<template>
    <div>
        <a-input v-model:value="address" placeholder="" @click="showMaps" />
        <a-row class="containerbox" v-if="lngLat.length>0">
            <a-col :span="12" class="flex">
                <div class="labelbox">经度</div>
                <a-input class="latbox" v-model:value="lngLat[0]" disabled />
            </a-col>
            <a-col :span="12" class="flex">
                <div class="labelbox">维度</div>
                <a-input class="latbox" v-model:value="lngLat[1]" disabled />
            </a-col>
        </a-row>
    </div>
    <a-modal v-model:visible="mapsVisible" title="位置选择" @cancel="handleCancel" @ok="handleOk" width="800px" height="500px" >
        <div class="modalbox">
            <MapboxMap @handlerDrawComplete="handlerDrawComplete"></MapboxMap>
        </div>
        
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, defineAsyncComponent } from 'vue';
import MapboxMap from './components/map.vue';
import axios from 'axios';

const address = ref('')
const mapsVisible = ref(false)
const lngLat = ref([])
const paramsData = ref()
const showMaps = ()=>{
    console.log('asdddd')
    mapsVisible.value = true
}
const handleCancel = ()=>{
    paramsData.value = null
}
const handleOk = ()=>{
    if(paramsData.value){
        lngLat.value = paramsData.value.center
        axios({
            method: 'get',
            url: `https://restapi.amap.com/v3/geocode/regeo?output=json&location=`+paramsData.value.center+`&key=4f992c089f9496201f6e4ea39ff3ab60&radius=1000&extensions=base`,
        }).then((res) => {
            if(res.data){
                address.value = res.data.regeocode.formatted_address
            }
        });
    }else{
        lngLat.value = []
        address.value = ''
    }
    mapsVisible.value = false
}
const handlerDrawComplete = (e)=>{
    paramsData.value = e[0]
}
</script>

<style lang="less">
.modalbox{
    width: 100%;
    height: 500px;
}
.flex{
    display: flex;
}
.containerbox{
    margin-left: -100px;
    margin-top: 20px;
}
.labelbox{
    width: 110px;
    text-align: end;
    white-space: nowrap;
    font-size: 14px;
    line-height: 32px;
}
.latbox{
   margin-left: 10px;
}
</style>
  