{$layout}
{$template "/echarts"}

{$var "header"}
<link rel="stylesheet" href="index.css" type="text/css"/>
{$end}

<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('ns_index@数据加载中')}}
      </div>
  </div>

  <div class="dashboard-content" v-if="!isLoading">
    <!-- 统计数据卡片区域 -->
    <div class="stats-card-grid">
      <!-- 域名统计卡片 -->
      <div class="stat-card" @click="goToPage('/ns/domains')">
        <div class="stat-icon blue">
          <i class="pi pi-globe"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countDomains}}<span class="stat-unit">{{t('ns_index@个Unit')}}</span></div>
          <div class="stat-label">{{t('ns_index@域名')}}<a href="/ns/domains"><i class="pi pi-external-link"></i></a></div>
        </div>
      </div>
      
      <!-- 记录统计卡片 -->
      <div class="stat-card" @click="goToPage('/ns/domains')">
        <div class="stat-icon green">
          <i class="pi pi-list"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countRecords}}<span class="stat-unit">{{t('ns_index@个Unit')}}</span></div>
          <div class="stat-label">{{t('ns_index@记录')}}<a href="/ns/domains"><i class="pi pi-external-link"></i></a></div>
        </div>
      </div>
      
      <!-- 集群统计卡片 -->
      <div class="stat-card" @click="goToPage('/ns/clusters')">
        <div class="stat-icon purple">
          <i class="pi pi-sitemap"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countClusters}}<span class="stat-unit">{{t('ns_index@个Unit')}}</span></div>
          <div class="stat-label">{{t('ns_index@集群')}}<a href="/ns/clusters"><i class="pi pi-external-link"></i></a></div>
        </div>
      </div>
      
      <!-- 节点统计卡片 -->
      <div class="stat-card" @click="goToPage('/ns/clusters')">
        <div class="stat-icon" :class="{'orange': board.countOfflineNodes == 0, 'red': board.countOfflineNodes > 0}">
          <i class="pi pi-server"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            {{board.countNodes}}
            <span v-if="board.countOfflineNodes > 0" class="stat-alert">{{board.countOfflineNodes}}{{t('ns_index@离线')}}</span>
            <span v-else class="stat-unit">{{t('ns_index@个Unit')}}</span>
          </div>
          <div class="stat-label">{{t('ns_index@节点')}}<a href="/ns/clusters"><i class="pi pi-external-link"></i></a></div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <!-- 流量统计 -->
      <div class="chart-container full-width">
        <div class="chart-card">
          <div class="chart-header">
            <h4>{{t('ns_index@流量趋势')}}</h4>
            <div class="ui menu text">
              <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">{{t('ns_index@24小时流量趋势')}}</a>
              <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">{{t('ns_index@15天流量趋势')}}</a>
            </div>
          </div>
          <div class="ui divider"></div>
          <div class="chart-content">
            <!-- 按小时统计流量 -->
            <div class="chart-container" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
            <!-- 按日统计流量 -->
            <div class="chart-container" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
          </div>
        </div>
      </div>

      <!-- 域名排行 -->
      <div class="chart-container">
        <div class="chart-card">
          <div class="chart-header">
            <h4>{{t('ns_index@域名访问排行')}} <span class="chart-subtitle">{{t('ns_index@24小时Subtitle')}}</span></h4>
          </div>
          <div class="ui divider"></div>
          <div class="chart-content">
            <div class="chart-container" id="top-domains-chart"></div>
          </div>
        </div>
      </div>

      <!-- 节点排行 -->
      <div class="chart-container">
        <div class="chart-card">
          <div class="chart-header">
            <h4>{{t('ns_index@节点访问排行')}} <span class="chart-subtitle">{{t('ns_index@24小时Subtitle')}}</span></h4>
          </div>
          <div class="ui divider"></div>
          <div class="chart-content">
            <div class="chart-container" id="top-nodes-chart"></div>
          </div>
        </div>
      </div>

      <!-- 系统信息 -->
      <div class="chart-container">
        <div class="chart-card">
          <div class="chart-header">
            <h4>{{t('ns_index@系统监控')}}</h4>
            <div class="ui menu text">
              <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">{{t('ns_index@DNS节点CPU')}}</a>
              <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">{{t('ns_index@DNS节点内存')}}</a>
              <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">{{t('ns_index@DNS节点负载')}}</a>
            </div>
          </div>
          <div class="ui divider"></div>
          <div class="chart-content">
            <div class="chart-container" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
            <div class="chart-container" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
            <div class="chart-container" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>