<script setup lang="ts">
import CesiumViewer from './CesiumViewer.vue';

const $datatableShow = ref(false);

// @ts-expect-error https://digitalarsenal.io/Widgets/InfoBox/InfoBoxDescription.css
globalThis.CESIUM_BASE_URL = 'https://digitalarsenal.io/';
</script>

<template>
  <div class="relative w-full h-full SAT">
    <div id="container" class="absolute w-full h-full select-none">
      <div class="viewer" :style="$datatableShow ? 'height:70%' : 'height: 100%'">
        <CesiumViewer />
      </div>
      <div
        :class="[$datatableShow ? 'visible' : 'hidden', 'datatable absolute w-full b-0 l-0']"
        :style="{
          height: $datatableShow ? '30%' : '0',
          overflow: 'hidden',
          transition: 'height 0.3s ease',
        }"
      >
        <!-- <DataTable /> -->
      </div>
    </div>
  </div>
</template>

<style>
.layout-main {
  display: flex;
  flex-direction: column;
}
.layout-main .SAT {
  flex: 1;
}
</style>
<!--
<style scoped>
#container {
  background-color: pink;
}
</style> -->
