{$layout}

{$template "menu"}

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

<form class="ui form">
    <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'">
        <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'">
            使用HTTP认证的方式请求网址<code-label>/.well-known/acme-challenge/令牌</code-label>校验，该方式要求需要实现将域名解析到CDN上，之后系统会自动生成网址信息；这种方式不支持泛域名证书的申请。
        </div>
        <div v-if="authType == 'dns'">
            我们在申请免费证书的过程中需要自动增加或修改相关域名的TXT记录，请先确保你已经在"域名解析" -- <a href="/dns/providers" target="_blank">"DNS服务商"</a> 中已经添加了对应的DNS服务商账号。
        </div>

        <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>
                    <div v-if="users.length > 0">
                        <div class="ui fields inline">
                            <div class="ui field">
                                <select class="ui dropdown" v-model="userId">
                                    <option value="0">[请选择]</option>
                                    <option v-for="user in users" :value="user.id">{{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">暂时还没有用户，点此创建</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>
                    <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>
                    <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>