{$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: t('ns_clusters_accessLogs_index@记录类型'), value: ''},
                    ...recordTypes.map(r => ({
                        label: r.type,
                        value: r.type,
                    }))
                ]"
            ></b-select>

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

<b-empty v-if="accessLogs.length == 0">{{t('ns_clusters_accessLogs_index@暂时还没有访问日志')}}</b-empty>

<b-table :data="accessLogs" :columns="columns" :key="accessLogs.length > 0 ? accessLogs[0].requestId : 0" v-if="accessLogs.length > 0">
    <template v-slot:cluster="scope">
        <div v-if="scope.row.node.cluster != null">
            <link-icon :href="'/ns/clusters/cluster?clusterId=' + scope.row.node.cluster.id">{{scope.row.node.cluster.name}}</link-icon>
        </div>
    </template>
    <template v-slot:node="scope">
        <div v-if="scope.row.node != null">
            <link-icon :href="'/ns/clusters/cluster/node?clusterId=' + scope.row.node.cluster.id + '&nodeId=' + scope.row.node.id">{{scope.row.node.name}}</link-icon>
        </div>
    </template>
    <template v-slot:domain="scope">
        <div v-if="scope.row.domain != null">
            <link-icon :href="'/ns/domains/domain?domainId=' + scope.row.domain.id">{{scope.row.domain.name}}</link-icon>
        </div>
    </template>
    <template v-slot:questionType="scope">
        {{scope.row.questionType}}
    </template>
    <template v-slot:summary="scope">
        <ns-access-log-box :v-access-log="scope.row" :v-keyword="keyword"></ns-access-log-box>
    </template>
</b-table>

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