<template>
    <div class="map-container">
        <div class="map-view">
            <status-info></status-info>
            <map-buttons :single-track-enable="singleTrackEnable" v-bind="$attrs"></map-buttons>
            <map-leaflet v-bind="$attrs" :clear-single-point-enable="clearSinglePointEnable"></map-leaflet>
            <retran-timer></retran-timer>
            <single-track :single-track-enable="singleTrackEnable" v-bind="$attrs" @clearSinglePoint="clearSinglePoint"></single-track>
        </div>
        <pair-device></pair-device>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue'
    import { useVehicleStore } from '@/store/VehicleStore';
    import { storeToRefs } from 'pinia';
    import MapLeaflet from './map/MapLeaflet.vue';
    import PairDevice from './map/PairDevice.vue';
    import StatusInfo from './map/StatusInfo.vue';
    import MapButtons from './map/MapButtons.vue';
    import SingleTrack from './map/SingleTrack.vue';
    import RetranTimer from './map/RetranTimer.vue';

    const singleTrackEnable = ref(false)
    const vehicleStore = useVehicleStore()
    const { singleTrackAck } = storeToRefs(vehicleStore)
    const clearSinglePointEnable = ref(false)

    function clearSinglePoint() {
        clearSinglePointEnable.value = true
    }

    watch(singleTrackAck, (value) => {
        const { singleTrackEnable: enable } = value
        singleTrackEnable.value = enable
    }, {
        deep: true
    })
</script>

<style lang="less" scoped>
   .map-view {
        position: relative;
        flex: auto;
        background: #000;
        overflow: hidden;
   }
</style>