{$layout "layout_popup"}

<!-- <h3>修改集群DNS设置</h3> -->
<b-settings-header>修改集群DNS设置</b-settings-header>

<form
  method="post"
  class="ui form"
  data-tea-success="success"
  data-tea-action="$"
>
  <input type="hidden" name="clusterId" :value="clusterId" />
  <csrf-token></csrf-token>

  <table class="ui table definition selectable">
    <tr>
      <td class="title">DNS服务商</td>
      <td>
        <b-select
          name="providerType"
          v-model="providerType"
          auto-width
          @change="changeProviderType"
          :options="[
						...providerTypes.map(providerType => ({
							label: providerType.name,
							value: providerType.code,
						}))
					]"
        ></b-select>

        <!-- <select name="providerType" class="ui dropdown auto-width" v-model="providerType" @change="changeProviderType">
					<option v-for="providerType in providerTypes" :value="providerType.code">{{providerType.name}}</option>
				</select> -->
      </td>
    </tr>
    <tr>
      <td>账号</td>
      <td>
        <!-- <p class="comment" v-if="providers.length == 0">没有账号可选</p> -->
        <b-empty v-if="providers.length == 0">没有账号可选</b-empty>
        <b-select
          name="providerId"
          v-model="providerId"
          auto-width
          v-show="providers.length > 0"
          :options="[
						...providers.map(provider => ({
							label: provider.name,
							value: provider.id,
						})),
					]"
        ></b-select>

        <!-- <select
          name="providerId"
          class="ui dropdown auto-width"
          v-model="providerId"
          v-show="providers.length > 0"
        >
          <option v-for="provider in providers" :value="provider.id">
            {{provider.name}}
          </option>
        </select> -->
        <p class="comment">
          <a href="/dns/providers" target="_blank"
            >去管理DNS服务商账号&raquo;</a
          >
        </p>
      </td>
    </tr>
    <tr v-show="providerId > 0">
      <td>域名</td>
      <td>
        <!-- <p class="comment" v-if="domains.length == 0">没有域名可选</p> -->
        <b-empty v-if="domains.length == 0">没有域名可选</b-empty>
        <b-select
          name="domainId"
          v-model="domainId"
          auto-width
          v-show="domains.length > 0"
          :options="[
						...domains.map(domain => ({
							label: domain.name,
							value: domain.id,
						})),
					]"
        ></b-select>

        <!-- <select
          name="domainId"
          class="ui dropdown auto-width"
          v-model="domainId"
          v-show="domains.length > 0"
        >
          <option v-for="domain in domains" :value="domain.id">
            {{domain.name}}
          </option>
        </select> -->
      </td>
    </tr>
    <tr>
      <td>子域名</td>
      <td>
        <div class="ui input right labeled">
          <input
            type="text"
            name="dnsName"
            v-model="dnsName"
            maxlength="64"
            size="20"
            style="width: 10em"
          />
          <span class="ui label"
            >.<span v-if="domain.length == 0">主域名</span
            ><span v-else>{{domain}}</span></span
          >
        </div>
        <p class="comment">子域名和主域名共同组成集群的域名。</p>
      </td>
    </tr>
    <tr>
      <td colspan="2"><more-options-indicator></more-options-indicator></td>
    </tr>
    <tbody v-show="moreOptionsVisible">
      <tr>
        <td>包含Ln节点</td>
        <td>
          <checkbox
            name="includingLnNodes"
            v-model="includingLnNodes"
          ></checkbox>
          <p class="comment">选中后，表示域名解析中包含L2及以上级别节点。</p>
        </td>
      </tr>
      <tr>
        <td>记录TTL</td>
        <td>
          <div class="ui input right labeled">
            <input
              type="text"
              name="ttl"
              maxlength="6"
              style="width: 6em"
              v-model="ttl"
            />
            <span class="ui label">秒</span>
          </div>
          <p class="comment">
            每个DNS服务商或者账号的TTL限制各有不同，请注意取值范围。0表示使用默认。
          </p>
        </td>
      </tr>
      <tr>
        <td>是否同步节点DNS状态</td>
        <td>
          <div class="ui checkbox">
            <input
              type="checkbox"
              name="nodesAutoSync"
              value="1"
              v-model="nodesAutoSync"
            />
            <label></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>是否同步网站DNS状态</td>
        <td>
          <div class="ui checkbox">
            <input
              type="checkbox"
              name="serversAutoSync"
              value="1"
              v-model="serversAutoSync"
            />
            <label></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <submit-btn></submit-btn>
</form>
