{$layout "layout_popup"}

<!-- <h3>{{t('ns_domains_records_updatePopup@修改记录Title')}}</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="recordId" :value="record.id"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">{{t('ns_domains_records_updatePopup@记录名')}}</td>
            <td>
                <div class="ui input right labeled">
                    <input type="text" name="name" ref="focus" v-model="record.name" style="width: 16em"/>
                    <span class="ui label">.{{domain.name}}</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>{{t('ns_domains_records_updatePopup@记录类型')}}</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>{{t('ns_domains_records_updatePopup@记录值')}}</td>
            <td>
                <input type="text" name="value" maxlength="512" v-model="record.value"/>
            </td>
        </tr>

        <!-- MX -->
        <tr v-show="type == 'MX'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@MX优先级')}}</td>
            <td>
                <input type="text" name="mxPriority" value="10" v-model="record.mxPriority" maxlength="5" size="5" style="width: 6em"/>
                <p class="comment">{{t('ns_domains_records_updatePopup@MX优先级Comment')}}</p>
            </td>
        </tr>

        <!-- SRV -->
        <tr v-show="type == 'SRV'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@SRV端口')}}</td>
            <td>
                <input type="text" name="srvPort" value="" maxlength="5" size="5" style="width: 6em" v-model="record.srvPort"/>
            </td>
        </tr>
        <tr v-show="type == 'SRV'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@SRV优先级')}}</td>
            <td>
                <input type="text" name="srvPriority" value="10" maxlength="5" size="5" style="width: 6em" v-model="record.srvPriority"/>
            </td>
        </tr>
        <tr v-show="type == 'SRV'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@SRV权重')}}</td>
            <td>
                <input type="text" name="srvWeight" value="10" maxlength="5" size="5" style="width: 6em" v-model="record.srvWeight"/>
            </td>
        </tr>

        <!-- CAA -->
        <tr v-show="type == 'CAA'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@CAA等级')}}</td>
            <td>
                <input type="text" name="caaFlag" value="0" maxlength="3" size="5" style="width: 4em" v-model="record.caaFlag"/>
                <p class="comment">{{t('ns_domains_records_updatePopup@CAA等级Comment')}}</p>
            </td>
        </tr>
        <tr v-show="type == 'CAA'">
            <td class="color-border">{{t('ns_domains_records_updatePopup@CAA标签')}}</td>
            <td>
                <b-select
                    name="caaTag"
                    v-model="record.caaTag"
                    auto-width
                    :options="[
                        {label: 'issue', value: 'issue'},
                        {label: 'issuewild', value: 'issuewild'},
                        {label: 'iodef', value: 'iodef'},
                    ]"
                ></b-select>
            </td>
        </tr>

        <tr>
            <td>{{t('ns_domains_records_updatePopup@TTL')}}</td>
            <td>
                <div class="ui input right labeled">
                    <input type="text" name="ttl" maxlength="10" style="width: 6em" v-model="record.ttl"/>
                    <span class="ui label">{{t('ns_domains_records_updatePopup@秒Unit')}}</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>{{t('ns_domains_records_updatePopup@线路')}}</td>
            <td>
                <ns-routes-selector :v-routes="record.routes"></ns-routes-selector>
            </td>
        </tr>
        <tr>
            <td>{{t('ns_domains_records_updatePopup@权重')}}</td>
            <td>
                <input type="text" name="weight" style="width: 6em" maxlength="6" v-model="record.weight"/>
                <p class="comment">{{t('ns_domains_records_updatePopup@权重Comment')}}</p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('ns_domains_records_updatePopup@备注')}}</td>
                <td>
                    <textarea rows="2" name="description" v-model="record.description"></textarea>
                </td>
            </tr>
            <tr>
                <td>{{t('ns_domains_records_updatePopup@启用')}}</td>
                <td>
                    <checkbox name="isOn" v-model="record.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
    </table>
    <submit-btn></submit-btn>
</form>