<template>
    <div>
        <div class="flex">
            <a-input v-model:value="address" @change="inpChange" :disabled="disabled" placeholder="" />
            <a-button type="primary" style="margin-left: 10px;"  @click="showMaps">地图</a-button>
        </div>
        
        <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="位置选择"
        centered
        :footer="disabled ? null : undefined" 
        @cancel="handleCancel" 
        @ok="handleOk" 
        width="1200px" 
        height="850px" 
    >
        <div class="modalbox">
            <MapboxMap @handlerDrawComplete="handlerDrawComplete" :location="location" :geoms="geomData" :isPoint="geoType"></MapboxMap>
        </div>
        
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, defineAsyncComponent, onMounted } from 'vue';
import MapboxMap from './components/map.vue';
import axios from 'axios';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { propTypes } from '@/utils/propTypes';

defineOptions({ name: 'AddressDetails' });

const props = defineProps({
    disabled: propTypes.bool,
    value: { type: String },
    geoType: propTypes.bool,
  });
onMounted(() => {
   
})
const emitData = ref<any[]>([]);
const [FormItemData] = useRuleFormItem(props);
const address = ref('')
const mapsVisible = ref(false)
const lngLat = ref([])
const paramsData = ref()
const geomData = ref()
const location = ref()
const showMaps = ()=>{
    mapsVisible.value = true
    if(paramsData.value && paramsData.value.length>0){
        location.value = paramsData.value[0].center
        geomData.value = paramsData.value
    }
}
const inpChange = ()=>{
    paramsData.value[0].address = address.value
    FormItemData.value = JSON.stringify(paramsData.value);
}
const handleCancel = ()=>{
    paramsData.value = null
}
const handleOk = ()=>{
    if(paramsData.value && paramsData.value.length>0){
        lngLat.value = paramsData.value[0].center
        axios({
            method: 'get',
            url: `https://restapi.amap.com/v3/geocode/regeo?output=json&location=`+lngLat.value+`&key=ed310f0b1f6cfd93edfba42f1a09d4d9&radius=1000&extensions=base`,
        }).then((res) => {
            if(res.data){
                address.value = res.data.regeocode.formatted_address
                paramsData.value[0].address = res.data.regeocode.formatted_address
                FormItemData.value = JSON.stringify(paramsData.value);
            }
        });
    }else{
        lngLat.value = []
        address.value = ''
    }
    
    FormItemData.value = JSON.stringify(paramsData.value);
    mapsVisible.value = false
}
const handlerDrawComplete = (e)=>{
    paramsData.value = e
}
watch(
    () => props.value,
    (value, oldValue) => {
      paramsData.value = JSON.parse(value)
        if(paramsData.value && paramsData.value.length>0){
            lngLat.value = paramsData.value[0].center
        }
        if(paramsData.value && paramsData.value.length>0){
            address.value = paramsData.value[0].address
        }
    },
    { deep: true},
  );
</script>

<style lang="less">
.modalbox{
    width: 100%;
    height: 600px;
}
.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>
  