<template>
    <span style="padding-left: 16rpx">{{ distance }}</span>
</template>

<script setup>
import { inject, computed, watch } from 'vue';
const { haversine, getDistanceFromLatLonInKm } = inject('globalFunction');
const props = defineProps(['alat', 'along', 'blat', 'blong']);

const distance = computed(() => {
    const distance2 = getDistanceFromLatLonInKm(props.alat, props.along, props.blat, props.blong);
    // console.log(distance2, props.alat, props.along, props.blat, props.blong);
    const { km, m } = distance2;
    if (!props.alat && !props.along) {
        return '--km';
    }
    if (km > 1) {
        return km.toFixed(2) + 'km';
    } else {
        return m.toFixed(2) + 'm';
    }
    return '';
});
</script>

<style></style>
