<template>
    <div class="container">
        <div class="header">
            <Header @active-page="activePage" />
        </div>
        <div class="body-box">
            <MapOverview v-if="currentPage === 'home'" />
            <ManualTakeover v-if="currentPage === 'manualTakeover'" />
            <Monitor v-if="currentPage === 'monitoring'" />
        </div>
    </div>
</template>
<script setup>
import Header from './components/Header.vue';
import MapOverview from './components/MapOverview.vue';
import ManualTakeover from './components/ManualTakeover/index.vue';
import Monitor from './components/Monitor.vue';

// import autofit from 'autofit.js'
// autofit.init()


const currentPage = ref('home')
const activePage = (page) => {
    currentPage.value = page
}


</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    background-color: #000d2e;
    display: flex;
    flex-direction: column;

    .header {
        height: 64px;
        background: linear-gradient(180deg, rgba(0, 20, 70, 0.98) 0%, rgba(0, 10, 50, 0.95) 100%);
        border-bottom: 1px solid rgba(0, 194, 255, 0.3);
    }

    .body-box {
        flex: 1;
    }
}
</style>