<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useI18n from '@/hooks/useI18n';
import Topology from './components/Topology/index.vue';
import NeResources from './components/NeResources/index.vue';
import CDR from './components/CDR/index.vue';
import AlarnDayLine from './components/AlarnDayLine/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';

import { useFullscreen } from '@vueuse/core';
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
const { t } = useI18n();

/**总览节点 */
const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);

onMounted(() => {});
</script>

<template>
  <div class="viewport" ref="viewportDom">
    <div class="brand">
      <div class="brand-title" @click="toggle">
        核心网系统看板
        <FullscreenExitOutlined v-if="isFullscreen" />
        <FullscreenOutlined v-else />
      </div>
      <div class="brand-desc">{{ appStore.appName }}</div>
    </div>

    <div class="column">
      <!--概览-->
      <div class="overview panel">
        <div class="inner">
          <div class="item">
            <h4>2,190</h4>
            <span>
              <UserOutlined style="color: #006cff" />
              签约用户
            </span>
          </div>
          <div class="item">
            <h4>190</h4>
            <span>
              <UserSwitchOutlined style="color: #6acca3" />
              语音在线
            </span>
          </div>
          <div class="item">
            <h4>3,001</h4>
            <span>
              <UserSwitchOutlined style="color: #6acca3" />
              数据在线
            </span>
          </div>
          <div class="item">
            <h4>23</h4>
            <span>
              <WifiOutlined style="color: #edcb35" />
              基站在线
            </span>
          </div>
        </div>
      </div>

      <!--本月告警统计-->
      <div class="alarmType panel">
        <div class="inner">
          <h3>本月告警统计</h3>
          <div class="chart">
            <AlarnTypeBar />
          </div>
        </div>
      </div>

      <!-- 告警趋势 -->
      <div class="alarmDay panel">
        <div class="inner">
          <h3>告警趋势</h3>
          <div class="chart">
            <AlarnDayLine />
          </div>
        </div>
      </div>
    </div>
    <div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
      <!-- 实时流量 -->
      <div class="upfFlow panel">
        <div class="inner">
          <h3>实时流量</h3>
          <div class="chart">
            <UPFFlow />
          </div>
        </div>
      </div>
      <!-- 网络拓扑 -->
      <div class="topology panel">
        <div class="inner">
          <h3>
            <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;网络拓扑
          </h3>
          <div class="chart">
            <Topology />
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- 总流量 -->
      <div class="totalFlow panel">
        <div class="inner">
          <!-- 筛选 -->
          <div class="filter">
            <span data-key="1" class="active">24小时</span>
            <span data-key="7">7天</span>
            <span data-key="30">30天</span>
          </div>
          <!-- 数据 -->
          <div class="data">
            <div class="item">
              <h4>20,301 TB</h4>
              <span>
                <ArrowUpOutlined style="color: #ed3f35" />
                上行
              </span>
            </div>
            <div class="item">
              <h4>99834 TB</h4>
              <span>
                <ArrowDownOutlined style="color: #eacf19" />
                下行
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 资源情况 -->
      <div class="resources panel">
        <div class="inner">
          <h3>
            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp; 资源情况
          </h3>
          <div class="chart">
            <NeResources />
          </div>
        </div>
      </div>
      <!-- 会话监控 -->
      <div class="cdr panel">
        <div class="inner">
          <h3>
            <WhatsAppOutlined style="color: #d93f36" />&nbsp;&nbsp; 会话监控
          </h3>
          <div class="chart">
            <CDR />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url('./css/index.css');
</style>
