{$layout}

<div class="ui tabular menu tiny">
    <a href="" class="item" :class="{active: tab == 'tcpPorts'}" @click.prevent="selectTab('tcpPorts')">TCP/TLS端口</a>
</div>

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <input type="hidden" name="globalConfigJSON" :value="JSON.stringify(globalConfig)"/>

    <!-- TCP 相关 -->
    <div v-show="tab == 'tcpPorts'">
        <table class="ui table definition selectable">
            <tr>
                <td class="title">允许的端口范围</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="tcpAllPortRangeMin" maxlength="5" size="6" v-model="tcpAllPortRangeMin"/>
                        </div>
                        <div class="ui field">
                            -
                        </div>
                        <div class="ui field">
                            <input type="text" name="tcpAllPortRangeMax" maxlength="5" size="6" v-model="tcpAllPortRangeMax"/>
                        </div>
                    </div>
                    <p class="comment">用户创建TCP/TLS负载均衡服务时可以随机选择的端口范围，最小不能小于1024，最大不能大于65534。</p>
                </td>
            </tr>
            <tr>
                <td>排除的端口</td>
                <td>
                    <values-box placeholder="端口" size="6" name="tcpAllDenyPorts" :values="tcpAllDenyPorts"></values-box>
                    <p class="comment">当为用户随机分配端口时要排除的端口。</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="margin"></div>
    <submit-btn v-show="tab != 'domainMatch'">保存</submit-btn>
</form>