{$layout}

<div class="left-right-box-container">
	{$template "/left_menu_top"}

	<div class="right-box without-tabbar">
		{$template "menu"}

		<div class="margin"></div>

		<form class="ui form">
			<b-steps :steps="[
					{label: '选择申请方式', key: 'prepare'},
					{label: '选择ACME用户', key: 'user'},
					{label: '填写域名信息', key: 'dns'},
					{label: '完成', key: 'finish'},
			]" :current="step"></b-steps>

			<!-- <div class="ui steps fluid small">
				<div class="ui step" :class="{active:step == 'prepare'}">
					选择申请方式
				</div>
				<div class="ui step" :class="{active:step == 'user'}">
					选择ACME用户
				</div>
				<div class="ui step" :class="{active:step == 'dns'}">
					填写域名信息
				</div>
				<div class="ui step" :class="{active:step == 'finish'}">
					完成
				</div>
			</div> -->

			<!-- 准备工作 -->
			<div v-show="step == 'prepare'">
							<table class="ui table definition selectable">
									<tr>
											<td class="title">认证方式 *</td>
											<td>
													<div style="margin-bottom: 1em">
															<radio name="authType" :v-value="'http'" v-model="authType">使用HTTP认证</radio> &nbsp;
															<radio name="authType" :v-value="'dns'" v-model="authType">使用DNS认证</radio>
													</div>
													<div v-if="authType == 'http'">
															<p class="comment">使用HTTP认证的方式请求网址<code-label>/.well-known/acme-challenge/令牌</code-label>校验，该方式要求需要实现将域名解析到集群上，之后系统会自动生成网址信息；这种方式不支持泛域名证书的申请。</p>
													</div>
													<div v-if="authType == 'dns'">
															<p class="comment">我们在申请免费证书的过程中需要自动增加或修改相关域名的TXT记录，请先确保你已经在"域名解析" -- <a href="/dns/providers" target="_blank">"DNS服务商"</a> 中已经添加了对应的DNS服务商账号。</p>
													</div>
											</td>
									</tr>
									<tr>
											<td>选择平台用户</td>
											<td>
													<user-selector @change="changePlatformUser"></user-selector>
													<p class="comment">可选项，选择证书所属用户，如果没有选择，则视为管理员所有。</p>
											</td>
									</tr>
						<tr>
											<td colspan="2">
													<a href="" @click.prevent="showPrepareMoreOptionsVisible">更多选项<i class="icon angle" :class="{up: prepareMoreOptionsVisible, down: !prepareMoreOptionsVisible}"></i></a>
											</td>
									</tr>
									<tbody v-show="prepareMoreOptionsVisible">
											<tr>
													<td>回调URL</td>
													<td>
															<input type="text" name="authURL" v-model="authURL" maxlength="200"/>
															<p class="comment">将认证数据以JSON的方式POST到此URL上，可以依此生成认证文件或者设置DNS域名解析；仅适用于未绑定当前CDN系统的域名。</p>
													</td>
											</tr>
									</tbody>
							</table>

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

			<!-- 选择用户 -->
			<div v-show="step == 'user'">
				<table class="ui table definition selectable">
									<tr>
											<td class="title">选择证书服务商 *</td>
											<td>
												<b-select
													v-model="providerCode"
													@change="changeProvider"
													auto-width
													:options="[
														{label: '[选择服务商]', value: ''},
														...providers.map(provider => ({
															label: provider.name,
															value: provider.code,
														}))
													]"
												></b-select>

												<!-- <select class="ui dropdown auto-width" v-model="providerCode" @change="changeProvider">
														<option value="">[选择服务商]</option>
														<option v-for="provider in providers" :value="provider.code">{{provider.name}}</option>
												</select> -->
											</td>
									</tr>
					<tr v-if="providerCode.length > 0">
						<td class="title">选择ACME用户 *</td>
						<td>
							<div v-if="users.length > 0">
								<div class="ui fields inline">
									<div class="ui field">
										<b-select
											v-model="userId"
											:options="[
												{label: '[请选择]', value: '0'},
												...users.filter(user=>user.providerCode == providerCode).map(user => ({
													label: user.email + (admin.description??''),
													value: user.id,
												}))
											]"
										></b-select>

										<!-- <select class="ui dropdown" v-model="userId">
											<option value="0">[请选择]</option>
											<option v-for="user in users" :value="user.id" v-if="user.providerCode == providerCode">{{user.email}}{{user.description}}</option>
										</select> -->
									</div>
									<div class="ui field">
										<a href="" @click.prevent="createUser">[新创建]</a>
									</div>
								</div>
							</div>
							<div v-else><a href="" @click.prevent="createUser"><span v-if="platformUserId > 0">当前平台用户下</span>暂时还没有ACME用户，点此创建</a></div>
							<p class="comment">选择一个作为申请证书的用户。</p>
						</td>
					</tr>
				</table>

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

			<!-- 设置域名解析 -->
			<div v-show="step == 'dns'">
				<table class="ui table definition selectable">
					<tr v-show="authType == 'dns'">
						<td class="title">选择DNS服务商 *</td>
						<td>
							<div v-if="dnsProviders.length > 0">
								<b-select
									v-model="dnsProviderId"
									auto-width
									:options="[
										{label: '[请选择]', value: '0'},
										...dnsProviders.map(provider => ({
											label: (provider.name??'') + '（' + (provider.typeName??'') + '）',
											value: provider.id,
										}))
									]"
								></b-select>

								<!-- <select class="ui dropdown auto-width" v-model="dnsProviderId">
									<option value="0">[请选择]</option>
									<option v-for="provider in dnsProviders" :value="provider.id">{{provider.name}}（{{provider.typeName}}）</option>
								</select> -->
							</div>
							<div v-else>
									<span>暂时没有DNS服务商，<a href="/dns/providers">[去添加]</a>。</span>
							</div>
							<p class="comment">用于自动创建域名解析记录。</p>
						</td>
					</tr>
					<tr v-show="authType == 'dns'">
						<td>顶级域名 *</td>
						<td>
							<input type="text" maxlength="100" v-model="dnsDomain"/>
							<p class="comment">用于在DNS服务商账号中操作解析记录的域名，比如 example.com，不要输入二级或别的多级域名。</p>
						</td>
					</tr>
					<tr>
						<td class="title">证书域名列表 *</td>
						<td>
													<domains-box :v-support-wildcard="authType == 'dns'" @change="changeDomains"></domains-box>
							<p class="comment">需要申请的证书中包含的域名列表<span v-if="authType == 'dns'">，所有域名必须是同一个顶级域名</span><span v-if="authType == 'http'">使用HTTP认证方式时，域名中不能含有通配符</span>。</p>
						</td>
					</tr>
					<tr>
						<td>自动续期</td>
						<td>
							<checkbox v-model="autoRenew"></checkbox>
							<p class="comment">选中后，表示在免费证书临近到期之前尝试自动续期。</p>
						</td>
					</tr>
				</table>

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

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

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