{$layout}

{$var "header"}
<!-- world map -->
<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 style="margin-top: 0.8em">
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
</div>

<!-- 商业版错误 -->
<div class="ui icon message error" v-if="plusErr.length > 0">
    <i class="icon warning circle"></i>
    {{plusErr}}
</div>

<!-- 没有节点提醒 -->
<div class="ui icon message warning" v-if="!isLoading && dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
    <i class="icon warning circle"></i>
    <a :href="'/clusters/cluster/createNode?clusterId=' + dashboard.defaultClusterId">还没有在集群中添加节点，现在去添加？添加节点后才可部署网站服务。</a>
</div>

<!-- 过期提醒 -->
<div class="ui icon message error" v-if="plusExpireDay.length > 0">
    <i class="icon warning circle"></i>
    <a href="/settings/authority">续费提醒：商业版服务即将在 {{plusExpireDay}} 过期，请及时续费。</a>
</div>

<!-- 升级提醒 -->
<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/clusters">
    升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本，系统正在尝试自动升级...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && monitorNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/monitorNodes">升级提醒：有 {{monitorNodeUpgradeInfo.count}} 个监控节点需要升级到 v{{monitorNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
<div class="ui icon message error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/userNodes">升级提醒：有 {{userNodeUpgradeInfo.count}} 个用户节点需要升级到 v{{userNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
<div class="ui icon message error" v-if="!isLoading && apiNodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/api">升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
<div class="ui icon message error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/ns/clusters">升级提醒：有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本，系统正在尝试自动升级...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/clusters/monitors/reporters">升级提醒：有 {{reportNodeUpgradeInfo.count}} 个区域监控终端需要升级到 v{{reportNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && authorityNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/authority/nodes">升级提醒：有 {{authorityNodeUpgradeInfo.count}} 个商业版认证节点需要升级到 v{{authorityNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>

<!-- 统计图表 -->
<div class="ui four columns grid" v-if="!isLoading">
    <div class="ui column">
        <h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
        <div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
    </div>

    <div class="ui column">
        <h4>边缘节点<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
        <div class="value">
            <span>{{dashboard.countNodes}}</span>个
            <span style="font-size: 1em" v-if="dashboard.countOfflineNodes > 0">/ <a href="/clusters" v-if="dashboard.canGoNodes"><span class="red" style="font-size: 1em">{{dashboard.countOfflineNodes}}离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineNodes}}离线</span></span>
        </div>
    </div>

    <div class="ui column">
        <h4>API节点<link-icon href="/api" v-if="dashboard.canGoSettings"></link-icon></h4>
        <div class="value">
            <span>{{dashboard.countAPINodes}}</span>个
            <span style="font-size: 1em" v-if="dashboard.countOfflineAPINodes > 0">/ <a href="/api" v-if="dashboard.canGoSettings"><span class="red" style="font-size: 1em">{{dashboard.countOfflineAPINodes}}离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineAPINodes}}离线</span></span>
        </div>
    </div>

    <div class="ui column">
        <h4>用户<link-icon href="/users" v-if="dashboard.canGoUsers"></link-icon></h4>
        <div class="value"><span>{{dashboard.countUsers}}</span>个
            <span style="font-size: 1em" v-if="dashboard.countOfflineUserNodes > 0">/ <a href="/settings/userNodes" v-if="dashboard.canGoSettings"><span class="red" style="font-size: 1em">{{dashboard.countOfflineUserNodes}}节点离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineUserNodes}}节点离线</span></span>
        </div>
    </div>

    <div class="ui column">
        <h4>服务<link-icon href="/servers" v-if="dashboard.canGoServers"></link-icon></h4>
        <div class="value"><span>{{dashboard.countServers}}</span>个
            <span style="font-size: 1em" v-if="dashboard.countAuditingServers > 0">/ <a href="/servers?auditingFlag=1" v-if="dashboard.canGoServers"><span class="red" style="font-size: 1em">{{dashboard.countAuditingServers}}审核</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countAuditingServers}}审核</span></span>
        </div>
    </div>

    <div class="ui column">
        <h4>本周流量</h4>
        <div class="value"><span>{{weekTraffic}}</span>{{weekTrafficUnit}}</div>
    </div>

    <div class="ui column">
        <h4>昨日流量</h4>
        <div class="value"><span>{{yesterdayTraffic}}</span>{{yesterdayTrafficUnit}}</div>
    </div>

    <div class="ui column no-border">
        <h4>今日流量</h4>
        <div class="value"><span>{{todayTraffic}}</span>{{todayTrafficUnit}}</div>
    </div>
</div>

<div class="ui divider"></div>

<!-- 流量地图 -->
<div v-if="!isLoading">
    <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
</div>
<div class="ui divider"></div>

<!-- 流量 -->
<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</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 class="ui divider"></div>

<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
</div>

<!-- 按小时统计访问量 -->
<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>

<!-- 域名排行 -->
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-domains-chart"></div>

<div class="ui divider"></div>

<!-- 节点排行 -->
<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-nodes-chart"></div>

<!-- 指标 -->
<div class="ui divider" v-if="metricCharts.length > 0"></div>
<metric-board>
    <metric-chart v-for="chart in metricCharts"
                  :key="chart.id"
                  :v-chart="chart.chart"
                  :v-stats="chart.stats"
                  :v-item="chart.item">
    </metric-chart>
</metric-board>