<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 PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import SizeCapacityView from "@/components/common/SizeCapacityView.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TButton from "@/components/ui/TButton.vue";
import ChildLayout from "@/layouts/ChildLayout.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ChildLayout :ctx="ctx" :has-tab="true">
		<PostForm @success="ctx.success" action="$">
			<input type="hidden" name="serverId" :value="ctx.serverId"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">当前绑定套餐</td>
					<td>
                    <span v-if="ctx.userPlan.id == 0" class="disabled">暂时还没有绑定套餐。
                        <a href="" @click.prevent="ctx.update()" v-if="!ctx.isUpdating">[修改]</a>
                        <a href="" @click.prevent="ctx.update()" v-if="ctx.isUpdating">[取消修改]</a>
                    </span>
						<div v-else>
							{{ctx.userPlan.plan.name}}<span v-if="ctx.userPlan.name.length > 0">-{{ctx.userPlan.name}}</span> （到期时间：{{ctx.userPlan.dayTo}}）&nbsp;
							<a href="" @click.prevent="ctx.update()" v-if="!ctx.isUpdating">[修改]</a>
							<a href="" @click.prevent="ctx.update()" v-if="ctx.isUpdating">[取消修改]</a>
							<p class="comment" v-if="ctx.userPlan.isExpired"><a href="/plans"><span class="red">[已过期，请及时续费]</span></a></p>
						</div>
					</td>
				</tr>
				<!-- 注意：必须使用v-if -->
				<tr v-if="ctx.isUpdating">
					<td>新套餐 *</td>
					<td>
						<input type="hidden" name="isChanged" value="1"/>
						<span v-if="ctx.userPlans.length == 0" class="disabled">当前还没有可以使用的套餐。</span>
						<div v-else>
							<TSelect name="userPlanId" filter v-model="ctx.newUserPlanId" @change="ctx.changeUserPlan">
								<TOption value="0">[不使用套餐]</TOption>
								<TOption v-for="userPlan in ctx.userPlans" :value="userPlan.id">{{userPlan.name}}（{{userPlan.dayTo}}）</TOption>
							</TSelect>
							<p class="comment" v-if="ctx.mustUsePlan && ctx.newUserPlanId == 0"><span class="red">不使用套餐将会导致网站无法正常访问。</span></p>
							<p class="comment" v-if="ctx.newUserPlanId > 0 && ctx.newUserPlanId == ctx.userPlan.id">当前正在使用的套餐。</p>
						</div>
					</td>
				</tr>
				<tr v-if="ctx.isUpdating && ctx.newUserPlan != null">
					<td>所选套餐限制</td>
					<td>
						<div v-if="ctx.newUserPlan != null && ctx.newUserPlanDescription.length > 0">
							{{ctx.newUserPlanDescription}}
						</div>
						<div v-else><span class="disabled">没有限制</span></div>

						<div v-if="ctx.newUserPlanLimit.length > 0 && ctx.newUserPlanId != ctx.userPlan.id">
							<span class="red">{{ctx.newUserPlanLimit}}</span>
						</div>
					</td>
				</tr>
				</tbody>

				<tbody v-if="!ctx.isUpdating && ctx.hasTrafficLimit">
				<tr v-if="ctx.userPlan.plan.trafficLimit.dailySize != null && ctx.userPlan.plan.trafficLimit.dailySize.count > 0">
					<td>套餐日流量限制</td>
					<td>
						<SizeCapacityView :v-value="ctx.userPlan.plan.trafficLimit.dailySize"></SizeCapacityView>
						<p class="comment">当天流量：{{ctx.trafficDailyFormat}}</p>
					</td>
				</tr>
				<tr v-if="ctx.userPlan.plan.trafficLimit.monthlySize != null && ctx.userPlan.plan.trafficLimit.monthlySize.count > 0">
					<td>套餐月流量限制</td>
					<td>
						<SizeCapacityView :v-value="ctx.userPlan.plan.trafficLimit.monthlySize"></SizeCapacityView>
						<p class="comment">当月流量：{{ctx.trafficMonthlyFormat}}</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>

			<SubmitButton v-show="ctx.newUserPlanLimit.length == 0 && ctx.newUserPlanId != ctx.userPlan.id"></SubmitButton>
			<TButton disabled type="button" v-if="ctx.newUserPlanLimit.length > 0 || ctx.newUserPlanId == ctx.userPlan.id">保存</TButton>
		</PostForm>
	</ChildLayout>
</template>

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