<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 "./history.js"
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import ChildLayout from "@/layouts/ChildLayout.vue";
import TButton from "@/components/ui/TButton.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import HTTPAccessLogBox from "@/components/server/HTTPAccessLogBox.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TColumn from "@/components/ui/TColumn.vue";
import ListTable from "@/components/common/ListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ChildLayout :ctx="ctx" :has-tab="true">
		<div v-if="!ctx.featureIsOn">
			<ServerFeatureRequired></ServerFeatureRequired>
		</div>
		<div v-if="ctx.featureIsOn">
			<div>
				<Navbar secondary>
					<template #tabs>
						<NavTab :href="ctx.path + '?serverId=' + ctx.serverId + '&day=' + ctx.day" :active="ctx.hasError == 0" name="所有日志"></NavTab>
						<NavTab :href="ctx.path + '?serverId=' + ctx.serverId + '&day=' + ctx.day + '&hasError=1'" :active="ctx.hasError > 0" name="错误日志"></NavTab>
					</template>
				</Navbar>

				<div>
					<form method="get" :action="ctx.path" autocomplete="off">
						<input type="hidden" name="serverId" :value="ctx.serverId"/>
						<div class="ui fields inline">
							<div class="ui field">
								<TDatePicker name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="ctx.day"/>
							</div>
							<div class="ui field">
								<TButton secondary="" type="submit">查找</TButton>
							</div>
						</div>
					</form>
				</div>
			</div>

			<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="false"></HTTPAccessLogBox>
						</template>
					</TColumn>
				</ListTable>
			</div>

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

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