{$layout} {$var "header"}
<!-- datepicker -->
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/pikaday.js"></script>
<link rel="stylesheet" href="/js/pikaday.css" />
<link rel="stylesheet" href="/js/pikaday.theme.css" />
<link rel="stylesheet" href="/js/pikaday.triangle.css" />
{$end}

<div class="margin"></div>
<form method="get" class="ui form small" :action="path" autocomplete="off">
  <div style="display: flex; align-items: center; gap: 10px">
    <div class="item" v-if="servers.length > 0">
      <b-select
        name="serverId"
        v-model="serverId"
        :options="[
					{label: '[选择域名]', value: '0'},
					...servers.map(server => ({
							label: server.serverName,
							value: server.id,
					}))
				]"
      ></b-select>
      <!-- <select class="ui dropdown" name="serverId" v-model="serverId">
        <option value="0">[选择域名]</option>
        <option v-for="server in servers" :value="server.id">
          {{server.serverName}}
        </option>
      </select> -->
    </div>
    <div class="item right">
      <div class="ui fields inline">
        <div class="ui field">
          <!-- <input
            type="text"
            name="day"
            maxlength="10"
            placeholder="选择日期"
            style="width: 7.8em"
            id="day-input"
            v-model="day"
          /> -->
          <p-calendar name="day" placeholder="选择日期" date-format="yy-mm-dd" v-model="day" :show-button-bar="true">
            <template #date="{date}">
              <span>{{date.day}}</span>
            </template>
          </p-calendar>
        </div>
        <div class="ui field">
          <button class="ui button small" type="submit">查找</button>
        </div>
      </div>
    </div>
  </div>
</form>

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

<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"></http-access-log-box>
    </td>
  </tr>
</table>

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