{$layout "layout_popup"}

<!-- <h3>创建记录</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
  <csrf-token></csrf-token>
  <input type="hidden" name="domainId" :value="domain.id" />
  <input type="hidden" name="addingType" :value="addingType" />
  <table class="ui table definition selectable">
    <tr>
      <td class="title">记录名</td>
      <td>
        <!-- 单个添加 -->
        <div v-if="addingType == 'one'">
          <div class="ui input right labeled">
            <input
              type="text"
              name="name"
              ref="nameInput"
              style="width: 16em"
            />
            <span class="ui label">.{{domain.name}}</span>
          </div>
          <p class="comment">
            <a href="" @click.prevent="setAddingType('batch')">[批量添加]</a>
          </p>
        </div>

        <!-- 批量添加 -->
        <div v-if="addingType == 'batch'">
          <textarea
            name="names"
            rows="10"
            placeholder="每行一个，不需要加顶级域名"
            ref="namesInput"
          ></textarea>
          <p class="comment">
            <a href="" @click.prevent="setAddingType('one')">[单个添加]</a>
          </p>
        </div>
      </td>
    </tr>
    <tr>
      <td>记录类型</td>
      <td>
        <b-select
          name="type"
          v-model="type"
          auto-width
          @change="changeType"
          :options="[
            ...types.map(t => ({
              label: t.type,
              value: t.type,
            })),
          ]"
        ></b-select>
        <!-- <select
          class="ui dropdown auto-width"
          name="type"
          v-model="type"
          @change="changeType"
        >
          <option v-for="t in types" :value="t.type">{{t.type}}</option>
        </select> -->
        <p class="comment">{{typeDescription}}</p>
      </td>
    </tr>
    <tr>
      <td>记录值 *</td>
      <td>
        <input type="text" name="value" maxlength="512" />
      </td>
    </tr>

    <!-- MX -->
    <tr v-show="type == 'MX'">
      <td class="color-border">MX优先级</td>
      <td>
        <input
          type="text"
          name="mxPriority"
          value="10"
          maxlength="5"
          size="5"
          style="width: 6em"
        />
        <p class="comment">数字越小越优先，最高为0。</p>
      </td>
    </tr>

    <!-- SRV -->
    <tr v-show="type == 'SRV'">
      <td class="color-border">SRV端口 *</td>
      <td>
        <input
          type="text"
          name="srvPort"
          value=""
          maxlength="5"
          size="5"
          style="width: 6em"
        />
      </td>
    </tr>
    <tr v-show="type == 'SRV'">
      <td class="color-border">SRV优先级</td>
      <td>
        <input
          type="text"
          name="srvPriority"
          value="10"
          maxlength="5"
          size="5"
          style="width: 6em"
        />
      </td>
    </tr>
    <tr v-show="type == 'SRV'">
      <td class="color-border">SRV权重</td>
      <td>
        <input
          type="text"
          name="srvWeight"
          value="10"
          maxlength="5"
          size="5"
          style="width: 6em"
        />
      </td>
    </tr>

    <!-- CAA -->
    <tr v-show="type == 'CAA'">
      <td class="color-border">CAA等级</td>
      <td>
        <input
          type="text"
          name="caaFlag"
          value="0"
          maxlength="3"
          size="5"
          style="width: 4em"
        />
        <p class="comment">取值在0到128之间。</p>
      </td>
    </tr>
    <tr v-show="type == 'CAA'">
      <td class="color-border">CAA标签</td>
      <td>
        <b-select
          name="caaTag"
          v-model="caaTag"
          auto-width
          :options="[
            {label: 'issue', value: 'issue'},
            {label: 'issuewild', value: 'issuewild'},
            {label: 'iodef', value: 'iodef'},
          ]"
        ></b-select>
        <!-- <select class="ui dropdown auto-width" name="caaTag">
          <option value="issue">issue</option>
          <option value="issuewild">issuewild</option>
          <option value="iodef">iodef</option>
        </select> -->
      </td>
    </tr>

    <tr>
      <td>TTL</td>
      <td>
        <div class="ui input right labeled">
          <input
            type="text"
            name="ttl"
            maxlength="10"
            style="width: 6em"
            v-model="defaultTTL"
          />
          <span class="ui label">秒</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>线路</td>
      <td>
        <ns-routes-selector></ns-routes-selector>
      </td>
    </tr>
    <tr>
      <td>权重</td>
      <td>
        <input
          type="text"
          name="weight"
          style="width: 6em"
          maxlength="6"
          value="0"
        />
        <p class="comment">不大于0的权重将当做10处理。</p>
      </td>
    </tr>
    <tr>
      <td>备注</td>
      <td>
        <textarea rows="2" name="description"></textarea>
      </td>
    </tr>
  </table>
  <submit-btn v-show="quotaCanCreate"></submit-btn>
  <div class="ui message error" v-if="!quotaCanCreate">
    当前域名记录数已超出限额（每个域名最多{{quotaMaxRecords}}个记录数），
    请升级套餐后重试。
  </div>
</form>
