<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 "./index.css"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TRadio from "@/components/ui/TRadio.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TMessage from "@/components/ui/TMessage.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<div v-if="!ctx.config.enablePay">
		<TMessage v-if="ctx.config.disablePageHTML.length == 0">暂不提供在线充值功能，请联系管理员充值。</TMessage>
		<div v-if="ctx.config.disablePageHTML.length > 0" v-html="ctx.config.disablePageHTML"></div>
	</div>

	<div v-if="ctx.config.enablePay">
		<PostForm action="$" @success="ctx.success">
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">充值金额 *</td>
					<td>
						<TInputGroup>
							<TInputGroupAddon>
								<span>￥</span>
							</TInputGroupAddon>
							<TInputText name="amount" maxlength="8" style="width: 7em" autofocus/>
							<TInputGroupAddon>
								<span>元</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr>
					<td>选择支付方式 *</td>
					<td>
						<div class="flex flex-col">
							<div class="py-2 px-4 cursor-pointer" :class="{'active-method': ctx.methodCode == method.code}" v-for="method in ctx.methods" @click.prevent="ctx.selectMethod(method)">
								<TRadio name="methodCode" :value="method.code" v-model="ctx.methodCode">{{ method.name }}</TRadio>
								<p class="comment">{{ method.description }}</p>
							</div>
						</div>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton>下一步 &raquo;</SubmitButton>
		</PostForm>
	</div>
</template>

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