<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 "./buy.css"
import Menu from "@/views/plans/@menu.vue";
import PostForm from "@/components/form/PostForm.vue";
import TButton from "@/components/ui/TButton.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import BandwidthSizeCapacityView from "@/components/common/BandwidthSizeCapacityView.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import PlanQuotaValue from "@/components/plans/PlanQuotaValue.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

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

	<PostForm action="$" @success="ctx.success">
		<input type="hidden" name="planId" :value="ctx.planId"/>

		<table class="ui table selectable celled structured plans-table">
			<thead>
			<tr>
				<th></th>
				<th class="two wide"><span class="small">用量/功能</span></th>
				<th v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<div class="plan-name">{{ plan.name }}</div>
					<div><span class="small grey">{{ plan.description }}</span>&nbsp;</div>
				</th>
			</tr>
			</thead>
			<tbody>

			<!-- 选择 -->
			<tr>
				<td></td>
				<td></td>
				<td v-for="plan in ctx.plans" class="" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}">
					<TButton :secondary="ctx.selectedPlan == null || plan.id != ctx.selectedPlan.id" type="button" @click.prevent="ctx.selectPlan(plan, true)">选择</TButton>
				</td>
			</tr>

			<!-- 流量限制 -->
			<tr>
				<td rowspan="2" class="value-category-name">流量配额</td>
				<td class="value-name">日流量限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.dailySize != null && plan.trafficLimit.dailySize.count > 0">
						{{ ctx.composeCapacity(plan.trafficLimit.dailySize) }}
					</div>
					<div v-else>无限制</div>
				</td>
			</tr>
			<tr>
				<td class="value-name">月流量限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.monthlySize != null && plan.trafficLimit.monthlySize.count > 0">
						{{ ctx.composeCapacity(plan.trafficLimit.monthlySize) }}
					</div>
					<div v-else>无限制</div>
				</td>
			</tr>

			<!-- 带宽限制 -->
			<tr>
				<td class="value-category-name">带宽限制</td>
				<td class="value-name">单节点带宽限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<div v-if="plan.bandwidthLimitPerNode != null && plan.bandwidthLimitPerNode.count > 0">
						<BandwidthSizeCapacityView :v-value="plan.bandwidthLimitPerNode"></BandwidthSizeCapacityView>
					</div>
					<div v-else>无限制</div>
				</td>
			</tr>

			<!-- 用量限制 -->
			<tr>
				<td rowspan="8" class="value-category-name">用量配额</td>
				<td class="value-name">总网站数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.totalServers"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">总域名数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.totalServerNames"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">每个网站最多域名数</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.totalServerNamesPerServer"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">单日请求数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.dailyRequests"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">单月请求数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.monthlyRequests"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">单日Websocket连接数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.dailyWebsocketConnections"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">单月Websocket连接数限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<PlanQuotaValue v-model="plan.monthlyWebsocketConnections"></PlanQuotaValue>
				</td>
			</tr>
			<tr>
				<td class="value-name">文件上传限制</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<span v-if="plan.maxUploadSize != null && plan.maxUploadSize.count > 0">{{ ctx.composeCapacity(plan.maxUploadSize) }}</span>
					<span v-else>无限制</span>
				</td>
			</tr>

			<!-- 系统功能 -->
			<tr>
				<td rowspan="0" class="value-category-name">系统功能</td>
				<td class="value-name">负载均衡</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
					<span v-if="plan.lbMode == 'on'"><i class="icon check green"></i></span>
				</td>
			</tr>
			</tbody>


			<!-- 功能限制 -->
			<tbody>
			<tr>
				<td :colspan="ctx.plans.length+2">
					<MoreOptionsIndicator>
						<span v-if="!ctx.moreOptionsVisible">查看网站功能支持</span>
						<span v-if="ctx.moreOptionsVisible">收起网站功能支持</span>
					</MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="ctx.moreOptionsVisible">
			<tr v-for="(feature, index) in ctx.allFeatures">
				<td :rowspan="ctx.allFeatures.length" v-if="index == 0" class="value-category-name">网站功能</td>
				<td class="value-name">{{ feature.name }}</td>
				<td v-for="plan in ctx.plans" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}" @click.prevent="ctx.selectPlan(plan)">
                    <span v-if="plan.hasFullFeatures || (plan.featureCodes != null && plan.featureCodes.$contains(feature.code))">
                        <i class="icon check green"></i>
                    </span>
					<span v-else>/</span>
				</td>
			</tr>
			</tbody>


			<!-- 选择 -->
			<tbody>
			<tr>
				<td></td>
				<td></td>
				<td v-for="plan in ctx.plans" class="bottom" :class="{selected: ctx.selectedPlan != null && plan.id == ctx.selectedPlan.id}">
					<TButton :secondary="ctx.selectedPlan == null || plan.id != ctx.selectedPlan.id" type="button" @click.prevent="ctx.selectPlan(plan)">选择</TButton>
				</td>
			</tr>
			</tbody>
		</table>

		<DefinitionTable>
			<tbody>
			<tr v-if="ctx.selectedPlan != null">
				<td>已选择套餐</td>
				<td><strong>{{ ctx.selectedPlan.name }}</strong></td>
			</tr>
			<tr>
				<td class="title">账户余额</td>
				<td>
					<span v-if="ctx.userAccount != null">{{ ctx.userAccount.total }}元</span>
					<span v-else>0元</span>
					&nbsp; <a href="/finance/charge"><span class="small">[充值]</span></a>
				</td>
			</tr>
			<tr v-if="ctx.selectedPlan != null">
				<td>计费方式</td>
				<td>
					<span v-if="ctx.selectedPlan.priceType == 'period'">按时间周期付费，{{ ctx.selectedPlan.monthlyPrice }}元/月，{{ ctx.selectedPlan.seasonallyPrice }}元/季度，{{ ctx.selectedPlan.yearlyPrice }}元/年。</span>
					<span v-if="ctx.selectedPlan.priceType == 'traffic'">按流量付费。</span>
					<span v-if="ctx.selectedPlan.priceType == 'bandwidth'">按带宽付费。</span>
				</td>
			</tr>
			</tbody>


			<!-- 按时间周期计费 -->
			<tbody v-if="ctx.selectedPlan != null && ctx.selectedPlan.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.selectedPlan != null && ctx.selectedPlan.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.selectedPlan != null && ctx.selectedPlan.priceType == 'bandwidth'">
			<tr>
				<td>结束日期</td>
				<td>
					<TDatePicker name="dayTo" v-model="ctx.defaultDayTo"/>
				</td>
			</tr>
			<tr>
				<td>预计费用</td>
				<td>月结</td>
			</tr>
			</tbody>

			<tbody>
			<tr>
				<td>备注名称</td>
				<td>
					<TInputText name="name" maxlength="50" class="w-full"/>
					<p class="comment">用于识别不同的套餐，默认为套餐名称。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<SubmitButton>确定购买</SubmitButton>
	</PostForm>
</template>

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