<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 "./providers.js"
import "./providers.css"
import WarningMessage from "@/components/common/WarningMessage.vue";
import ChildLayout from "@/layouts/ChildLayout.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">
		<div v-if="!ctx.statIsOn">
			<WarningMessage>
				要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + ctx.serverId">[点击这里]</a>修改配置。
			</WarningMessage>
		</div>

		<div v-if="ctx.statIsOn">
			<Cards>
				<CardView cols="1">
					<template #header>运营商排行</template>
					<CardRow>
						<template #value>
							<div class="chart-box" id="provider-chart"></div>
						</template>
					</CardRow>
				</CardView>
			</Cards>
		</div>
	</ChildLayout>
</template>

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