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

<first-menu>
    <menu-item :href="path + '?serverId=' + serverId + '&day=' + day + '&keyword=' + keyword + '&ip=' + ip + '&domain=' + domain" :active="hasError == 0 && hasWAF == 0">所有日志</menu-item>
    <menu-item :href="path + '?serverId=' + serverId + '&day=' + day + '&hasError=1' + '&keyword=' + keyword + '&ip=' + ip + '&domain=' + domain" :active="hasError > 0">错误日志</menu-item>
    <menu-item :href="path + '?serverId=' + serverId + '&day=' + day + '&hasWAF=1' + '&keyword=' + keyword + '&ip=' + ip + '&domain=' + domain" :active="hasWAF > 0">WAF日志</menu-item>
</first-menu>

<form method="get" class="ui form small" :action="path">
    <input type="hidden" name="serverId" :value="serverId"/>
    <input type="hidden" name="hasError" :value="hasError"/>
    <input type="hidden" name="hasWAF" :value="hasWAF"/>
    <http-access-log-search-box :v-ip="ip" :v-domain="domain" :v-keyword="keyword">
        <div class="ui field">
            <input type="text" name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="day"/>
        </div>
    </http-access-log-search-box>
</form>

<p class="comment" v-if="accessLogs.length == 0">暂时还没有访问日志。</p>

<table class="ui table selectable" v-if="accessLogs.length > 0">
    <!-- 这里之所以需要添加 :key，是因为要不然不会刷新显示 -->
    <tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
        <td><http-access-log-box :v-access-log="accessLog" :v-keyword="keyword"></http-access-log-box></td>
    </tr>
</table>

<div v-if="accessLogs.length > 0">
    <a :href="path + '?serverId=' + serverId + '&requestId=' + lastRequestId + '&day=' + day + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&keyword=' + keyword + '&ip=' + ip + '&domain=' + domain" v-if="hasPrev">上一页</a>
    <span v-else class="disabled">上一页</span>
    <span class="disabled">&nbsp; | &nbsp;</span>
    <a :href="path + '?serverId=' + serverId + '&requestId=' + nextRequestId + '&day=' + day + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&keyword=' + keyword + '&ip=' + ip + '&domain=' + domain" v-if="hasMore">下一页</a>
    <span v-else class="disabled">下一页</span>
</div>