<script setup>
import { ref } from 'vue';
import Tools from './components/Tools.vue';
import NavMenu from './components/NavMenu.vue';
import AnnoucementPage from './pages/AnnouncementPage.vue';
import RealtimePage from './pages/RealtimePage.vue';
import AppHeader from './components/Base/Header.vue';
import AlertListPage from './pages/AlertListPage.vue'
import DataPage from './pages/DataPage.vue';


const currentPage = ref('3d');
const handlePageChange = (page) => {
  currentPage.value = page;
  console.log(currentPage.value);
};
</script>

<template>
  <div class="main-container">
    <Tools v-if="currentPage !== 'announcement'" />
    <AppHeader v-if="currentPage !== 'announcement'" />
    <AnnoucementPage
      v-if="currentPage === 'announcement'"
      class="annoucement-page"
      @home="() => handlePageChange('3d')"
    />
    <div v-else class="pages-wrapper">
      <NavMenu @change="handlePageChange" />
      <div v-if="currentPage === '3d'" class="3d-page">3d</div>
      <DataPage v-if="currentPage === 'data'" />
      <AlertListPage v-if="currentPage === 'alert'" />
      <RealtimePage v-if="currentPage === 'realtime'" />
    </div>
  </div>
</template>

<style scoped>
.main-container {
  width: 1920px;
  height: 1080px;
  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  /** 
  background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
  100% / 100% no-repeat;
  */
  background: url(./assets/bg.png) 100% / cover no-repeat;
}

.pages-wrapper {
  flex: 1;
  display: flex;
  position: relative;
}
</style>
