<script setup>

import "@/lib/array.js"
import {ref, watch} from "vue"
import CodeLabel from "@/components/common/CodeLabel.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import TInputText from "@/components/ui/TInputText.vue";
import ValuesBox from "@/components/common/ValuesBox.vue";
import HTTPMethodsBox from "@/components/server/HTTPMethodsBox.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["modelValue"])

const {config, maxAgeSecondsString, moreOptionsVisible} = (function () {
	let config = props.modelValue
	if (config == null) {
		config = {
			isOn: false,
			allowMethods: [],
			allowOrigin: "",
			allowCredentials: true,
			exposeHeaders: [],
			maxAge: 0,
			requestHeaders: [],
			requestMethod: "",
			optionsMethodOnly: false
		}
	}
	if (config.allowMethods == null) {
		config.allowMethods = []
	}
	if (config.exposeHeaders == null) {
		config.exposeHeaders = []
	}

	let maxAgeSecondsString = config.maxAge.toString()
	if (maxAgeSecondsString == "0") {
		maxAgeSecondsString = ""
	}

	return {
		config: ref(config),

		maxAgeSecondsString: ref(maxAgeSecondsString),

		moreOptionsVisible: ref(false)
	}
})()

const changeMoreOptions = function (visible) {
	moreOptionsVisible.value = visible
}

const addDefaultAllowMethods = function () {
	let defaultMethods = ["PUT", "GET", "POST", "DELETE", "HEAD", "OPTIONS", "PATCH"]
	defaultMethods.forEach(function (method) {
		if (!config.value.allowMethods.$contains(method)) {
			config.value.allowMethods.push(method)
		}
	})
}

watch(maxAgeSecondsString, function (v) {
	let seconds = parseInt(v)
	if (isNaN(seconds)) {
		seconds = 0
	}
	config.value.maxAge = seconds
})


</script>

<template>
	<div>
		<input type="hidden" name="corsJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">启用CORS自适应跨域</td>
				<td>
					<TCheckboxBinary v-model="config.isOn"></TCheckboxBinary>
					<p class="comment">启用后，自动在响应报头中增加对应的
						<CodeLabel>Access-Control-*</CodeLabel>
						相关内容。
					</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="config.isOn">
			<tr>
				<td colspan="2">
					<MoreOptionsIndicator @change="changeMoreOptions"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="config.isOn && moreOptionsVisible">
			<tr>
				<td>允许的请求方法列表</td>
				<td>
					<HTTPMethodsBox :v-methods="config.allowMethods"></HTTPMethodsBox>
					<p class="comment"><a href="" @click.prevent="addDefaultAllowMethods">[添加默认]</a>。
						<CodeLabel>Access-Control-Allow-Methods</CodeLabel>
						值设置。所访问资源允许使用的方法列表，不设置则表示默认为
						<CodeLabel>PUT</CodeLabel>
						、
						<CodeLabel>GET</CodeLabel>
						、
						<CodeLabel>POST</CodeLabel>
						、
						<CodeLabel>DELETE</CodeLabel>
						、
						<CodeLabel>HEAD</CodeLabel>
						、
						<CodeLabel>OPTIONS</CodeLabel>
						、
						<CodeLabel>PATCH</CodeLabel>
						。
					</p>
				</td>
			</tr>
			<tr>
				<td>允许的请求报头</td>
				<td>
					<ValuesBox :v-values="config.requestHeaders"></ValuesBox>
					<p class="comment"><CodeLabel>Access-Control-Allow-Headers</CodeLabel>值设置，如果没有填写则自动默认为请求报头中<CodeLabel>Access-Control-Request-Headers</CodeLabel>的内容。</p>
				</td>
			</tr>
			<tr>
				<td>预检结果缓存时间</td>
				<td>
					<TInputGroup>
						<TInputText type="text" style="width: 6em" maxlength="6" v-model="maxAgeSecondsString"/>
						<TInputGroupAddon>
							<span>秒</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">
						<CodeLabel>Access-Control-Max-Age</CodeLabel>
						值设置。预检结果缓存时间，0或者不填表示使用浏览器默认设置。注意每个浏览器有不同的缓存时间上限。
					</p>
				</td>
			</tr>
			<tr>
				<td>允许服务器暴露的报头</td>
				<td>
					<ValuesBox :v-values="config.exposeHeaders"></ValuesBox>
					<p class="comment">
						<CodeLabel>Access-Control-Expose-Headers</CodeLabel>
						值设置。允许服务器暴露的报头，请注意报头的大小写。
					</p>
				</td>
			</tr>
			<tr>
				<td>实际请求方法</td>
				<td>
					<TInputText type="text" v-model="config.requestMethod" class="w-full"/>
					<p class="comment">
						<CodeLabel>Access-Control-Request-Method</CodeLabel>
						值设置。实际请求服务器时使用的方法，比如
						<CodeLabel>POST</CodeLabel>
						。
					</p>
				</td>
			</tr>
			<tr>
				<td>仅OPTIONS有效</td>
				<td>
					<TCheckboxBinary v-model="config.optionsMethodOnly"></TCheckboxBinary>
					<p class="comment">选中后，表示当前CORS设置仅在OPTIONS方法请求时有效。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div class="margin"></div>
	</div>
</template>

<style scoped>
</style>
