<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 ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import HTTPAccessLogBox from "@/components/server/HTTPAccessLogBox.vue";
import ChildLayout from "@/layouts/ChildLayout.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ChildLayout :ctx="ctx" :has-tab="true">
		<div v-if="!ctx.featureIsOn">
			<ServerFeatureRequired></ServerFeatureRequired>
		</div>
		<div class="ctx.featureIsOn">
			<NotFoundInfo v-if="ctx.isLoaded && 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>
	</ChildLayout>
</template>

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