{$layout} {$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'">
            使用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>
        </td>
      </tr>
    </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,
              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>
          <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> -->
          <p class="comment">用于自动创建域名解析记录。</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 v-show="authType == 'http'">
        <td>拆分域名</td>
        <td>
          <checkbox v-model="splitDomain"></checkbox>
          <p class="comment">
            选中后，表示根据主域名拆分域名到多个证书，如果域名数量较多，建议拆分</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>