<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./createSetPopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import PostForm from "@/components/form/PostForm.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import HTTPHeaderAssistant from "@/components/server/HTTPHeaderAssistant.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import HTTPStatusBox from "@/components/server/HTTPStatusBox.vue";
import HTTPMethodsBox from "@/components/server/HTTPMethodsBox.vue";
import HTTPHeaderReplaceValues from "@/components/server/HTTPHeaderReplaceValues.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header v-if="ctx.type == 'request'">添加自定义请求报头</header>
		<header v-if="ctx.type == 'response'">添加自定义响应报头</header>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="headerPolicyId" :value="ctx.headerPolicyId"/>
			<input type="hidden" name="type" :value="ctx.type"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">报头名称<em>（Name）</em> *</td>
					<td>
						<TInputText type="text" name="name" value="" maxlength="200" placeholder="类似于Server、Content-Type之类" autofocus v-model="ctx.headerName" autocomplete="off" class="w-full"/>
						<p class="comment"><HTTPHeaderAssistant :v-type="ctx.type" :v-value="ctx.headerName" @select="ctx.selectHeader" class="my-1"></HTTPHeaderAssistant>请注意报头名称的大小写，如无特殊需求，报头名称的格式通常为<CodeLabel>Xxx</CodeLabel>或者<CodeLabel>Xxx-Yyy</CodeLabel>。</p>
					</td>
				</tr>
				<tr>
					<td>值<em>（Value）</em></td>
					<td>
						<TInputText type="text" name="value" maxlength="500" class="w-full"/>
						<p class="comment">可以包含请求变量。</p>
					</td>
				</tr>
				<tr>
					<td colspan="2"><MoreOptionsIndicator>更多选项</MoreOptionsIndicator></td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr v-show="ctx.type == 'response'">
					<td>支持的状态码</td>
					<td>
						<HTTPStatusBox></HTTPStatusBox>
						<p class="comment">不填表示支持所有的状态码。</p>
					</td>
				</tr>
				<tr>
					<td>支持的请求方法</td>
					<td><HTTPMethodsBox></HTTPMethodsBox></td>
				</tr>
				<tr>
					<td>支持的域名</td>
					<td><DomainsBox></DomainsBox></td>
				</tr>
				<tr>
					<td>只附加不替换</td>
					<td>
						<TCheckboxBinary name="shouldAppend"></TCheckboxBinary>
						<p class="comment">选中后表示如果已经存在同名的报头，则只会附加在原有的报头之后，不会覆盖。</p>
					</td>
				</tr>
				<tr v-show="ctx.type == 'response'">
					<td>不在跳转时启用</td>
					<td>
						<TCheckboxBinary name="disableRedirect"></TCheckboxBinary>
						<p class="comment">选中后表示在30X跳转时不启用当前报头。</p>
					</td>
				</tr>
				<tr>
					<td class="color-border">启用内容替换</td>
					<td>
						<TCheckboxBinary name="shouldReplace" v-model="ctx.shouldReplace"></TCheckboxBinary>
						<p class="comment">可以替换原有报头中的内容。</p>
					</td>
				</tr>
				<tr v-show="ctx.shouldReplace">
					<td class="color-border">替换内容</td>
					<td>
						<HTTPHeaderReplaceValues></HTTPHeaderReplaceValues>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>

	</PopupLayout>
</template>

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