<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 "./ns.js"
import "./ns.css"
import LinkIcon from "@/components/common/LinkIcon.vue";
import ColumnsGrid from "@/components/common/ColumnsGrid.vue";
import CardView from "@/components/common/CardView.vue";

const ctx = ctxRef(new Context())

</script>

<template>

	<ColumnsGrid>
		<div class="ui column">
			<h5>域名
				<LinkIcon href="/ns/domains"></LinkIcon>
			</h5>
			<div class="value"><span>{{ ctx.board.countDomains }}</span>个</div>
		</div>
		<div class="ui column">
			<h5>记录
				<LinkIcon href="/ns/domains"></LinkIcon>
			</h5>
			<div class="value"><span>{{ ctx.board.countRecords }}</span>个</div>
		</div>
		<div class="ui column">
			<h5>线路
				<LinkIcon href="/ns/routes"></LinkIcon>
			</h5>
			<div class="value"><span>{{ ctx.board.countRoutes }}</span>个</div>
		</div>
		<div class="ui column with-border">
			<h5>套餐
				<LinkIcon href="/ns/plans"></LinkIcon>
			</h5>
			<div class="value"><span>{{ ctx.board.countNodes }}</span>
				<span v-if="ctx.board.planName.length > 0">{{ ctx.board.planName }}</span>
				<span v-if="ctx.board.planName.length == 0">未购套餐</span>
			</div>
		</div>
	</ColumnsGrid>

	<!-- 域名排行 -->
	<CardView cols="1">
		<template #header>域名访问排行 <span class="text-base gray">（24小时）</span></template>
		<div class="chart-box" id="top-domains-chart"></div>
	</CardView>
</template>

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