{$layout}
{$template "/datepicker"}

<first-menu>
    <menu-item :href="path + '?' + query('')" :active="hasError == 0 && hasWAF == 0"> {{t('index_所有日志_0101')}}</menu-item>
    <menu-item :href="path + '?' + query('hasError=1')" :active="hasError > 0"> {{t('index_错误日志_0101')}}</menu-item>
    <menu-item :href="path + '?' + query('hasWAF=1')" :active="hasWAF > 0"> {{t('index_WAF日志_0101')}}</menu-item>
    <span class="item disabled">|</span>
    <menu-item :href="'/servers/logs/settings'" code="settings"> {{t('index_设置_0101')}}</menu-item>
</first-menu>

<!-- 日志查询区域 -->
<form class="ui form" method="get" :action="path" style="padding: 0 1rem 1rem 1rem;">
    <input type="hidden" name="serverId" :value="serverId" />
    <input type="hidden" name="hasError" :value="hasError" />
    <input type="hidden" name="hasWAF" :value="hasWAF" />

    <div class="ui fields inline">
        <http-access-log-search-box :v-cluster-id="clusterId" :v-node-id="nodeId" :v-ip="ip" :v-domain="domain"
            :v-keyword="keyword">
            <div class="ui field">
                <div class="ui right labeled input">
                    <input type="text" name="day" maxlength="10" :placeholder="t('index_选择日期_0101')" style="width:7.8em" id="day-input"
                        v-model="day" />
                    <span class="ui label"> {{t('index_日_0101')}}</span>
                </div>
            </div>
            <div class="ui field">
                <div class="ui right labeled input">
                    <input type="text" name="hour" maxlength="2" style="width: 3.5em" v-model="hour" />
                    <span class="ui label"> {{t('index_时_0101')}}</span>
                </div>
            </div>
        </http-access-log-search-box>
    </div>

    <http-access-log-partitions-box :v-partition="partition" :v-day="day" :v-query="currentQuery"
        style="margin-top: 1rem;"></http-access-log-partitions-box>
</form>

<warning-message v-if="isSlowQuery" style="margin: 0 1rem 1rem;">
   {{t('index_看起来你的访问日志查询非常慢_0101')}}（{{slowQueryCost}}s） ， {{t('index_建议_0101')}}<span v-if="domain.length == 0"> 1）{{t('index_指定具体域名查询_0101')}}；2）</span>
    {{t('index_通过添加新的_0101')}} <a href="/settings/db-nodes">[{{t('index_日志节点_0101')}}]</a> {{t('index_来分散存储访问日志_0101')}}。
</warning-message>

<!-- 空状态显示 -->
<div v-if="accessLogs.length == 0">
    <empty-chart :description="t('index_暂时还没有访问日志_0101')" height="15em"></empty-chart>
</div>

<!-- 日志列表区域 -->
<div v-if="accessLogs.length > 0">
    <div class="margin"></div>

    <div class="config-section">
        <div class="section-title">
            <i class="pi pi-list"></i>
            {{t('index_日志列表_0101')}}
        </div>

        <div class="headers-table-box">
            <table class="ui table selectable celled">
                <thead>
                    <tr>
                        <th>{{t('index_访问日志详情_0101')}}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 这里之所以需要添加 :key，是因为要不然不会刷新显示 -->
                    <tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
                        <td><http-access-log-box :v-access-log="accessLog" :v-keyword="keyword"
                                :v-show-server-link="true"></http-access-log-box></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="page-box" style="margin: 1rem; display: flex; justify-content: space-between; align-items: center;">
            <div class="pagination">
                <a class="item" :class="{disabled: !hasPrev}"
                    :href="hasPrev ? path + '?' + query('requestId=' + lastRequestId + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&partition=' + partition) : 'javascript:;'">
                    <i class="pi pi-angle-left"></i> {{t('index_上一页_0101')}}
                </a>
                <a class="item" :class="{disabled: !hasMore}"
                    :href="hasMore ? path + '?' + query('requestId=' + nextRequestId + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&partition=' + partition) : 'javascript:;'">
                    {{t('index_下一页_0101')}} <i class="pi pi-angle-right"></i>
                </a>
            </div>
            <div>
                <page-size-selector></page-size-selector>
            </div>
        </div>
    </div>
</div>