<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 "./buy.js"
import Menu from "@/views/servers/packages/@menu.vue";
import TButton from "@/components/ui/TButton.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TTag from "@/components/ui/TTag.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu active-tab="buy"></Menu>

	<form>
		<input type="hidden" name="packageId" :value="ctx.packageId"/>
		<input type="hidden" name="regionId" :value="ctx.regionId"/>
		<input type="hidden" name="periodId" :value="ctx.periodId"/>

		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">选择流量包规格 *</td>
				<td>
					<div v-if="ctx.packages.length > 0" class="label-group">
						<a v-for="p in ctx.packages" @click.prevent="ctx.selectPackage(p.id)"><TTag :secondary="p.id != ctx.packageId">{{p.size}}{{p.unit.toUpperCase().replace(/(.)B/, "$1iB")}}</TTag></a>
					</div>
					<span v-else class="red">没有流量包可供选择</span>
				</td>
			</tr>
			<tr>
				<td>选择区域 *</td>
				<td>
					<div v-if="ctx.regions.length > 0" class="label-group">
						<a v-for="region in ctx.regions" :class="{disabled: !ctx.hasRegionPrice(region.id)}" @click.prevent="ctx.selectRegion(region.id)"><TTag :secondary="!(region.id == ctx.regionId && ctx.hasRegionPrice(region.id))">{{region.name}}</TTag></a>
					</div>
					<span v-else class="red">没有区域可供选择</span>
				</td>
			</tr>
			<tr>
				<td>选择有效期 *</td>
				<td>
					<div v-if="ctx.periods.length > 0" class="label-group">
						<a v-for="period in ctx.periods" :class="{disabled: !ctx.hasPeriodPrice(period.id)}" @click.prevent="ctx.selectPeriod(period.id)"><TTag :secondary="!(period.id == ctx.periodId && ctx.hasPeriodPrice(period.id))">{{period.count}}{{period.unitName}}</TTag></a>
					</div>
					<span v-else class="red">没有有效期可供选择</span>
				</td>
			</tr>
			<tr>
				<td>流量包数量 *</td>
				<td>
					<div class="ui input">
						<TSelect name="count" v-model="ctx.count" @change="ctx.changeCount">
							<TOption v-for="i in 20" :value="i">{{i}}</TOption>
						</TSelect>
					</div>
				</td>
			</tr>
			<tr>
				<td>价格</td>
				<td>
					<span v-if="ctx.amount == 0" class="disabled">没有找到对应价格</span>
					<span v-if="ctx.amount > 0">{{ctx.amount}}元</span>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<TButton :disabled="ctx.amount <= 0" type="button" @click.prevent="ctx.goNext()">下一步</TButton>
	</form>
</template>

<style lang="postcss" scoped>
:deep(a.disabled .p-tag) {
	@apply bg-gray-50 text-gray-300 pointer-events-none;
}
</style>