<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 "./index.css"
import WarningMessage from "@/components/common/WarningMessage.vue";
import ColumnsGrid from "@/components/common/ColumnsGrid.vue";
import LoadingMessage from "@/components/common/LoadingMessage.vue";
import CardView from "@/components/common/CardView.vue";
import Cards from "@/components/common/Cards.vue";
import CardRow from "@/components/common/CardRow.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<WarningMessage v-if="ctx.emailVerificationMessage.length > 0">
		<a href="/settings/email-verify">{{ ctx.emailVerificationMessage }}</a></WarningMessage>
	<WarningMessage v-if="ctx.mobileVerificationMessage.length > 0">
		<a href="/settings/mobile-verify">{{ ctx.mobileVerificationMessage }}</a></WarningMessage>
	<WarningMessage v-if="!ctx.isVerified">您的账号正在审核中，请耐心等待完成，暂时不能使用相关功能。</WarningMessage>
	<WarningMessage v-if="!ctx.isIdentified"><a href="/settings/identity">实名认证</a>后才能使用相关功能。
	</WarningMessage>

	<LoadingMessage v-if="ctx.isLoading">数据加载中...</LoadingMessage>

	<ColumnsGrid class="ui columns grid counter-chart" :class="{'three columns': !ctx.uiConfig.showTrafficCharts || !ctx.uiConfig.showBandwidthCharts, 'four columns': ctx.uiConfig.showTrafficCharts && ctx.uiConfig.showBandwidthCharts }" v-if="!ctx.isLoading">
		<div class="ui column">
			<h5>加速网站数量</h5>
			<div class="value"><span>{{ ctx.dashboard.countServers }}</span>个</div>
		</div>

		<div class="ui column" v-if="ctx.uiConfig.showTrafficCharts">
			<h5>本月总流量</h5>
			<div class="value">
				<span>{{ ctx.dashboard.monthlyTrafficBytes }}</span>{{ ctx.dashboard.monthlyTrafficBytesUnit }}
			</div>
		</div>

		<div class="ui column" v-if="ctx.uiConfig.showBandwidthCharts">
			<h5>本月带宽峰值</h5>
			<div class="value">
				<span>{{ ctx.dashboard.monthlyPeekBandwidthBytes }}</span>{{ ctx.dashboard.monthlyPeekBandwidthBytesUnit }}
			</div>
		</div>

		<div class="ui column" v-if="ctx.uiConfig.showTrafficCharts">
			<h5>今日流量</h5>
			<div class="value">
				<span>{{ ctx.dashboard.dailyTrafficBytes }}</span>{{ ctx.dashboard.dailyTrafficBytesUnit }}
			</div>
		</div>

		<div class="ui column" v-if="ctx.uiConfig.showBandwidthCharts">
			<h5>今日带宽峰值</h5>
			<div class="value">
				<span>{{ ctx.dashboard.dailyPeekBandwidthBytes }}</span>{{ ctx.dashboard.dailyPeekBandwidthBytesUnit }}
			</div>
		</div>
	</ColumnsGrid>

	<Cards>
		<CardView v-if="ctx.posts && ctx.posts.length > 0">
			<template #header>最新活动</template>

			<CardRow class="!pb-1 !pt-0" v-for="post in ctx.posts">
				<template #value>
					<a :href="'/posts/post?postId=' + post.id" :target="(post.type == 'url') ? '_blank' : '_self'">
						<span class="gray" v-if="post.category && post.category.name && post.category.name.length > 0">[{{post.category.name}}]</span>
						{{post.subject}} <i class="pi pi-external-link tiny" v-if="post.type == 'url'"></i> <span class="gray small ml-1">{{post.createdTime}}</span>
					</a>
				</template>
			</CardRow>
		</CardView>


		<div v-if="ctx.uiConfig.showTrafficCharts && !ctx.isLoading">
			<CardView cols="1">
				<template #header>近 30 日流量趋势 <span class="text-base gray">（单位：字节）</span></template>
				<CardRow>
					<template #value>
						<div class="chart-box" id="daily-traffic-chart"></div>
					</template>
				</CardRow>
			</CardView>
		</div>

		<div v-if="ctx.uiConfig.showBandwidthCharts && !ctx.isLoading">
			<CardView cols="1">
				<template #header>近 30 日带宽趋势</template>
				<CardRow>
					<template #value>
						<div class="chart-box" id="daily-peek-bandwidth-chart"></div>
					</template>
				</CardRow>
			</CardView>
		</div>
	</Cards>
</template>

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