{$layout "layout_popup"}

<!-- <h3 v-if="isCreating">{{t('createPopup@添加URL跳转')}}</h3>
<h3 v-if="!isCreating">{{t('createPopup@修改URL跳转')}}</h3> -->

<form class="ui form" data-tea-success="success" data-tea-action="$">
    <csrf-token></csrf-token>
    <input type="hidden" name="matchPrefix" :value="redirect.matchPrefix ? 1 : 0"/>
    <input type="hidden" name="matchRegexp" :value="redirect.matchRegexp ? 1 : 0"/>

    <table class="ui table definition selectable">
        <tr>
            <td class="title">{{t('createPopup@跳转类型')}}</td>
            <td>
                <b-select
                    name="type"
                    v-model="redirect.type"
                    auto-width
                    :options="[
                        {label: t('createPopup@URL跳转'), value: 'url'},
                        {label: t('createPopup@域名跳转'), value: 'domain'},
                        {label: t('createPopup@端口跳转'), value: 'port'},
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="type" v-model="redirect.type">
                    <option value="url">{{t('createPopup@URL跳转')}}</option>
                    <option value="domain">{{t('createPopup@域名跳转')}}</option>
                    <option value="port">{{t('createPopup@端口跳转')}}</option>
                </select> -->
            </td>
        </tr>

        <!-- URL跳转 -->
        <tbody v-show="redirect.type == 'url'">
            <tr>
                <td class="color-border">{{t('createPopup@跳转前URL')}} *</td>
                <td>
                    <input type="text" name="beforeURL" :placeholder="t('createPopup@跳转前URLPlaceholder')" v-model="redirect.beforeURL" ref="focus"/>
                    <p class="comment">{{t('createPopup@跳转前URL提示')}}<code-label>http://</code-label>或者<code-label>https://</code-label>，{{t('createPopup@如果有非默认端口，也需要带上端口号')}}。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@匹配模式')}} *</td>
                <td>
                    <b-select
                        name="mode"
                        v-model="mode"
                        auto-width
                        :options="[
                            {label: t('createPopup@精准匹配'), value: 'equal'},
                            {label: t('createPopup@匹配前缀'), value: 'matchPrefix'},
                            {label: t('createPopup@正则匹配'), value: 'matchRegexp'},
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown auto-width" name="mode" v-model="mode">
                        <option value="equal">{{t('createPopup@精准匹配')}}</option>
                        <option value="matchPrefix">{{t('createPopup@匹配前缀')}}</option>
                        <option value="matchRegexp">{{t('createPopup@正则匹配')}}</option>
                    </select> -->
                    <p class="comment" v-if="mode == 'equal'">{{t('createPopup@精准匹配提示')}}</p>
                    <p class="comment" v-if="mode == 'matchPrefix'">{{t('createPopup@匹配前缀提示')}}</p>
                    <p class="comment" v-if="mode == 'matchRegexp'">{{t('createPopup@正则匹配提示')}}<code-label>${1}</code-label>,<code-label>${2}</code-label>{{t('createPopup@正则匹配提示2')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@跳转后URL')}} *</td>
                <td>
                    <input type="text" name="afterURL" :placeholder="t('createPopup@跳转后URLPlaceholder')" v-model="redirect.afterURL"/>
                    <p class="comment" v-html="t('createPopup@跳转后URL提示')"></p>
                </td>
            </tr>
            <tr v-if="mode == 'matchPrefix'">
                <td class="color-border">{{t('createPopup@是否保留URL路径参数')}}</td>
                <td>
                    <checkbox name="keepRequestURI" :v-value="1" v-model="redirect.keepRequestURI"></checkbox>
                    <p class="comment">{{t('createPopup@是否保留URL路径参数提示')}}</p>
                </td>
            </tr>
            <tr v-if="mode == 'equal' || mode == 'matchRegexp'">
                <td class="color-border">{{t('createPopup@是否保留请求参数')}}</td>
                <td>
                    <checkbox name="keepArgs" :v-value="1" v-model="redirect.keepArgs"></checkbox>
                    <p class="comment">{{t('createPopup@是否保留请求参数提示')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- 域名跳转 -->
        <tbody v-show="redirect.type == 'domain'">
            <tr>
                <td class="color-border">{{t('createPopup@所有域名都跳转')}}</td>
                <td>
                    <checkbox name="domainsAll" v-model="redirect.domainsAll"></checkbox>
                    <p class="comment">{{t('createPopup@所有域名都跳转提示')}}</p>
                </td>
            </tr>
            <tr v-show="!redirect.domainsAll">
                <td class="color-border">{{t('createPopup@指定跳转前域名')}}</td>
                <td>
                    <domains-box name="domainsBeforeJSON" :v-domains="redirect.domainsBefore"></domains-box>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@忽略跳转前端口')}}</td>
                <td>
                    <checkbox name="domainBeforeIgnorePorts" v-model="redirect.domainBeforeIgnorePorts"></checkbox>
                    <p class="comment">{{t('createPopup@忽略跳转前端口提示')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@跳转后域名')}} *</td>
                <td>
                    <input type="text" name="domainAfter" maxlength="100" v-model="redirect.domainAfter" :placeholder="t('createPopup@跳转后域名Placeholder')"/>
                    <p class="comment">{{t('createPopup@跳转后域名提示')}}<code-label>https://</code-label> {{t('createPopup@部分')}}。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@跳转后协议')}}</td>
                <td>
                    <b-select
                        name="domainAfterScheme"
                        v-model="redirect.domainAfterScheme"
                        auto-width
                        :options="[
                            {label: t('createPopup@保持'), value: ''},
                            {label: 'HTTPS', value: 'https'},
                            {label: 'HTTP', value: 'http'},
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown auto-width" name="domainAfterScheme" v-model="redirect.domainAfterScheme">
                        <option value="">{{t('createPopup@保持')}}</option>
                        <option value="https">HTTPS</option>
                        <option value="http">HTTP</option>
                    </select> -->
                    <p class="comment">{{t('createPopup@跳转后协议提示')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- 端口跳转 -->
        <tbody v-show="redirect.type == 'port'">
            <tr>
                <td class="color-border">{{t('createPopup@所有端口都跳转')}}</td>
                <td>
                    <checkbox name="portsAll" v-model="redirect.portsAll"></checkbox>
                    <p class="comment">{{t('createPopup@所有端口都跳转提示')}}</p>
                </td>
            </tr>
            <tr v-show="!redirect.portsAll">
                <td class="color-border">{{t('createPopup@指定跳转前端口')}}</td>
                <td>
                    <values-box :placeholder="t('createPopup@指定跳转前端口Placeholder')" name="portsBefore" :v-values="redirect.portsBefore"></values-box>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@跳转后端口')}} *</td>
                <td>
                    <input type="text" name="portAfter" maxlength="5" v-model="redirect.portAfter" style="width: 5em"/>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('createPopup@跳转后协议')}}</td>
                <td>
                    <b-select
                        name="portAfterScheme"
                        v-model="redirect.portAfterScheme"
                        auto-width
                        :options="[
                            {label: t('createPopup@保持'), value: ''},
                            {label: 'HTTPS', value: 'https'},
                            {label: 'HTTP', value: 'http'},
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown auto-width" name="portAfterScheme" v-model="redirect.portAfterScheme">
                        <option value="">{{t('createPopup@保持')}}</option>
                        <option value="https">HTTPS</option>
                        <option value="http">HTTP</option>
                    </select> -->
                    <p class="comment">{{t('createPopup@跳转后协议提示')}}</p>
                </td>
            </tr>
        </tbody>

        <tr>
            <td>{{t('createPopup@跳转状态码')}}</td>
            <td>
                <b-select
                    name="status"
                    v-model="redirect.status"
                    auto-width
                    :options="[
                        {label: t('createPopup@默认状态码'), value: '0'},
                        ...statusList.map(status => ({
                            label: (status.code??'') + ' - ' + (status.text??''),
                            value: status.code,
                        }))
                    ]"
                ></b-select>
                
                <!-- <select class="ui dropdown auto-width" name="status" v-model="redirect.status">
                    <option value="0">{{t('createPopup@默认状态码')}}</option>
                    <option v-for="status in statusList" :value="status.code">{{status.code}} - {{status.text}}</option>
                </select> -->
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('createPopup@例外域名')}}</td>
                <td>
                    <domains-box name="exceptDomainsJSON" :v-domains="redirect.exceptDomains"></domains-box>
                    <p class="comment">{{t('createPopup@例外域名提示')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('createPopup@仅限域名')}}</td>
                <td>
                    <domains-box name="onlyDomainsJSON" :v-domains="redirect.onlyDomains"></domains-box>
                    <p class="comment">{{t('createPopup@仅限域名提示')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('createPopup@匹配条件')}}</td>
                <td><http-request-conds-box :v-conds="redirect.conds" @change="changeConds"></http-request-conds-box></td>
            </tr>
            <tr>
                <td>{{t('createPopup@启用当前跳转')}}</td>
                <td><checkbox name="isOn" :v-value="1" v-model="redirect.isOn"></checkbox></td>
            </tr>
        </tbody>
    </table>

    <submit-btn></submit-btn>
</form>