{$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 "menu"}

<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-if="!isLoading">
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
      <!-- <div class="user-avatar">
        <img src="/images/avatar.png" alt="用户头像" />
      </div> -->
      <div class="user-details">
        <div class="hello-text">👋 {{t('index_您好_f070')}}， <span class="username">{{teaUsername}}</span></div>
      </div>
      <!-- <div class="user-meta">
        <div class="last-login">最后登录： <span>{{dashboard.lastLogin || "-"}}</span></div>
        <div class="ip-address">IP： <span>{{dashboard.ipAddress || "-"}}</span></div>
      </div> -->
    </div>

    <!-- 消息提示区域 -->
    <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('index_检测到你正在使用反向_4e86')}}，{{t('index_如果你的系统确定在一_a144')}}，{{t('index_为了系统的正常运行_e212')}}，{{t('index_请在安全设置中设置_9118')}}"{{t('index_自定义客户端_9e24')}}IP{{t('index_报头_78e1')}}"。
          </div>
          <div class="alert-actions">
            <a href="/settings/security?showAll=1#client-header-names" class="ui mini primary button">[{{t('index_去设置_2411')}}]</a>
            <a href="" @click.prevent="dismissXFFPrompt" class="ui mini button">[{{t('index_关闭提示_c335')}}]</a>
          </div>
      </div>

      <!-- 商业版错误 -->
      <div class="alert-card error" v-if="plusErr.length > 0">
          <i class="pi pi-exclamation-triangle"></i>
          <div class="alert-content">{{plusErr}}</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('index_还没有在集群中添加节_9764')}}，{{t('index_现在去添加_f005')}}？{{t('index_添加节点后才可部署网_740b')}}。</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('index_查看详情_5b48')}}]</a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <!-- 过期提醒 -->
      <div class="alert-card error" v-if="plusExpireDay.length > 0">
          <i class="pi pi-exclamation-triangle"></i>
          <div class="alert-content">
            <a href="/settings/authority"><strong>{{t('index_续费提醒_4640')}}：{{t('index_当前商业版系统即将在_b859')}}{{plusExpireDay}} {{t('index_过期_584c')}}，{{t('index_为了您能正常使用相关_51d2')}}，{{t('index_请及时提前续费_78e7')}}。</strong></a>
          </div>
      </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_升级提醒：有 countNodeUpgradeInfo 个边缘节点需要升级到 vversion 版本',[nodeUpgradeInfo.count, nodeUpgradeInfo.version]) }}
            </a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>
      <div class="alert-card error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
          <i class="pi pi-exclamation-triangle"></i>
          <div class="alert-content">
            <a href="/settings/userNodes">{{ t('dash_升级提醒：有 countUserNodeUpgradeInfo 个用户节点需要升级到 vversion 版本',[userNodeUpgradeInfo.count, userNodeUpgradeInfo.version]) }}</a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>
      <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]) }}</a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @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('index_关闭_b15d')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>

      <div class="alert-card error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
          <i class="pi pi-exclamation-triangle"></i>
          <div class="alert-content">
            <a href="/ns/clusters">{{ t('dash升级提醒：有 countNsNodeUpgradeInfo 个DNS 节点需要升级到 vversion 版本',[nsNodeUpgradeInfo.count, nsNodeUpgradeInfo.version]) }}</a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @click.prevent="closeMessage" class="close-btn"><i class="ui pi pi-times"></i></a>
      </div>
      <div class="alert-card error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
          <i class="pi pi-exclamation-triangle"></i>
          <div class="alert-content">
            <a href="/clusters/monitors/reporters">{{ t('dash升级提醒：有 countReportNodeUpgradeInfo 个区域监控终端需要升级到 vversion 版本',[reportNodeUpgradeInfo.count, reportNodeUpgradeInfo.version]) }}</a>
          </div>
          <a href="" :title="t('index_关闭_b15d')" @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('index_关闭_b15d')" @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('index_关闭_b15d')" @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('index_集群总数_56ce')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/clusters/nodes')">
        <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('index_边缘节点_3b6b')}}<span v-if="dashboard.countOfflineNodes > 0" class="stat-badge">{{dashboard.countOfflineNodes}}{{t('user_离线_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">
            API{{t('index_节点_a8a7')}}<span v-if="dashboard.countOfflineAPINodes > 0" class="stat-badge">{{dashboard.countOfflineAPINodes}}{{t('user_离线_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('index_用户_48ca')}}<span v-if="dashboard.countOfflineUserNodes > 0" class="stat-badge">{{dashboard.countOfflineUserNodes}}{{t('user_离线_50d4')}}</span>
          </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('index_网站_4870')}}<span v-if="dashboard.countAuditingServers > 0" class="stat-badge">{{dashboard.countAuditingServers}}{{t('index_审核_cf13')}}</span>
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon teal">
          <i class="pi pi-chart-bar"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{weekTraffic}}<span class="stat-unit">{{weekTrafficUnit}}</span></div>
          <div class="stat-label">{{t('index_本周流量_3bb3')}}</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon cyan">
          <i class="pi pi-chart-line"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{yesterdayTraffic}}<span class="stat-unit">{{yesterdayTrafficUnit}}</span></div>
          <div class="stat-label">{{t('index_昨日流量_4549')}}</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon indigo">
          <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('index_当天独立_cd31')}}IP</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>
            <span class="change-percent increase" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('+') > -1">↑ {{yesterdayPercentFormat}}%</span>
            <span class="change-percent decrease" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('-') > -1">↓ {{yesterdayPercentFormat}}%</span>
          </div>
          <div class="stat-label">{{t('index_当天流量_aa72')}}</div>
        </div>
      </div>
    </div>

    <!-- 实时监控图表区域 -->
    <div class="monitoring-section">
      <h3 class="section-title">{{t('index_实时监控_a3c5')}}</h3>
      <div class="monitoring-grid">
        <div class="monitoring-card">
          <div class="card-header">
            <h4>{{t('index_带宽使用_a8d7')}}</h4>
            <a href="/clusters/nodes?trafficOutOrder=desc" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="percent-box">
            <div id="total-bandwidth-chart-box" class="chart"></div>
            <div class="detail">
              <div class="label">&nbsp;</div>
              <div class="value">&nbsp;</div>
            </div>
            <div class="summary" v-if="nodeValuesStat != null">{{t('dash_总_5c59')}} {{nodeValuesStat.totalTrafficPerSecondSizeFormat}}<span>{{nodeValuesStat.totalTrafficPerSecondUnitFormat}}</span></div>
          </div>
        </div>
        
        <div class="monitoring-card">
          <div class="card-header">
            <h4>CPU{{t('index_使用率_41d8')}}</h4>
            <a href="/clusters/nodes?cpuOrder=desc" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="percent-box">
            <div id="all-cpu-chart-box" class="chart"></div>
            <div class="detail">
              <div class="label">{{t('index_平均_3387')}}CPU{{t('index_用量_7437')}}</div>
              <div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgCPUUsageFormat}}%</div>
            </div>
            <div class="summary" v-if="nodeValuesStat != null">{{t('dash_共_5c59')}} {{nodeValuesStat.totalCPUCores}}{{t('dash_核_5c59')}}</div>
          </div>
        </div>
        
        <div class="monitoring-card">
          <div class="card-header">
            <h4>{{t('index_内存使用率_31cb')}}</h4>
            <a href="/clusters/nodes?memoryOrder=desc" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="percent-box">
            <div id="all-memory-chart-box" class="chart"></div>
            <div class="detail">
              <div class="label">{{t('index_平均内存用量_1a1a')}}</div>
              <div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgMemoryUsageFormat}}%</div>
            </div>
            <div class="summary" v-if="nodeValuesStat != null">{{t('dash_共_5c59')}} {{nodeValuesStat.totalMemoryFormat}}</div>
          </div>
        </div>
        
        <div class="monitoring-card">
          <div class="card-header">
            <h4>{{t('index_系统负载_6f59')}}</h4>
            <a href="/clusters/nodes?loadOrder=desc" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="percent-box">
            <div id="all-load-chart-box" class="chart"></div>
            <div class="detail">
              <div class="label">{{t('index_平均负载_992f')}}</div>
              <div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad1minFormat}}/min</div>
            </div>
            <div class="summary" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad5minFormat}}/5min</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <div class="chart-container map">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('index_访问地域分布_125f')}}</h4>
          </div>
          <div class="chart-content map-content">
            <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="title-box">
            <h4>{{t('index_流量趋势_762e')}}</h4>
          </div>
          <div class="card-header">
            <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>
          <div class="chart-content">
            <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="title-box">
            <h4>{{t('index_访问量趋势_771e')}}</h4>
          </div>
          <div class="card-header">
            <div class="ui menu text">
              <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24{{t('index_小时访问量趋势_c9a9')}}</a>
              <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15{{t('index_天访问量趋势_8a42')}}</a>
            </div>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
            <div class="chart-box" id="daily-requests-chart" v-show="requestsTab == '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>
          </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>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-nodes-chart"></div>
          </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>