<script setup>
// Copyright 2025 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 "./index.css"
import ChildLayout from "@/layouts/ChildLayout.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import CardView from "@/components/common/CardView.vue";
import Cards from "@/components/common/Cards.vue";
import RequestsMenu from "./@requests_menu.vue"

const ctx = ctxRef(new Context())

</script>

<template>
	<ChildLayout :ctx="ctx" :has-tab="true">
		<div v-if="!ctx.statIsOn">
			<WarningMessage>
				要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + ctx.serverId">[点击这里]</a>修改配置。
			</WarningMessage>
		</div>

		<div v-if="ctx.statIsOn">
			<RequestsMenu :ctx="ctx" active-tab="minutely"></RequestsMenu>

			<Cards>
				<CardView cols="1">
					<template #header>请求数统计<span class="text-base gray">（即时）</span></template>
					<div class="chart-box" id="minutely-requests-chart"></div>
				</CardView>

				<CardView cols="1">
					<template #header>流量统计<span class="text-base gray">（即时）</span></template>
					<div class="chart-box" id="minutely-traffic-chart"></div>
				</CardView>
			</Cards>
		</div>
	</ChildLayout>
</template>

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