<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./createPopup.js"
import TInputText from "@/components/ui/TInputText.vue";
import PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import TOption from "@/components/ui/TOption.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const htmlBody = ref()

const ctx = ctxRef(new Context(), {
	refs: {htmlBody}
})

</script>

<template>
	<PopupLayout>

		<header>添加自定义页面</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="webId" :value="ctx.webId"/>
			<input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(ctx.exceptURLPatterns)"/>
			<input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(ctx.onlyURLPatterns)"/>

			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">响应状态码 *</td>
					<td>
						<TInputText type="text" name="status" size="3" placeholder="状态码" maxlength="3" style="width:5.2em" autofocus/>
						<p class="comment">匹配的响应状态码，比如404，或者50x。</p>
					</td>
				</tr>
				<tr>
					<td>内容类型 *</td>
					<td>
						<TSelect name="bodyType" v-model="ctx.bodyType">
							<TOption v-for="bodyType in ctx.bodyTypes" :value="bodyType.code">{{ bodyType.name }}</TOption>
						</TSelect>
					</td>
				</tr>
				<tr v-show="ctx.bodyType == 'html'">
					<td>显示页面HTML *</td>
					<td>
						<TTextarea name="body" ref="htmlBody" rows="7" class="w-full"></TTextarea>
						<p class="comment"><a href="" @click.prevent="ctx.addHTMLTemplate">[使用模板]</a>。填写页面的HTML内容，支持请求变量。
						</p>
					</td>
				</tr>
				<tr v-if="ctx.bodyType == 'url'">
					<td>显示页面URL *</td>
					<td>
						<TInputText type="text" name="url" maxlength="500" placeholder="类似于 https://example.com/page.html" class="w-full"/>
						<p class="comment">将从此URL中读取内容。</p>
					</td>
				</tr>
				<tr v-if="ctx.bodyType == 'redirectURL'">
					<td>跳转到URL *</td>
					<td>
						<TInputText type="text" name="url" maxlength="500" placeholder="类似于 https://example.com/page.html" class="w-full"/>
						<p class="comment">将会跳转到此URL，支持使用变量。</p>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr>
					<td>例外URL &nbsp;<TipIcon content="对这些URL将不做任何限制。"></TipIcon>
					</td>
					<td>
						<URLPatternsBox v-model="ctx.exceptURLPatterns"></URLPatternsBox>
					</td>
				</tr>
				<tr>
					<td>限制URL &nbsp;<TipIcon content="只对这些URL做限制。"></TipIcon>
					</td>
					<td>
						<URLPatternsBox v-model="ctx.onlyURLPatterns"></URLPatternsBox>
					</td>
				</tr>
				<tr>
					<td>新状态码</td>
					<td>
						<TInputText type="text" name="newStatus" size="3" placeholder="状态码" maxlength="3" style="width:5.2em"/>
						<p class="comment">可以用来修改响应的状态码，不填表示不改变原有状态码。</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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