<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 "./waf.js"
import "./waf.css"
import ChildLayout from "@/layouts/ChildLayout.vue";
import ColumnsGrid from "@/components/common/ColumnsGrid.vue";
import Cards from "@/components/common/Cards.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ChildLayout :ctx="ctx" :has-tab="true">
		<ColumnsGrid>
			<div class="ui column">
				<h5>今日拦截</h5>
				<div class="value"><span>{{ ctx.countDailyBlock }}</span>次</div>
			</div>

			<div class="ui column">
				<h5>今日验证码验证</h5>
				<div class="value"><span>{{ ctx.countDailyCaptcha }}</span>次</div>
			</div>

			<div class="ui column">
				<h5>今日记录</h5>
				<div class="value"><span>{{ ctx.countDailyLog }}</span>次</div>
			</div>

			<div class="ui column">
				<h5>本周拦截</h5>
				<div class="value"><span>{{ ctx.countWeeklyBlock }}</span>次</div>
			</div>

			<div class="ui column">
				<h5>本月拦截</h5>
				<div class="value"><span>{{ ctx.countMonthlyBlock }}</span>次</div>
			</div>
		</ColumnsGrid>

		<Cards>
			<CardView cols="1">
				<template #header>近15日趋势
					<span>
					<span class="color-span" :style="'background: ' + ctx.$utils.DefaultChartColor">全部</span>
					<span class="color-span" style="background: #F39494">拦截</span>
					<span class="color-span" style="background: #FBD88A">验证码</span>
					<span class="color-span" style="background: #879BD7">记录</span>
				</span>
				</template>
				<CardRow>
					<template #value>
						<div class="chart-box" id="daily-chart"></div>
					</template>
				</CardRow>
			</CardView>

			<CardView cols="1">
				<template #header>拦截类型分布</template>
				<CardRow>
					<template #value>
						<div class="chart-box" id="group-chart"></div>
					</template>
				</CardRow>
			</CardView>
		</Cards>
	</ChildLayout>
</template>

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