{$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>
<link rel="stylesheet" href="./index.css">
{$end}

<!-- <first-menu>
    <menu-item href="/servers">网站列表</menu-item>
    <span class="item disabled">|</span>
    <menu-item :href="'/servers/server?serverId=' + server.id" active="true">"{{server.name}}"看板</menu-item>
    <span class="separator">|</span>
    <more-items-angle
            :v-data-url="'/servers/nearby?serverId=' + server.id"
            :v-url="'/servers/server/boards?serverId=${serverId}'"></more-items-angle>
</first-menu> -->

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

    <div class="dashboard-content" v-if="!isLoading">
        <!-- 总体统计 -->
        <div class="stats-card-grid">
            <div class="stat-card">
                <div class="stat-icon blue">
                    <i class="pi pi-chart-line"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        <bits-var :v-bits="lastMonthlyPeekBandwidthBits"></bits-var>
                    </div>
                    <div class="stat-label">
                        {{t('index_上月峰值带宽_0101')}}
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon green">
                    <i class="pi pi-chart-line"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        <bits-var :v-bits="monthlyPeekBandwidthBits"></bits-var>
                    </div>
                    <div class="stat-label">
                        {{t('index_当月峰值带宽_0101')}}
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon orange">
                    <i class="pi pi-chart-line"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        <bits-var :v-bits="dailyPeekBandwidthBits"></bits-var>
                    </div>
                    <div class="stat-label">
                        {{t('index_当天峰值带宽_0101')}}
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon red">
                    <i class="pi pi-chart-line"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        <bits-var :v-bits="minutelyPeekBandwidthBits"></bits-var>
                    </div>
                    <div class="stat-label">
                        {{t('index_当前峰值带宽_0101')}}
                    </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">
                        <span v-if="dailyCountIPs > 0">{{dailyCountIPsFormat}}</span>
                        <span v-else>0</span>
                    </div>
                    <div class="stat-label">
                        {{t('index_当天独立IP_0101')}}
                    </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">
                        <bytes-var :v-bytes="dailyTrafficBytes"></bytes-var>
                    </div>
                    <div class="stat-label">
                        {{t('index_当天流量_0101')}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表展示区域 -->
        <div class="charts-section">
            <!-- 流量地图 -->
            <div class="chart-container map">
                <div class="chart-card">
                    <div class="title-box">
                        <h4>{{t('index_流量地图_0101')}}</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="card-header">
                        <h4>{{t('index_带宽统计_0101')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" href="" :class="{active: bandwidthTab == 'minutely'}" @click.prevent="selectBandwidthTab('minutely')">{{t('index_最近带宽_0101')}}<span class="small grey">（{{t('index_比特_0101')}}）</span></a>
                            <a class="item" href="" :class="{active: bandwidthTab == 'hourly'}" @click.prevent="selectBandwidthTab('hourly')">{{t('index_按小时带宽_0101')}}<span class="small grey">（{{t('index_比特_0101')}}）</span></a>
                            <a class="item" href="" :class="{active: bandwidthTab == 'daily'}" @click.prevent="selectBandwidthTab('daily')">{{t('index_按天带宽_0101')}}<span class="small grey">（{{t('index_比特_0101')}}）</span></a>
                            <a class="item" :href="'/servers/traffic-stats?serverId=' + server.id">{{t('index_更多_0101')}}</a>
                        </div>
                        <div class="chart-box" id="bandwidth-chart"></div>
                    </div>
                </div>
            </div>

            <!-- 流量图表 -->
            <div class="chart-container">
                <div class="chart-card">
                    <div class="card-header">
                        <h4>{{t('index_流量趋势_0101')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" href="" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">{{t('index_24小时流量趋势_0101')}}</a>
                            <a class="item" href="" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">{{t('index_15天流量趋势_0101')}}</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('index_访问量趋势_0101')}}</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ui menu text">
                            <a class="item" href="" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">{{t('index_24小时访问量趋势_0101')}}</a>
                            <a class="item" href="" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">{{t('index_15天访问量趋势_0101')}}</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('index_域名访问排行_0101')}} <span>（{{t('index_24小时_0101')}}）</span></h4>
                    </div>
                    <div class="chart-content">
                        <div class="chart-box" id="top-domains-chart">
                            <div class="loading-message">
                                <i class="pi pi-spin pi-spinner"></i> {{t('index_数据加载中_0101')}}...
                            </div>
                        </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>