<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 TStepView from "@/components/ui/TStepView.vue";
import TStep from "@/components/ui/TStep.vue";
import TSteps from "@/components/ui/TSteps.vue";
import PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TTag from "@/components/ui/TTag.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<!-- 步骤 -->
	<TStepView step="selectInstance">
		<TSteps>
			<TStep code="selectInstance">
				<a href="/anti-ddos/packages">选择实例规格</a>
			</TStep>
			<TStep code="pay">支付</TStep>
		</TSteps>
	</TStepView>

	<PostForm action="$" @success="ctx.success" class="mt-2">
		<input type="hidden" name="packageId" :value="ctx.selectedPackageId"/>
		<input type="hidden" name="periodId" :value="ctx.selectedPeriodId"/>

		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">选择线路 *</td>
				<td>
					<div class="label-group">
						<a v-for="network in ctx.allNetworks" @click.prevent="ctx.selectNetwork(network.id)">
							<TTag :secondary="network.id != ctx.selectedNetworkId">{{ network.name }}</TTag>
						</a>
					</div>

					<template v-for="network in ctx.allNetworks">
						<p class="comment" v-if="network.id == ctx.selectedNetworkId && network.description.length > 0">{{ network.name }}：{{ network.description }}</p>
					</template>
				</td>
			</tr>
			<tr>
				<td>选择防护带宽 *</td>
				<td>
					<div class="label-group">
						<template v-for="protectionBandwidth in ctx.allProtectionBandwidthSizes">
							<a v-if="ctx.hasProtectionBandwidth(protectionBandwidth)" @click.prevent="ctx.selectProtectionBandwidth(protectionBandwidth)">
								<TTag :secondary="protectionBandwidth != ctx.selectedProtectionBandwidth">{{ protectionBandwidth }}</TTag>
							</a>
						</template>
					</div>
				</td>
			</tr>
			<tr>
				<td>选择业务带宽 *</td>
				<td>
					<div class="label-group">
						<template v-for="serverBandwidth in ctx.allServerBandwidthSizes">
							<a v-if="ctx.hasServerBandwidth(serverBandwidth)" @click.prevent="ctx.selectServerBandwidth(serverBandwidth)">
								<TTag :secondary="serverBandwidth != ctx.selectedServerBandwidth">{{ serverBandwidth }}</TTag>
							</a>
						</template>
					</div>
				</td>
			</tr>
			<tr>
				<td>选择有效期 *</td>
				<td>
					<div class="label-group">
						<template v-for="period in ctx.allPeriods">
							<a v-if="ctx.hasPeriod(period.id)" @click.prevent="ctx.selectPeriod(period.id)">
								<TTag :secondary="period.id != ctx.selectedPeriodId">{{ period.count }}{{ period.unitName }}</TTag>
							</a>
						</template>
					</div>
				</td>
			</tr>
			<tr>
				<td>选择实例数量 *</td>
				<td>
					<TSelect name="count" v-model="ctx.count" @change="ctx.changeCount(ctx.count)">
						<TOption v-for="i in ctx.max" :value="i">{{ i }}</TOption>
					</TSelect>
				</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 type="button" :class="{disabled: ctx.amount <= 0}" @click.prevent="ctx.goNext()">下一步</TButton>
	</PostForm>
</template>

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