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

<div class="margin"></div>
<form method="get" class="ui form small" :action="path" autocomplete="off">
    <div class="ui fields inline">
        <div class="ui field">
            <ns-cluster-combo-box :v-cluster-id="clusterId"></ns-cluster-combo-box>
        </div>
        <div class="ui field">
            <b-select
                name="recordType"
                v-model="recordType"
                :options="[
                    {label: '[记录类型]', value: ''},
                    ...recordTypes.map(r => ({
                        label: r.type,
                        value: r.type,
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="recordType" v-model="recordType">
                <option value="">[记录类型]</option>
                <option v-for="r in recordTypes" :value="r.type">{{r.type}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="IP、域名、记录等..."/>
        </div>
        <div class="ui field">
            <input type="text" name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="day"/>
        </div>
        <div class="ui field">
            <button class="ui button small" type="submit">查找</button>
            &nbsp;
            <a :href="'/ns/clusters/accessLogs?day=' + day" v-if="clusterId > 0 || keyword.length > 0 || recordType.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

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

<table class="ui table selectable celled" v-if="accessLogs.length > 0">
    <thead>
        <tr>
            <th class="two wide">集群</th>
            <th class="two wide">节点</th>
            <th class="two wide">域名</th>
            <th style="width: 6em">类型</th>
            <th>概要</th>
        </tr>
    </thead>
    <tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
        <td>
            <div v-if="accessLog.node.cluster != null">
                <link-icon :href="'/ns/clusters/cluster?clusterId=' + accessLog.node.cluster.id">{{accessLog.node.cluster.name}}</link-icon>
            </div>
        </td>
        <td>
            <div v-if="accessLog.node != null">
                <link-icon :href="'/ns/clusters/cluster/node?clusterId=' + accessLog.node.cluster.id + '&nodeId=' + accessLog.node.id">{{accessLog.node.name}}</link-icon>
            </div>
        </td>
        <td>
            <div v-if="accessLog.domain != null">
                <link-icon :href="'/ns/domains/domain?domainId=' + accessLog.domain.id">{{accessLog.domain.name}}</link-icon>
            </div>
        </td>
        <td>{{accessLog.questionType}}</td>
        <td><ns-access-log-box :v-access-log="accessLog" :v-keyword="keyword"></ns-access-log-box></td>
    </tr>
</table>

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