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

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header v-if="ctx.isCreating">添加URL跳转</header>
		<header v-if="!ctx.isCreating">修改URL跳转</header>

		<PostForm @success="ctx.success" action="$">
			<input type="hidden" name="matchPrefix" :value="ctx.redirect.matchPrefix ? 1 : 0"/>
			<input type="hidden" name="matchRegexp" :value="ctx.redirect.matchRegexp ? 1 : 0"/>

			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">跳转类型</td>
					<td>
						<TSelect name="type" v-model="ctx.redirect.type">
							<TOption value="url">URL跳转</TOption>
							<TOption value="domain">域名跳转</TOption>
							<TOption value="port">端口跳转</TOption>
						</TSelect>
					</td>
				</tr>
				</tbody>

				<!-- URL跳转 -->
				<tbody v-show="ctx.redirect.type == 'url'">
				<tr>
					<td class="color-border">跳转前URL *</td>
					<td>
						<TInputText type="text" name="beforeURL" placeholder="比如 http://www.url1.com" v-model="ctx.redirect.beforeURL" autofocus class="w-full"/>
						<p class="comment">需要填写完整的URL，包括<CodeLabel>http://</CodeLabel>或者<CodeLabel>https://</CodeLabel>，如果有非默认端口，也需要带上端口号。</p>
					</td>
				</tr>
				<tr>
					<td class="color-border">匹配模式 *</td>
					<td>
						<TSelect name="mode" v-model="ctx.mode">
							<TOption value="equal">精准匹配</TOption>
							<TOption value="matchPrefix">匹配前缀</TOption>
							<TOption value="matchRegexp">正则匹配</TOption>
						</TSelect>
						<p class="comment" v-if="ctx.mode == 'equal'">精准匹配跳转前的URL，即只有访问完全一样的URL才会跳转。</p>
						<p class="comment" v-if="ctx.mode == 'matchPrefix'">只要访问的URL头部部分包含跳转前URL，即可跳转。</p>
						<p class="comment" v-if="ctx.mode == 'matchRegexp'">可以在跳转前URL中使用正则表达式，然后可以在跳转后URL中使用正则表达式中括号的变量，比如<CodeLabel>${1}</CodeLabel>、<CodeLabel>${2}</CodeLabel>分别表示第一个和第二个括号内的变量值。</p>
					</td>
				</tr>
				<tr>
					<td class="color-border">跳转后URL *</td>
					<td>
						<TInputText type="text" name="afterURL" placeholder="比如 https://www.url2.cn" v-model="ctx.redirect.afterURL" class="w-full"/>
						<p class="comment">需要填写完整的URL，包括<CodeLabel>http://</CodeLabel>或者<CodeLabel>https://</CodeLabel>，如果有非默认端口，也需要带上端口号。</p>
					</td>
				</tr>
				<tr v-if="ctx.mode == 'matchPrefix'">
					<td class="color-border">保留URL路径参数</td>
					<td>
						<TCheckboxBinary name="keepRequestURI" value="1" v-model="ctx.redirect.keepRequestURI"></TCheckboxBinary>
						<p class="comment">选中后，则跳转之后，保留跳转之前的URL路径和参数。</p>
					</td>
				</tr>
				<tr v-if="ctx.mode == 'equal' || ctx.mode == 'matchRegexp'">
					<td class="color-border">保留请求参数</td>
					<td>
						<TCheckboxBinary name="keepArgs" value="1" v-model="ctx.redirect.keepArgs"></TCheckboxBinary>
						<p class="comment">选中后，则跳转之后，保留跳转之前的URL上的参数（即问号之后的部分）。</p>
					</td>
				</tr>
				</tbody>

				<!-- 域名跳转 -->
				<tbody v-show="ctx.redirect.type == 'domain'">
				<tr>
					<td class="color-border">所有域名都跳转</td>
					<td>
						<TCheckboxBinary name="domainsAll" v-model="ctx.redirect.domainsAll"></TCheckboxBinary>
						<p class="comment">选中后，表示所有域名都会跳转（只要跳转前后域名不同）；不选中后可以指定域名跳转。</p>
					</td>
				</tr>
				<tr v-show="!ctx.redirect.domainsAll">
					<td class="color-border">指定跳转前域名</td>
					<td>
						<DomainsBox name="domainsBeforeJSON" :v-domains="ctx.redirect.domainsBefore"></DomainsBox>
					</td>
				</tr>
				<tr>
					<td class="color-border">忽略跳转前端口</td>
					<td>
						<TCheckboxBinary name="domainBeforeIgnorePorts" v-model="ctx.redirect.domainBeforeIgnorePorts"></TCheckboxBinary>
						<p class="comment">选中后，表示忽略跳转前域名端口，只要域名匹配时就跳转；如不选中，则表示只有域名和端口同时匹配时才会跳转。</p>
					</td>
				</tr>
				<tr>
					<td class="color-border">跳转后域名 *</td>
					<td>
						<TInputText type="text" name="domainAfter" maxlength="100" class="w-full" v-model="ctx.redirect.domainAfter" placeholder="比如example.com"/>
						<p class="comment">这里填写的是网址中的域名部分，不需要添加<CodeLabel>https://</CodeLabel>部分。</p>
					</td>
				</tr>
				<tr>
					<td class="color-border">跳转后协议</td>
					<td>
						<TSelect name="domainAfterScheme" v-model="ctx.redirect.domainAfterScheme">
							<TOption value="">保持</TOption>
							<TOption value="https">HTTPS</TOption>
							<TOption value="http">HTTP</TOption>
						</TSelect>
						<p class="comment">跳转后的URL的协议。</p>
					</td>
				</tr>
				</tbody>

				<!-- 端口跳转 -->
				<tbody v-show="ctx.redirect.type == 'port'">
				<tr>
					<td class="color-border">所有端口都跳转</td>
					<td>
						<TCheckboxBinary name="portsAll" v-model="ctx.redirect.portsAll"></TCheckboxBinary>
						<p class="comment">选中后，表示所有端口都会跳转（只要跳转前后端口不同）；不选中后可以指定端口跳转。</p>
					</td>
				</tr>
				<tr v-show="!ctx.redirect.portsAll">
					<td class="color-border">指定跳转前端口</td>
					<td>
						<ValuesBox placeholder="单个端口 或 端口1-端口2" name="portsBefore" :v-values="ctx.redirect.portsBefore"></ValuesBox>
					</td>
				</tr>
				<tr>
					<td class="color-border">跳转后端口 *</td>
					<td>
						<TInputText type="text" name="portAfter" maxlength="5" v-model="ctx.redirect.portAfter" style="width: 5em"/>
					</td>
				</tr>
				<tr>
					<td class="color-border">跳转后协议</td>
					<td>
						<TSelect name="portAfterScheme" v-model="ctx.redirect.portAfterScheme">
							<TOption value="">保持</TOption>
							<TOption value="https">HTTPS</TOption>
							<TOption value="http">HTTP</TOption>
						</TSelect>
						<p class="comment">跳转后的URL的协议。</p>
					</td>
				</tr>
				</tbody>

				<tr>
					<td>跳转状态码</td>
					<td>
						<TSelect name="status" v-model="ctx.redirect.status">
							<TOption value="0">[默认]</TOption>
							<TOption v-for="status in ctx.statusList" :value="status.code">{{status.code}} - {{status.text}}</TOption>
						</TSelect>
					</td>
				</tr>
				<tr>
					<td colspan="2"><MoreOptionsIndicator></MoreOptionsIndicator></td>
				</tr>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr>
					<td>例外域名</td>
					<td>
						<DomainsBox name="exceptDomainsJSON" :v-domains="ctx.redirect.exceptDomains"></DomainsBox>
						<p class="comment">这些域名<strong>不</strong>执行跳转。</p>
					</td>
				</tr>
				<tr>
					<td>仅限域名</td>
					<td>
						<DomainsBox name="onlyDomainsJSON" :v-domains="ctx.redirect.onlyDomains"></DomainsBox>
						<p class="comment">只有这些域名执行跳转。</p>
					</td>
				</tr>
				<tr>
					<td>匹配条件</td>
					<td><HTTPRequestCondsBox :v-conds="ctx.redirect.conds" @change="ctx.changeConds"></HTTPRequestCondsBox></td>
				</tr>
				<tr>
					<td>启用当前跳转</td>
					<td><TCheckboxBinary name="isOn" value="1" v-model="ctx.redirect.isOn"></TCheckboxBinary></td>
				</tr>
				</tbody>
			</DefinitionTable>

			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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