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

<div style="margin-top: 0.6em"></div>
<form class="ui form">
    <div class="ui fields inline">
        <div class="ui field">
            <datepicker name="dayFrom" :placeholder="t('index_开始日期_0101')" v-model="dayFrom" @change="changeDayFrom"></datepicker>
        </div>
        <div class="ui field">
            <datepicker name="dayTo" :placeholder="t('index_结束日期_0101')" v-model="dayTo" @change="changeDayTo"></datepicker>
        </div>
        <div class="ui field">
            <user-selector :v-user-id="userId" @change="changeUser"></user-selector>
        </div>
        <div class="ui field" v-if="userId > 0">
            <span v-if="servers.length == 0" class="disabled">{{t('index_暂无网站_0101')}}</span>
            <div v-else>
                <combo-box :v-items="servers" name="serverId" @change="changeServer" :placeholder="t('index_全部网站_0101')+'（' + (servers.length-1) + '）'"></combo-box>
            </div>
        </div>
        <div class="ui field" v-if="userId > 0 && serverId == 0 && regions.length > 0">
            <b-select
                name="regionId"
                v-model="regionId"
                @change="changeRegion"
                :options="[
                    {label: t('index_所有区域_0101'), value: '0'},
                    ...regions.map(region => ({
                        label: region.name,
                        value: region.id,
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="regionId" v-model="regionId" @change="changeRegion">
                <option value="0">所有区域</option>
                <option v-for="region in regions" :value="region.id">{{region.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="button" @click.prevent="startSearch">{{t('index_查询_0101')}}</button>
        </div>
    </div>
</form>

<div class="margin"></div>

<div class="ui message" v-if="isLoading">{{t('index_加载中_0101')}}...</div>

<columns-grid v-if="result != null">
    <div class="ui column">
        <h4>{{t('index_带宽峰值_0101')}}</h4>
        <div class="value">
            <span>{{result.maxBandwidthBitsFormat[0]}}</span>
            {{result.maxBandwidthBitsFormat[1]}}
            <br/>
            <span v-if="result.maxBandwidthTime.length > 0" class="small grey">{{result.maxBandwidthTime}}:00</span>
            <span v-else>&nbsp;<!-- placeholder --></span>
        </div>
    </div>
    <div class="ui column">
        <h4>{{t('index_95th带宽_0101')}}</h4>
        <div class="value">
            <span>{{result.bandwidth95thBitsFormat[0]}}</span>
            {{result.bandwidth95thBitsFormat[1]}}
        </div>
    </div>
    <div class="ui column">
        <h4>{{t('index_总流量_0101')}}</h4>
        <div class="value">
            <span>{{result.totalTrafficBytesFormat[0]}}</span>
            {{result.totalTrafficBytesFormat[1]}}
        </div>
    </div>
    <div class="ui column with-border">
        <h4>{{t('index_总请求数_0101')}}</h4>
        <div class="value"><span>{{result.totalTrafficRequests}}</span>{{t('index_次_0101')}}</div>
    </div>
</columns-grid>

<!-- 查询结果 -->
<div v-if="result != null" style="margin-top: 0.6em">
    <!-- 菜单 -->
    <first-menu >
        <menu-item :class="{active: tab == 'chart'}" @click.prevent="selectTab('chart')">{{t('index_图表_0101')}} &nbsp;<i class="icon chart area small"></i></menu-item>
        <menu-item :class="{active: tab == 'table'}" @click.prevent="selectTab('table')">{{t('index_表格_0101')}} &nbsp;<i class="icon table small"></i></menu-item>
        <span class="item disabled">|</span>
        <menu-item :href="'.download?dayFrom=' + dayFrom + '&dayTo=' + dayTo + '&userId=' + userId + '&serverId=' + serverId" target="_blank">{{t('index_下载_0101')}} <i class="icon download small"></i></menu-item>
        <menu-item v-for="(r, index) in dayRanges" :class="{active: dayFrom == r.dayFrom && dayTo == r.dayTo, right: index == 0}" @click.prevent="selectDay(r.dayFrom, r.dayTo)">{{r.name}}</menu-item>
    </first-menu>

    <!-- 表格 -->
    <div class="table-box scroll-box" v-if="result != null" v-show="tab == 'table'">
        <table class="ui table selectable celled">
            <thead>
                <tr>
                    <th>{{t('index_时间_0101')}}</th>
                    <th>{{t('index_带宽_0101')}}（Mbps）</th>
                    <th>{{t('index_带宽_0101')}}（Gbps）</th>
                </tr>
            </thead>
            <tr v-for="stat in result.bandwidthStats">
                <td>{{stat.day.substring(0, 4)}}-{{stat.day.substring(4, 6)}}-{{stat.day.substring(6)}} {{stat.time.substring(0, 2)}}:{{stat.time.substring(2)}}</td>
                <td>{{stat.mbps}}</td>
                <td>{{stat.gbps}}</td>
            </tr>
        </table>
    </div>

    <!-- 图表 -->
    <div class="chart-box" id="bandwidth-chart" v-show="result != null && tab == 'chart'"></div>
</div>

<b-empty v-if="userId == 0">
    {{t('index_请选择要查看的用户_0101')}}。
</b-empty>