{$layout}

{$var "header"}
<!-- world map -->
<link rel="stylesheet" type="text/css" href="/_/@default/dashboard/boards/index.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>
<script type="text/javascript" src="/js/world.js"></script>
<script type="text/javascript" src="/js/world-countries-map.js"></script>
{$end}

{$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('dash_数据加载中_c89c') }}
    </div>
  </div>

  <div class="dashboard-content" v-if="!isLoading">
    <!-- 系统消息区域 -->
    <div class="dashboard-alerts">
      <!-- XFF设置提示 -->
      <div class="alert-card warning" v-if="teaXFFPrompt">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          {{ t('dash_检测到你正在使用反向_72a7') }}
        </div>
        <div class="alert-actions">
          <a href="/settings/security?showAll=1#client-header-names" class="ui mini primary button">[{{ t('dash_去设置_066f') }}]</a>
          <a href="" @click.prevent="dismissXFFPrompt" class="ui mini button">[{{ t('dash_关闭提示_b3f1') }}]</a>
        </div>
      </div>

      <!-- 没有节点提醒 -->
      <div class="alert-card warning" v-if="dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <a :href="'/clusters/cluster/createNode?clusterId=' + dashboard.defaultClusterId">{{ t('dash_还没有在集群中添加节_3406') }}</a>
        </div>
      </div>

      <!-- 新版本更新提醒 -->
      <div class="alert-card error" v-if="newVersionCode.length > 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          {{ t('dash_升级提醒：有新版本管理系统可以更新：vcurrentVersionCode', [newVersionCode]) }}
        </div>
        <div class="alert-actions">
          <a href="/settings/updates?doCheck=1" class="ui mini primary button">[{{ t('dash_查看详情_5c5d') }}]</a>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- 边缘节点升级提醒 -->
      <div class="alert-card error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <a href="/clusters">{{ t('dash_升级提醒：有_46d6个边缘节点需要升级到_ac92vversion', {count: nodeUpgradeInfo.count, version: nodeUpgradeInfo.version}) }}</a>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- API节点升级提醒 -->
      <div class="alert-card error" v-if="!isLoading && apiNodeUpgradeInfo.count > 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <a href="/settings/api">{{ t('dash_升级提醒：有 countApiNodeUpgradeInfo 个API 节点需要升级到 vversion 版本',[apiNodeUpgradeInfo.count, apiNodeUpgradeInfo.version]) }}；{{ t('dash_如果已经升级_6248') }}，{{ t('dash_请尝试重启API节点进_b08e') }}。</a>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- 本地API节点 -->
      <div class="alert-card error" v-if="!isLoading && localLowerVersionAPINode != null">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <span v-if="localLowerVersionAPINode.runtimeVersion == localLowerVersionAPINode.fileVersion">{{ t('dash_升级提醒：发现一个正在使用的本地API节点版本需要升级_46d6，文件位置：exePath，当前版本：vruntimeVersion',[ localLowerVersionAPINode.exePath, localLowerVersionAPINode.runtimeVersion]) }}</span>
          <span v-if="localLowerVersionAPINode.runtimeVersion != localLowerVersionAPINode.fileVersion">{{ t('dash_升级提醒：发现一个正在使用的本地API节点版本文件已经更新，但需要重启后生效，文件位置：exePath',[ localLowerVersionAPINode.exePath]) }}。 <a href="" @click.prevent="restartAPINode" v-if="!isRestartingLocalAPINode" class="ui mini primary button">[{{ t('dash_帮我重启_0101') }}]</a><span v-if="isRestartingLocalAPINode"> {{ t('dash_尝试重启中_03be') }}...</span></span>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- 没有硬盘空间提醒 -->
      <div class="alert-card error" v-if="!isLoading && dashboard.diskUsageWarning != null && dashboard.diskUsageWarning.length > 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <span v-html="dashboard.diskUsageWarning" style="line-height: 1.8"></span>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- 弱密码提示 -->
      <div class="alert-card error" v-if="countWeakAdmins > 0">
        <i class="pi pi-exclamation-triangle"></i>
        <div class="alert-content">
          <a href="/admins?hasWeakPassword=1">{{ t('dash_安全提醒：有 countWeakAdmins 个管理员登录账号正在使用弱密码，请及时修改密码，避免产生安全风险。',[countWeakAdmins])}} </a>
        </div>
        <a href="" :title="t('dash_关闭_85c6')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>
    </div>

    <!-- 统计数据卡片 -->
    <div class="stats-card-grid">
      <div class="stat-card" @click="goToURL('/clusters')">
        <div class="stat-icon green">
          <i class="pi pi-server"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{dashboard.countNodeClusters}}</div>
          <div class="stat-label">{{ t('dash_集群_85fe') }}</div>
        </div>
      </div>

      <div class="stat-card" @click="goToURL('/clusters')">
        <div class="stat-icon blue">
          <i class="pi pi-globe"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{dashboard.countNodes}}</div>
          <div class="stat-label">
            {{ t('dash_边缘节点_3b6b') }}
            <span v-if="dashboard.countOfflineNodes > 0" class="stat-badge">{{dashboard.countOfflineNodes}}{{ t('dash_离线_50d4') }}</span>
          </div>
        </div>
      </div>

      <div class="stat-card" @click="goToURL('/settings/api')">
        <div class="stat-icon yellow">
          <i class="pi pi-cog"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{dashboard.countAPINodes}}</div>
          <div class="stat-label">
            {{ t('dash_API节点_1fa1') }}
            <span v-if="dashboard.countOfflineAPINodes > 0" class="stat-badge">{{dashboard.countOfflineAPINodes}}{{ t('dash_离线_50d4') }}</span>
          </div>
        </div>
      </div>

      <div class="stat-card" @click="goToURL('/users')">
        <div class="stat-icon orange">
          <i class="pi pi-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{dashboard.countUsers}}</div>
          <div class="stat-label">{{ t('dash_用户_48ca') }}</div>
        </div>
      </div>

      <div class="stat-card" @click="goToURL('/servers')">
        <div class="stat-icon purple">
          <i class="pi pi-globe"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{dashboard.countServers}}</div>
          <div class="stat-label">{{ t('dash_网站_4870') }}</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon cyan">
          <i class="pi pi-id-card"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value" v-if="todayCountIPs > 0">{{todayCountIPsFormat}}</div>
          <div class="stat-value disabled" v-else>-</div>
          <div class="stat-label">{{ t('dash_当天独立IP_5e63') }}</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon red">
          <i class="pi pi-chart-pie"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            {{todayTraffic}}<span class="stat-unit">{{todayTrafficUnit}}</span>
          </div>
          <div class="stat-label">{{ t('dash_当天流量_aa72') }}</div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{ t('dash_流量趋势_762e') }}</h4>
            <a href="/stats" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div class="ui menu text">
              <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">{{ t('dash_24小时流量趋势_0682') }}</a>
              <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">{{ t('dash_15天流量趋势_a1d4') }}</a>
            </div>
            <div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'hourly'"></div>
            <div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>
          </div>
        </div>
      </div>

      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{ t('dash_域名访问排行_33c1') }} <span>（{{ t('dash_24小时_1198') }}）</span></h4>
            <a href="/stats" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div v-show="hasDomainsData" class="chart-box" id="top-domains-chart"></div>
            <empty-chart v-show="!hasDomainsData" :description="t('dash_暂无域名访问数据_8c37')"></empty-chart>
          </div>
        </div>
      </div>

      <!-- 指标图表 -->
      <metric-chart v-for="chart in metricCharts"
                  :key="chart.id"
                  :v-chart="chart.chart"
                  :v-stats="chart.stats"
                  :v-item="chart.item"
                  :v-column="true">
        <div class="chart-card"></div>
      </metric-chart>
    </div>
  </div>
</div>