<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./renewPopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import PostForm from "@/components/form/PostForm.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>续费套餐</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="userPlanId" :value="ctx.userPlanId"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">账户余额</td>
					<td>
						<span v-if="ctx.userAccount != null">{{ ctx.userAccount.total }}元</span>
						<span v-else>0元</span>
					</td>
				</tr>
				<tr>
					<td>套餐 *</td>
					<td>
						{{ ctx.plan.name }}
						<p class="comment" v-if="ctx.plan != null">
							<span v-if="ctx.plan.priceType == 'period'">按时间周期付费，{{ ctx.plan.monthlyPrice }}元/月，{{ ctx.plan.seasonallyPrice }}元/季度，{{ ctx.plan.yearlyPrice }}元/年。</span>
							<span v-if="ctx.plan.priceType == 'traffic'">按流量付费。</span>
						</p>
					</td>
				</tr>
				</tbody>

				<tbody v-if="ctx.plan != null && ctx.plan.priceType == 'period'">
				<tr>
					<td>周期 *</td>
					<td>
						<TSelect name="period" v-model="ctx.period">
							<TOption value="monthly">按月</TOption>
							<TOption value="seasonally">按季度</TOption>
							<TOption value="yearly">按年</TOption>
						</TSelect>
					</td>
				</tr>
				<tr v-if="ctx.period == 'monthly'">
					<td>月数 *</td>
					<td>
						<TInputGroup>
							<TInputText name="countMonths" value="1" style="width: 5em" maxlength="4" v-model="ctx.countMonths"/>
							<TInputGroupAddon>
								<span>月</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr v-if="ctx.period == 'seasonally'">
					<td>季度数 *</td>
					<td>
						<TInputGroup>
							<TInputText name="countSeasons" value="1" style="width: 5em" maxlength="4" v-model="ctx.countSeasons"/>
							<TInputGroupAddon>
								<span>季度</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr v-if="ctx.period == 'yearly'">
					<td>年数 *</td>
					<td>
						<TInputGroup>
							<TInputText name="countYears" value="1" style="width: 5em" maxlength="4" v-model="ctx.countYears"/>
							<TInputGroupAddon>
								<span>年</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr>
					<td>预计费用</td>
					<td>
						<span v-if="ctx.fee > 0">{{ ctx.fee }}元</span>
						<span v-else>-</span>
					</td>
				</tr>
				</tbody>

				<tbody v-if="ctx.plan != null && ctx.plan.priceType == 'traffic'">
				<tr>
					<td>结束日期</td>
					<td>
						<TDatePicker name="dayTo" v-model="ctx.defaultDayTo"/>
					</td>
				</tr>
				<tr>
					<td>预计费用</td>
					<td>月结</td>
				</tr>
				</tbody>

				<tbody v-if="ctx.plan != null && ctx.plan.priceType == 'bandwidth'">
				<tr>
					<td>结束日期</td>
					<td>
						<TDatePicker name="dayTo" v-model="ctx.defaultDayTo"/>
					</td>
				</tr>
				<tr>
					<td>预计费用</td>
					<td>月结</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton v-if="ctx.plan.canBuy"></SubmitButton>
			<div v-if="!ctx.plan.canBuy">
				<span class="red">当前套餐已停售，无法续费。</span>
			</div>
		</PostForm>
	</PopupLayout>
</template>

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