{$layout}

{$var "header"}
<!-- world map -->
<link rel="stylesheet" type="text/css" href="/_/@default/dashboard/boards/dns.css" media="all" />
<script type="text/javascript" src="/js/antd/g2plot.min.js" type="module"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end}

{$template "menu"}
{$template "/echarts"}

<div class="dashboard-container">
  <!-- 加载中 -->
  <div class="loading-wrapper" v-if="isLoading">
      <div class="ui message loading">
          <div class="ui active inline loader small"></div>  &nbsp; {{t('waf_数据加载中_f09b')}}...
      </div>
  </div>

  <div class="dashboard-content" v-show="!isLoading">
    <!-- 统计数据卡片区域 -->
    <div class="stats-card-grid">
      <div class="stat-card" @click="goToURL('/ns/domains')">
        <div class="stat-icon blue">
          <i class="pi pi-globe"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countDomains}}</div>
          <div class="stat-label">{{t('dns_域名_1909')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/ns/domains')">
        <div class="stat-icon green">
          <i class="pi pi-list"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countRecords}}</div>
          <div class="stat-label">{{t('waf_记录_620b')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/ns/clusters')">
        <div class="stat-icon orange">
          <i class="pi pi-server"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countClusters}}</div>
          <div class="stat-label">{{t('event_集群_85fe')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/ns/clusters')">
        <div class="stat-icon purple">
          <i class="pi pi-sitemap"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countNodes}}</div>
          <div class="stat-label">
            {{t('index_节点_a8a7')}}<span v-if="board.countOfflineNodes > 0" class="stat-badge">{{board.countOfflineNodes}}{{t('user_离线_50d4')}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('index_流量趋势_762e')}}</h4>
          </div>
          <div class="ui menu text">
            <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24{{t('index_小时流量趋势_8aad')}}</a>
            <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15{{t('index_天流量趋势_b36a')}}</a>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
            <div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('index_域名访问排行_9801')}}<span>（24{{t('waf_小时_2de0')}}）</span></h4>
            <a href="/ns/domains" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-domains-chart"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('index_节点访问排行_2400')}}<span>（24{{t('waf_小时_2de0')}}）</span></h4>
            <a href="/ns/clusters" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-nodes-chart"></div>
          </div>
        </div>
      </div>
      
      <!-- 系统监控 -->
      
    </div>
    <div class="chart-container system-monitoring">
        <div class="chart-card">
          <div class="system-monitoring-header">
            <h4>{{t('user_系统监控_c846')}}</h4>
          </div>
          <div class="chart-system-monitoring">
            <div class="chart-card">
              <div class="card-header">
                <h4>CPU</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="cpu-chart"></div>
              </div>
            </div>
            <div class="chart-card">
              <div class="card-header">
                <h4>{{t('user_内存_9932')}}</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="memory-chart"></div>
              </div>
            </div>
            <div class="chart-card">
              <div class="card-header">
                <h4>{{t('user_负载_4956')}}</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="load-chart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>