<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./updatePopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import HTTPRequestCondsBox from "@/components/server/HTTPRequestCondsBox.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import PostForm from "@/components/form/PostForm.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header>修改重写规则</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="webId" :value="ctx.webId"/>
			<input type="hidden" name="rewriteRuleId" :value="ctx.rewriteRule.id"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">匹配规则 *</td>
					<td>
						<TInputText type="text" name="pattern" maxlength="500" placeholder="比如 /post/(.+)" autofocus v-model="ctx.rewriteRule.pattern" class="w-full"/>
						<p class="comment" v-if="ctx.teaRole == 'admin'">需要符合正则表达式规范，<a :href="ctx.teaDocURL + '/docs/appendix/regexp/index'" target="_blank">正则表达式语法 &raquo;</a>
						</p>
						<p class="comment" v-if="ctx.teaRole == 'user'">需要符合正则表达式规范，<a :href="ctx.teaDocURL + '/docs/cdn/regexp.html'" target="_blank">正则表达式语法 &raquo;</a>
						</p>
					</td>
				</tr>
				<tr>
					<td>目标URL *</td>
					<td>
						<TInputText type="text" name="replace" placeholder="比如 /post/${1}.html" maxlength="500" v-model="ctx.rewriteRule.replace" class="w-full"/>
						<p class="comment">URL中可以包含一些<a :href="ctx.teaDocURL + '/docs/server/variables'" target="_blank" v-if="ctx.teaRole == 'admin'">内置的变量</a><a :href="ctx.teaDocURL + '/docs/cdn/variables.html'" target="_blank" v-if="ctx.teaRole == 'user'">内置的变量</a>，并且可以用
							<CodeLabel>${1}</CodeLabel>
							、
							<CodeLabel>${2}</CodeLabel>
							等变量形式表示在匹配规则中匹配的第N个括号里的内容，也可以是一个完整的URL，比如：http://example.com/hello。
						</p>
					</td>
				</tr>
				<tr>
					<td>转发方式</td>
					<td>
						<TSelect name="mode" v-model="ctx.rewriteRule.mode">
							<TOption value="proxy">隐式</TOption>
							<TOption value="redirect">显式</TOption>
						</TSelect>
						<p class="comment">隐式表示不在客户端显示重写后的URL；显式表示在客户端跳转URL，将会显示重写后的URL。</p>
					</td>
				</tr>
				<tr>
					<td>匹配条件</td>
					<td>
						<HTTPRequestCondsBox :v-conds="ctx.rewriteRule.conds"></HTTPRequestCondsBox>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr v-show="ctx.rewriteRule.mode == 'redirect'">
					<td>跳转状态码</td>
					<td>
						<TSelect name="redirectStatus" v-model="ctx.rewriteRule.redirectStatus">
							<TOption v-for="status in ctx.statusOptions" :value="status.code">{{ status.code }} {{ status.text }}</TOption>
						</TSelect>
						<p class="comment">通常使用默认的307即可。</p>
					</td>
				</tr>
				<tr v-show="ctx.rewriteRule.mode == 'proxy'">
					<td>代理主机名</td>
					<td>
						<TInputText type="text" name="proxyHost" placeholder="比如 example.com" maxlength="100" class="w-full" v-model="ctx.rewriteRule.proxyHost"/>
						<p class="comment">如果转发的方式为隐式而且目标URL为不同的域名时需要用到此选项，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持<a :href="ctx.teaDocURL + '/docs/server/variables'" target="_blank" v-if="ctx.teaRole == 'admin'">请求变量</a><a :href="ctx.teaDocURL + '/docs/cdn/variables.html'" target="_blank" v-if="ctx.teaRole == 'user'">请求变量</a>。
						</p>
					</td>
				</tr>
				<tr>
					<td>保留URL参数</td>
					<td>
						<TCheckboxBinary name="withQuery" value="1" v-model="ctx.rewriteRule.withQuery"/>
						<p class="comment">选中此选项，将会把用户输入的URL中的参数部分转发到目标URL上。</p>
					</td>
				</tr>
				<tr>
					<td>终止往下匹配</td>
					<td>
						<TCheckboxBinary name="isBreak" value="1" v-model="ctx.rewriteRule.isBreak"/>
						<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路由规则。</p>
					</td>
				</tr>
				<tr>
					<td>启用当前重写规则</td>
					<td>
						<TCheckboxBinary name="isOn" value="1" v-model="ctx.rewriteRule.isOn"/>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

<style lang="postcss" scoped>
</style>