<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import HTTPAccessLogBox from "@/components/server/HTTPAccessLogBox.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import TButton from "@/components/ui/TButton.vue";
import TColumn from "@/components/ui/TColumn.vue";
import ListTable from "@/components/common/ListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<form method="get" :action="ctx.path" autocomplete="off">
		<div class="fields inline">
			<div v-if="ctx.servers.length > 0">
				<TSelect name="serverId" v-model="ctx.serverId">
					<TOption value="0">[选择域名]</TOption>
					<TOption v-for="server in ctx.servers" :value="server.id">{{ server.serverName }}</TOption>
				</TSelect>
			</div>
			<div>
				<TDatePicker name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="ctx.day"/>
			</div>
			<div class="ui field">
				<TButton secondary="" size="small" type="submit">查找</TButton>
			</div>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.accessLogs.length == 0">暂时还没有日志。</NotFoundInfo>

	<div v-if="ctx.accessLogs.length > 0" class="mt-4">
		<ListTable :items="ctx.accessLogs" dataKey="requestId">
			<TColumn header-class="hidden">
				<template #body="{data: accessLog}">
					<HTTPAccessLogBox :v-access-log="accessLog" :v-keyword="ctx.keyword" :v-show-server-link="true"></HTTPAccessLogBox>
				</template>
			</TColumn>
		</ListTable>
	</div>

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

<style lang="postcss" scoped>
</style>