<template>
  <div id="mainPage">
    <pageHeader @addSystemMenuView="addSystemMenuViewHandler" />
    <div id="mainTabViewsContainer">
      <tabsViewContain ref="tabsView" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import pageHeader from './systemHeader.vue'
import tabsViewContain from './tabViewContainerWithRouter.vue'

const tabsView = ref(null)

const addSystemMenuViewHandler = (params) => {
  if (tabsView.value) tabsView.value.addView?.(params.viewItem)
}
</script>

<style>
#mainPage { width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: #f5f9fc; }
#mainTabViewsContainer { flex: 1; overflow: hidden; }
</style>
