<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 "./calculator.js"
import Menu from "@/views/servers/fee/@menu.vue";
import PostForm from "@/components/form/PostForm.vue";
import {ref} from "vue";
import TRadio from "@/components/ui/TRadio.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const trafficInput = ref()
const bandwidthInput = ref()
const calculatorForm = ref()
const ctx = ctxRef(new Context(), {
	refs: {calculatorForm, trafficInput, bandwidthInput}
})

</script>

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

	<PostForm action="$" @success="ctx.success" ref="calculatorForm">
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">计费类型</td>
				<td>
					<div v-if="ctx.config.canChangePriceType">
						<TRadio name="priceType" :value="'bandwidth'" v-model="ctx.config.priceType">按带宽计费</TRadio>
						&nbsp &nbsp;
						<TRadio name="priceType" :value="'traffic'" v-model="ctx.config.priceType">按流量计费</TRadio> &nbsp; &nbsp;
					</div>
					<div v-else-if="ctx.config.priceType == 'bandwidth'">
						<TRadio name="priceType" :value="'bandwidth'" v-model="ctx.config.priceType">按带宽计费</TRadio>
					</div>
					<div v-else-if="ctx.config.priceType == 'traffic'">
						<TRadio name="priceType" :value="'traffic'" v-model="ctx.config.priceType">按流量计费</TRadio>
					</div>
				</td>
			</tr>
			<tr v-show="ctx.config.priceType == 'bandwidth'">
				<td>所需带宽</td>
				<td>
					<div class="ui fields inline">
						<div class="ui field">
							<TInputText name="bandwidth" size="10" maxlength="10" @input="ctx.change" ref="bandwidthInput"/>
						</div>
						<div class="ui field">
							<TSelect name="bandwidthUnit" @change="ctx.change">
								<TOption value="mb">Mbps</TOption>
								<TOption value="gb">Gbps</TOption>
								<TOption value="tb">Tbps</TOption>
							</TSelect>
						</div>
					</div>
				</td>
			</tr>
			<tr v-show="ctx.config.priceType == 'traffic'">
				<td>所需流量</td>
				<td>
					<div class="ui fields inline">
						<div class="ui field">
							<TInputText name="traffic" size="10" maxlength="10" @input="ctx.change" ref="trafficInput"/>
						</div>
						<div class="ui field">
							<TSelect name="trafficUnit" @change="ctx.change">
								<TOption value="gb">GiB</TOption>
								<TOption value="tb">TiB</TOption>
								<TOption value="eb">EiB</TOption>
							</TSelect>
						</div>
					</div>
				</td>
			</tr>
			<tr v-show="ctx.regions.length > 0">
				<td>所在区域</td>
				<td>
					<TSelect name="regionId" @change="ctx.change">
						<TOption value="0">[不区分区域]</TOption>
						<TOption v-for="region in ctx.regions" :value="region.id">{{ region.name }}</TOption>
					</TSelect>
				</td>
			</tr>
			<tr>
				<td>价格</td>
				<td>
					<strong v-if="ctx.formattedAmount.length > 0">
						￥{{ ctx.formattedAmount }}元
						<span v-if="ctx.hasRegionPrice" class="small grey" style="font-weight: normal">（基于区域价格设定）</span>
					</strong>
					<span v-else class="disabled">-</span>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<SubmitButton>计算价格</SubmitButton>
	</PostForm>
</template>

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