<template>
  <Application>
    <Layout>
      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
      <Tabs default-value="monitor" class="h-full">
        <n-tab-pane display-directive="show:lazy" tab="监测" name="monitor">
          <ParameterMonitoringView class="w-h-full" />
        </n-tab-pane>
        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
          <SerialPortReceivingMessageView class="h-full" />
        </n-tab-pane>
      </Tabs>
    </Layout>

    <SerialPortManagementDrawer />
  </Application>
</template>

<script setup lang="ts">
import { NTabPane } from 'naive-ui'
import { Application } from '@/components/Application'
import { Layout } from '@/layout/default'
import { Tabs } from '@/components/Tabs'
import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
import { SerialPortReceivingMessageView } from '@/components/SerialPort'
import { ParameterMonitoringView } from '@/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView'
</script>

<style scoped lang="less">
// 实现pane中的内容水平垂直居中
.n-tab-pane {
  display: flex;
  place-items: center;
}

.drawer-control-button {
  position: fixed;
  right: 80px;
  bottom: 100px;
  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px 0px;
}
</style>
