{$layout}

<div class="left-right-box-container">
    {$template "/left_menu"}

    <div class="right-box">
        {$template "../location_menu"}
        {$template "../left_menu"}

        <div class="right-box tiny">
            <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
                <input type="hidden" name="locationId" :value="locationConfig.id"/>
                <table class="ui table selectable definition">
                    <tr>
                        <td>路径匹配规则 *</td>
                        <td>
                            <input type="text" name="pattern" v-model="pattern" maxlength="500" ref="focus"/>
                            <p class="comment">路径通常以斜杠(/)开头，比如/hello。如果匹配类型是正则表达式匹配，则可以是一个正则表达式</p>
                        </td>
                    </tr>
                    <tr>
                        <td>匹配类型</td>
                        <td>
                            <b-select
                                name="patternType"
                                v-model="type"
                                @change="changePatternType(type)"
                                auto-width
                                :options="[
                                    ...patternTypes.map(patternType => ({
                                        label: patternType.name,
                                        value: patternType.type,
                                    }))
                                ]"
                            ></b-select>

                            <!-- <select class="ui dropdown auto-width" name="patternType" v-model="type" @change="changePatternType(type)">
                                <option v-for="patternType in patternTypes" :value="patternType.type">{{patternType.name}}</option>
                            </select> -->
                            <p class="comment" v-if="selectedType != null" v-html="selectedType.description"></p>
                        </td>
                    </tr>
                    <tr>
                        <td>终止往下匹配</td>
                        <td>
                            <checkbox name="isBreak" :v-value="1" v-model="locationConfig.isBreak"></checkbox>
                            <p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的路由规则。</p>
                        </td>
                    </tr>
                    <tr>
                        <td class="title">名称</td>
                        <td>
                            <input type="text" name="name" maxlength="100" v-model="locationConfig.name"/>
                            <p class="comment">可以用来说明此规则用途。。</p>
                        </td>
                    </tr>
                    <tr>
                        <td>匹配条件</td>
                        <td>
                            <http-request-conds-box :v-conds="conds"></http-request-conds-box>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><more-options-indicator></more-options-indicator></td>
                    </tr>
                    <tbody v-show="moreOptionsVisible">
                        <tr>
                            <td>专属域名</td>
                            <td>
                                <domains-box :v-domains="domains"></domains-box>
                                <p class="comment">默认不需要填写，表示支持所有域名。如果填写了专属域名，表示当前路由规则只会在所列的专属域名被访问时才生效。</p>
                            </td>
                        </tr>
                        <tr>
                        <tr>
                            <td>不区分大小写</td>
                            <td>
                                <checkbox name="isCaseInsensitive" :v-value="1" v-model="isCaseInsensitive"></checkbox>
                                <p class="comment">选中表示匹配规则中的路径中的英文字母不区分大小写。</p>
                            </td>
                        </tr>
                        <tr>
                            <td>反向匹配</td>
                            <td>
                                <checkbox name="isReverse" :v-value="1" v-model="isReverse"></checkbox>
                                <p class="comment">选中表示匹配所有<strong>不符合规则</strong>的路径。</p>
                            </td>
                        </tr>
                        <tr>
                            <td>描述</td>
                            <td>
                                <textarea rows="3" name="description" maxlength="200" v-model="locationConfig.description"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>启用当前路由规则</td>
                            <td>
                                <checkbox name="isOn" v-model="locationConfig.isOn"></checkbox>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <submit-btn></submit-btn>
            </form>
        </div>
    </div>
</div>