<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 "./prices.js"
import Menu from "@/views/servers/fee/@menu.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu :ctx="ctx" active-tab="price"></Menu>

	<Navbar secondary>
		<template #tabs>
			<NavTab v-if="ctx.supportBandwidth" :active="ctx.priceType == 'bandwidth'" @click.prevent="ctx.setPriceType('bandwidth')" name="带宽价格"></NavTab>
			<NavTab v-if="ctx.supportTraffic" :active="ctx.priceType == 'traffic'" @click.prevent="ctx.setPriceType('traffic')" name="流量价格"></NavTab>
		</template>
	</Navbar>

	<!-- 带宽 -->
	<div v-if="ctx.supportBandwidth && ctx.priceType == 'bandwidth'">
		<CardView cols="1">
			<CardRow>
				<template #name>带宽基础价格</template>
				<template #value>{{ ctx.bandwidthPrices.base }}元/Mbps</template>
			</CardRow>
			<CardRow>
				<template #name>带宽百分位</template>
				<template #value> {{ ctx.bandwidthPrices.percentile }}th
					<p class="comment" v-if="ctx.bandwidthPrices.percentile < 100">采用计费周期内第{{ ctx.bandwidthPrices.percentile }}%个计费点作为计费依据。</p>
					<p class="comment" v-else>采用计费周期内最大峰值带宽作为计费依据。</p>
				</template>
			</CardRow>
			<CardRow no-hover v-if="ctx.bandwidthPrices.ranges != null && ctx.bandwidthPrices.ranges.length > 0">
				<template #name>基础阶梯价格</template>
				<template #value>
					<table class="ui table selectable celled" style="width: 20em">
						<thead class="full-width">
						<tr>
							<th>带宽区间</th>
							<th>单价</th>
						</tr>
						</thead>
						<tbody>
						<tr v-for="range in ctx.bandwidthPrices.ranges">
							<td>
								<span v-if="range.minMB == 0">0bps</span><span v-else>{{ ctx.formatMB(range.minMB) }}</span>-{{ ctx.formatMB(range.maxMB) }}
							</td>
							<td>{{ range.pricePerMB }}元/Mbps</td>
						</tr>
						</tbody>
					</table>
				</template>
			</CardRow>
		</CardView>

		<div v-if="ctx.bandwidthPrices.supportRegions && ctx.regions.length > 0 && ctx.bandwidthItems.length > 0">
			<h5 class="group-header">区域带宽价格</h5>

			<DefinitionTable class="celled">
				<thead class="full-width">
				<tr>
					<th class="two wide">区域\带宽区间</th>
					<th v-for="item in ctx.bandwidthItems" class="center">
						{{ item.name }}
						<br/>
						<span>{{ item.minSize }}-{{ item.maxSize }}</span>
					</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="region in ctx.regions" v-show="region.supportBandwidth">
					<td class="">{{ region.name }}</td>
					<td v-for="item in ctx.bandwidthItems" class="center">
						<div>
							<span v-if="region.prices[item.id.toString()] != null">¥{{ region.prices[item.id.toString()] }}元/Mbps &nbsp;</span>
							<span v-else class="disabled">[基础阶梯价格]</span>
						</div>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>
	</div>

	<!-- 流量 -->
	<div v-if="ctx.supportTraffic && ctx.priceType == 'traffic'">
		<CardView>
			<CardRow full>
				<template #name>流量基础价格</template>
				<template #value>{{ ctx.trafficPrices.base }}元/GiB</template>
			</CardRow>
			<CardRow full no-hover v-if="ctx.trafficPrices.ranges != null && ctx.trafficPrices.ranges.length > 0">
				<template #name>基础阶梯价格</template>
				<template #value>
					<table class="ui table selectable celled" style="width: 20em">
						<thead class="full-width">
						<tr>
							<th>流量区间</th>
							<th>单价</th>
						</tr>
						</thead>
						<tbody>
						<tr v-for="range in ctx.trafficPrices.ranges">
							<td>
								<span v-if="range.minGB == 0">0B</span><span v-else>{{ ctx.formatGB(range.minGB) }}</span>-{{ ctx.formatGB(range.maxGB) }}
							</td>
							<td>{{ range.pricePerGB }}元/GiB</td>
						</tr>
						</tbody>
					</table>
				</template>
			</CardRow>
		</CardView>

		<div v-if="ctx.trafficPrices.supportRegions && ctx.regions.length > 0 && ctx.trafficItems.length > 0">
			<h5 class="group-header">区域流量价格</h5>

			<DefinitionTable class="celled">
				<thead class="full-width">
				<tr>
					<th class="two wide">区域\流量区间</th>
					<th v-for="item in ctx.trafficItems" class="center">
						{{ item.name }}
						<br/>
						<span>{{ item.minSize }}-{{ item.maxSize }}</span>
					</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="region in ctx.regions" v-show="region.supportTraffic">
					<td class="">{{ region.name }}</td>
					<td v-for="item in ctx.trafficItems" class="center">
						<div>
							<span v-if="region.prices[item.id.toString()] != null">¥{{ region.prices[item.id.toString()] }}元/GiB &nbsp;</span>
							<span v-else class="disabled">[基础阶梯价格]</span>
						</div>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>
	</div>
</template>

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