<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 "./requestCertPopup.js"
import PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TButton from "@/components/ui/TButton.vue";
import TLabel from "@/components/ui/TLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>申请免费证书</header>
		<PostForm @success="ctx.success" action="$" timeout="300" @before="ctx.beforeSubmit" @fail="ctx.fail">
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">证书包含的域名 *</td>
					<td>
						<span v-if="ctx.serverNames.length == 0" class="disabled">还没有需要申请证书的域名，暂时不能申请。</span>
						<div v-if="ctx.serverNames.length > 0" class="label-group">
							<TLabel outlined="" v-for="(serverName, index) in ctx.serverNames">
								<input type="hidden" name="serverNames" :value="serverName"/>
								{{serverName}}
								<a href="" title="删除" @click.prevent="ctx.remove(index)"><i class="icon remove"></i></a>
							</TLabel>
						</div>
					</td>
				</tr>
				<tr>
					<td>证书用户 *</td>
					<td>
						<div v-if="ctx.users.length > 0">
							<TSelect name="userId" v-model="ctx.userId">
								<TOption value="0">[请选择]</TOption>
								<TOption v-for="user in ctx.users" :value="user.id">{{user.email}}{{user.description}}</TOption>>
							</TSelect>
							<p class="comment">用来申请证书的用户。</p>
						</div>

						<div v-if="ctx.users.length == 0">
							<TInputText name="userEmail" maxlength="100" placeholder="用户E-mail" autofocus class="w-full"/>
							<p class="comment">用来申请证书的用户邮箱，可以任意填写，只要格式正确即可。</p>
						</div>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>

			<SubmitButton v-if="!ctx.isRequesting">提交</SubmitButton>
			<TButton secondary="" type="button" v-if="ctx.isRequesting">处理中...</TButton>
		</PostForm>
	</PopupLayout>
</template>

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