{$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" v-model="name" @input="changeName" style="width: 16em"/>
                        <span class="ui label">.{{domain.name}}</span>
                    </div>
                    <p class="comment">
                        <span class="red" v-if="nameWarning">请确认使用非标准记录名（标准记录名只能包含小写字母、数字、中划线-、下划线_的组合）。</span>
                        <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"
                    @change="changeType"
                    auto-width
                    :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="ttl"/>
                    <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></submit-btn>
</form>