<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 "./create.js"
import "./create.css"
import Menu from "./@menu.vue"
import TStepView from "@/components/ui/TStepView.vue";
import TSteps from "@/components/ui/TSteps.vue";
import TRadio from "@/components/ui/TRadio.vue";
import TButton from "@/components/ui/TButton.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TStep from "@/components/ui/TStep.vue";
import TInputText from "@/components/ui/TInputText.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu active-tab="create"></Menu>

	<form>
		<TStepView v-model="ctx.step">
			<TSteps>
				<TStep code="prepare">选择申请方式</TStep>
				<TStep code="user">选择ACME用户</TStep>
				<TStep code="dns">填写域名信息</TStep>
				<TStep code="finish">完成</TStep>
			</TSteps>
		</TStepView>

		<div class="mt-2">
			<!-- 准备工作 -->
			<div v-show="ctx.step == 'prepare'">
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">认证方式 *</td>
						<td>
							<div>
								<TRadio name="authType" :value="'http'" v-model="ctx.authType">使用HTTP认证</TRadio> &nbsp;
								<!--<TRadio name="authType" :value="'dns'" v-model="ctx.authType">使用DNS认证</radio>-->
							</div>
							<div v-if="ctx.authType == 'http'">
								<p class="comment">使用HTTP认证的方式请求网址
									<CodeLabel>/.well-known/acme-challenge/令牌</CodeLabel>
									校验，该方式要求需要实现将域名解析到CDN上，之后系统会自动生成网址信息；这种方式不支持泛域名证书的申请。
								</p>
							</div>
							<div v-if="ctx.authType == 'dns'">
								<p class="comment">
									我们在申请免费证书的过程中需要自动增加或修改相关域名的TXT记录，请先确保你已经在"域名解析" --
									<a href="/dns/providers" target="_blank">"DNS服务商"</a> 中已经添加了对应的DNS服务商账号。
								</p>
							</div>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>

				<div class="button-group">
					<TButton type="button" class="primary" @click.prevent="ctx.doPrepare">下一步</TButton>
				</div>
			</div>

			<!-- 选择用户 -->
			<div v-show="ctx.step == 'user'">
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">选择用户</td>
						<td>
							<div v-if="ctx.users.length > 0">
								<div class="ui fields inline">
									<div class="ui field">
										<TSelect v-model="ctx.userId">
											<TOption value="0">[请选择]</TOption>
											<TOption v-for="user in ctx.users" :value="user.id">{{ user.email }}{{ user.description }}</TOption>
										</TSelect>
									</div>
									<div class="ui field">
										<a href="" @click.prevent="ctx.createUser">[新创建]</a>
									</div>
								</div>
							</div>
							<div v-else><a href="" @click.prevent="ctx.createUser">暂时还没有用户，点此创建</a></div>
							<p class="comment">选择一个作为申请证书的用户。</p>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>

				<div class="button-group">
					<TButton type="button" secondary="" @click.prevent="ctx.goPrepare">上一步</TButton>
					<TButton type="button" class="primary" @click.prevent="ctx.doUser">下一步</TButton>
				</div>
			</div>

			<!-- 设置域名解析 -->
			<div v-show="ctx.step == 'dns'">
				<DefinitionTable>
					<tbody>
					<tr v-show="ctx.authType == 'dns'">
						<td class="title">选择DNS服务商 *</td>
						<td>
							<div v-if="ctx.providers.length > 0">
								<TSelect v-model="ctx.dnsProviderId">
									<TOption value="0">[请选择]</TOption>
									<TOption v-for="provider in ctx.providers" :value="provider.id">{{ provider.name }}（{{ provider.typeName }}）</TOption>
								</TSelect>
							</div>
							<p class="comment">用于自动创建域名解析记录。</p>
						</td>
					</tr>
					<tr v-show="ctx.authType == 'dns'">
						<td>顶级域名 *</td>
						<td>
							<TInputText maxlength="100" v-model="ctx.dnsDomain" class="w-full"/>
							<p class="comment">用于在DNS服务商账号中操作解析记录的域名，比如 example.com，不要输入二级或别的多级域名。</p>
						</td>
					</tr>
					<tr>
						<td class="title">证书域名列表 *</td>
						<td>
							<DomainsBox :v-support-wildcard="ctx.authType == 'dns'" @change="ctx.changeDomains"></DomainsBox>
							<p class="comment">需要申请的证书中包含的域名列表<span v-if="ctx.authType == 'dns'">，所有域名必须是同一个顶级域名</span><span v-if="ctx.authType == 'http'">使用HTTP认证方式时，域名中不能含有通配符</span>。
							</p>
						</td>
					</tr>
					<tr>
						<td>自动续期</td>
						<td>
							<TCheckboxBinary v-model="ctx.autoRenew"></TCheckboxBinary>
							<p class="comment">选中后，表示在免费证书临近到期之前尝试自动续期。</p>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>

				<div class="button-group">
					<TButton type="button" @click.prevent="ctx.goUser">上一步</TButton>
					<TButton type="button" class="primary" @click.prevent="ctx.doDNS" v-if="!ctx.isRequesting">下一步</TButton>
					<TButton type="button" class="primary" disabled v-if="ctx.isRequesting">提交中，要花费的时间较长，请耐心等待...</TButton>
				</div>
			</div>

			<!-- 完成 -->
			<div v-show="ctx.step == 'finish'">
				<div class="success-box">
					<p><span class="green">恭喜，证书申请成功！</span>你可以在证书列表里看到刚申请的证书，也可以
						<a href="" @click.prevent="ctx.viewCert">点击这里</a> 查看证书详情。</p>
				</div>

				<div class="button-group">
					<TButton type="button" class="primary" @click.prevent="ctx.doFinish">返回</TButton>
				</div>
			</div>
		</div>
	</form>
</template>

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