<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./createPopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import ValuesBox from "@/components/common/ValuesBox.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TRadio from "@/components/ui/TRadio.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import HTTPAuthBasicAuthUserBox from "@/components/server/HTTPAuthBasicAuthUserBox.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>创建鉴权方式</header>
		<PostForm action="$" @success="ctx.success">
			<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="name" maxlength="50" class="w-full" autofocus/>
					</td>
				</tr>
				<tr>
					<td>鉴权类型 *</td>
					<td>
						<TSelect name="type" v-model="ctx.type" @change="ctx.changeType">
							<TOption value="">[鉴权类型]</TOption>
							<TOption v-for="authType in ctx.authTypes" :value="authType.code">{{ authType.name }}</TOption>
						</TSelect>
						<p class="comment" v-html="ctx.authDescription"></p>
					</td>
				</tr>
				</tbody>

				<!-- TypeA -->
				<tbody v-show="ctx.type == 'typeA'">
				<tr>
					<td>鉴权密钥 *</td>
					<td>
						<TInputText type="text" maxlength="40" name="typeASecret" v-model="ctx.typeASecret" autocomplete="off" class="w-full"/>
						<p class="comment">只能包含字母、数字，长度不超过40。<a href="" @click.prevent="ctx.generateTypeASecret()">[随机生成]</a>
						</p>
					</td>
				</tr>
				<tr>
					<td>签名参数 *</td>
					<td>
						<TInputText type="text" maxlength="30" name="typeASignParamName" value="sign" v-model="ctx.typeASignParamName" @input="ctx.changeTypeASignParamName" class="w-full"/>
					</td>
				</tr>
				<tr>
					<td>有效时间</td>
					<td>
						<TInputGroup>
							<TInputText type="text" maxlength="8" name="typeALife" value="30" style="width: 7em"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
						<p class="comment">链接有效时间。</p>
					</td>
				</tr>
				</tbody>

				<!-- TypeB -->
				<tbody v-show="ctx.type == 'typeB'">
				<tr>
					<td>鉴权密钥 *</td>
					<td>
						<TInputText type="text" maxlength="40" name="typeBSecret" v-model="ctx.typeBSecret" autocomplete="off" class="w-full"/>
						<p class="comment">只能包含字母、数字，长度不超过40。<a href="" @click.prevent="ctx.generateTypeBSecret()">[随机生成]</a>
						</p>
					</td>
				</tr>
				<tr>
					<td>有效时间</td>
					<td>
						<TInputGroup>
							<TInputText type="text" maxlength="8" name="typeBLife" value="30" style="width: 7em"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
						<p class="comment">链接有效时间。</p>
					</td>
				</tr>
				</tbody>

				<!-- TypeC -->
				<tbody v-show="ctx.type == 'typeC'">
				<tr>
					<td>鉴权密钥 *</td>
					<td>
						<TInputText type="text" maxlength="40" name="typeCSecret" v-model="ctx.typeCSecret" autocomplete="off" class="w-full"/>
						<p class="comment">只能包含字母、数字，长度不超过40。<a href="" @click.prevent="ctx.generateTypeCSecret()">[随机生成]</a>
						</p>
					</td>
				</tr>
				<tr>
					<td>有效时间</td>
					<td>
						<TInputGroup>
							<TInputText type="text" maxlength="8" name="typeCLife" value="30" style="width: 7em"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
						<p class="comment">链接有效时间。</p>
					</td>
				</tr>
				</tbody>

				<!-- TypeD -->
				<tbody v-show="ctx.type == 'typeD'">
				<tr>
					<td>鉴权密钥 *</td>
					<td>
						<TInputText type="text" maxlength="40" name="typeDSecret" v-model="ctx.typeDSecret" autocomplete="off" class="w-full"/>
						<p class="comment">只能包含字母、数字，长度不超过40。<a href="" @click.prevent="ctx.generateTypeDSecret()">[随机生成]</a>
						</p>
					</td>
				</tr>
				<tr>
					<td>签名参数 *</td>
					<td>
						<TInputText type="text" maxlength="30" name="typeDSignParamName" value="sign" v-model="ctx.typeDSignParamName" @input="ctx.changeTypeDSignParamName" class="w-full"/>
					</td>
				</tr>
				<tr>
					<td>时间戳参数 *</td>
					<td>
						<TInputText type="text" maxlength="30" name="typeDTimestampParamName" value="t" v-model="ctx.typeDTimestampParamName" @input="ctx.changeTypeDTimestampParamName" class="w-full"/>
					</td>
				</tr>
				<tr>
					<td>有效时间</td>
					<td>
						<TInputGroup>
							<TInputText type="text" maxlength="8" name="typeDLife" value="30" style="width: 7em"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
						<p class="comment">链接有效时间。</p>
					</td>
				</tr>
				</tbody>

				<!-- BasicAuth -->
				<tbody v-show="ctx.type == 'basicAuth'">
				<tr>
					<td>用户 *</td>
					<td>
						<HTTPAuthBasicAuthUserBox></HTTPAuthBasicAuthUserBox>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<a href="" @click.prevent="ctx.showMoreBasicAuthOptions()">更多基本认证选项<i class="ui icon angle" :class="{up: ctx.moreBasicAuthOptionsVisible, down: !ctx.moreBasicAuthOptionsVisible}"></i></a>
					</td>
				</tr>
				<tr v-show="ctx.moreBasicAuthOptionsVisible">
					<td>认证领域名<em>（Realm）</em></td>
					<td>
						<TInputText type="text" name="basicAuthRealm" value="" maxlength="100" class="w-full"/>
					</td>
				</tr>
				<tr v-show="ctx.moreBasicAuthOptionsVisible">
					<td>字符集</td>
					<td>
						<TInputText type="text" name="basicAuthCharset" style="width: 6em" maxlength="50"/>
						<p class="comment">类似于
							<CodeLabel>UTF-8</CodeLabel>
							。
						</p>
					</td>
				</tr>
				</tbody>

				<!-- SubRequest -->
				<tbody v-show="ctx.type == 'subRequest'">
				<tr>
					<td>子请求URL *</td>
					<td>
						<TInputText type="text" name="subRequestURL" maxlength="1024" class="w-full"/>
						<p class="comment">可以是一个完整的URL，也可以是一个路径。</p>
					</td>
				</tr>
				<tr>
					<td>请求方法</td>
					<td>
						<TRadio name="subRequestFollowRequest" :value="1" v-model="ctx.subRequestFollowRequest">同当前请求一致</TRadio> &nbsp; &nbsp;
						<TRadio name="subRequestFollowRequest" :value="0" v-model="ctx.subRequestFollowRequest">自定义</TRadio>
						<div style="margin-top: 0.8em" v-show="ctx.subRequestFollowRequest == 0">
							<TDivider></TDivider>
							<TSelect name="subRequestMethod">
								<TOption value="POST">POST</TOption>
								<TOption value="GET">GET</TOption>
								<TOption value="PUT">PUT</TOption>
								<TOption value="HEAD">HEAD</TOption>
							</TSelect>
						</div>
					</td>
				</tr>
				</tbody>
				<tbody>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr>
					<td>限定文件扩展名</td>
					<td>
						<ValuesBox name="exts"></ValuesBox>
						<p class="comment">如果不为空，则表示只有这些扩展名的文件才需要鉴权；扩展名需要包含点符号（.），比如
							<CodeLabel>.png</CodeLabel>
						</p>
					</td>
				</tr>
				<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>
						<DomainsBox></DomainsBox>
						<p class="comment">如果不为空，则表示只有这些域名的文件才需要鉴权。</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>

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

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