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

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

<div class="dashboard-container">
    <div class="dashboard-content">
        <!-- 加载中 -->
        <div class="loading-wrapper" v-if="isLoading">
            <i class="pi pi-spin pi-spinner"></i> {{t('clusters_cluster_boards_index@数据加载中')}}
        </div>

        <!-- 总体统计 -->
        <div class="stats-card-grid" v-if="!isLoading">
            <div class="stat-card">
                <div class="stat-icon green">
                    <i class="pi pi-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value"><span class="green">{{board.countActiveNodes}}</span>{{t('个')}}</div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@在线节点')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon red">
                    <i class="pi pi-times-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value"><span :class="{red: board.countInactiveNodes > 0}">{{board.countInactiveNodes}}</span>{{t('个')}}</div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@离线节点')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon purple">
                    <i class="pi pi-globe"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{board.countServers}}{{t('个')}}</div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@网站')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon orange">
                    <i class="pi pi-users"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{board.countUsers}}{{t('个')}}</div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@用户')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon blue">
                    <i class="pi pi-chart-bar"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{monthlyTrafficFormat[0]}}<span class="stat-unit">{{monthlyTrafficFormat[1]}}</span></div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@当月流量')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon cyan">
                    <i class="pi pi-chart-bar"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{yesterdayTrafficFormat[0]}}<span class="stat-unit">{{yesterdayTrafficFormat[1]}}</span></div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@昨日流量')}}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon yellow">
                    <i class="pi pi-chart-bar"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{todayTrafficFormat[0]}}<span class="stat-unit">{{todayTrafficFormat[1]}}</span></div>
                    <div class="stat-label">{{t('clusters_cluster_boards_index@今日流量')}}</div>
                </div>
            </div>
        </div>

        <div class="charts-section" v-if="!isLoading">
            <!-- 流量图表 -->
            <div class="chart-container">
                <div class="chart-card">
                    <div class="card-header">
                        <h4> {{t('clusters_cluster_boards_index@流量趋势')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">{{t('clusters_cluster_boards_index@24小时流量趋势')}}</a>
                            <a class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">{{t('clusters_cluster_boards_index@15天流量趋势')}}</a>
                        </div>
                        <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('clusters_cluster_boards_index@访问量趋势')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">{{t('clusters_cluster_boards_index@24小时访问量趋势')}}</a>
                            <a class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">{{t('clusters_cluster_boards_index@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>
                    </div>
                </div>
            </div>

            <!-- 域名排行 -->
            <div class="chart-container">
                <div class="chart-card">
                    <div class="card-header">
                        <h4> {{t('clusters_cluster_boards_index@域名访问排行')}} <span>{{t('clusters_cluster_boards_index@24小时')}}</span></h4>
                    </div>
                    <div class="chart-content">
                        <div class="chart-box" id="top-domains-chart">
                            <div class="loading-wrapper">
                                <i class="pi pi-spin pi-spinner"></i> {{t('clusters_cluster_boards_index@数据加载中')}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

            <!-- 节点状态 -->
            <div class="chart-container">
                <div class="chart-card">
                    <div class="card-header">
                        <h4>{{t('clusters_cluster_boards_index@节点状态')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">{{t('clusters_cluster_boards_index@节点CPU')}}</a>
                            <a class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">{{t('clusters_cluster_boards_index@节点内存')}}</a>
                            <a class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">{{t('clusters_cluster_boards_index@节点负载')}}</a>
                        </div>
                        <div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
                        <div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
                        <div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></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">
            </metric-chart>
        </div>
    </div>
</div>