<template>
    <div class="map-container">
        <tlbs-map ref="mapRef" api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C" :center="center" :zoom="zoom"
            :control="control" @click="onClick" @map_inited="onMapInited">
            <tlbs-multi-marker ref="markerRef" :geometries="geometries" :styles="styles" :options="options" />
        </tlbs-map>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { onMounted } from 'vue';
import { getMapCoder } from '@/api/map';


const props = defineProps({
    address:{
        type: String,
        default: ''
    },
    latAndLng:{
        type: Object,
        default: {
            latitude: '',
            longitude: ''
        }
    }
})


const mapRef = ref(null);
const markerRef = ref(null);
const center = ref({ lat: 39.91799, lng: 116.397027 });
const zoom = ref(15);
const control = {
    scale: {},
    zoom: {
        position: 'topRight',
    },
};
const geometries = ref([
    { styleId: 'marker', position: { lat: 39.91799, lng: 116.397027 } },
])
const styles = {
    marker: {
        // width: 20,
        // height: 30,
        // anchor: { x: 10, y: 30 },
    },
};
const options = {
    minZoom: 3,
    maxZoom: 15,
}
const onClick = (e) => {
    console.log(e);
};

const onMapInited = () => {
    // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
    console.log(mapRef.value.map);
    console.log(markerRef.value.marker);
};

const getLayerInstance = () => {
    // 可以获取点标记实例，调用点标记实例方法
    console.log(markerRef.value.marker);
};
// https://apis.map.qq.com/ws/geocoder/v1/?address=
const adressToCode = async() => {
    try {
        const res= await getMapCoder(props.address);
        if(res.status ===0){
            const location = res.result.location;
            center.value = location
            geometries.value = [ { styleId: 'marker', position: location }]
        }
        console.log(12,res);

    } catch (error) {
        console.log('error',error);
        
    }
}

watch(()=> props.address, () => {
    console.log('props.address',props.address);
    props.address && adressToCode();
})

onMounted(() => {
    const {latitude,longitude} =props.latAndLng;
    if(latitude&&longitude){

        center.value = { lat: Number(latitude), lng: Number(longitude) }
        geometries.value = [ { styleId: 'marker', position: { lat: Number(latitude), lng: Number(longitude) } }]
    }
})

</script>

<style>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
button {
  padding: 4px;
  background-color: #fff;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>