<script setup>

import {ref} from "vue"
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-referers-config", "v-is-location", "v-is-group"])

const {config, moreOptionsVisible} = (function () {
	let config = props.vReferersConfig
	if (config == null) {
		config = {
			isPrior: false,
			isOn: false,
			allowEmpty: true,
			allowSameDomain: true,
			allowDomains: [],
			denyDomains: [],
			checkOrigin: true
		}
	}
	if (config.allowDomains == null) {
		config.allowDomains = []
	}
	if (config.denyDomains == null) {
		config.denyDomains = []
	}
	return {
		config: ref(config),
		moreOptionsVisible: ref(false)
	}
})()

const isOn = function () {
	return ((!props.vIsLocation && !props.vIsGroup) || config.value.isPrior) && config.value.isOn
}

const changeAllowDomains = function (domains) {
	if (typeof (domains) == "object") {
		config.value.allowDomains = domains
	}
}

const changeDenyDomains = function (domains) {
	if (typeof (domains) == "object") {
		config.value.denyDomains = domains
	}
}

const showMoreOptions = function () {
	moreOptionsVisible.value = !moreOptionsVisible.value
}


</script>

<template>
	<div>
		<input type="hidden" name="referersJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="config" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
			<tr>
				<td class="title">启用防盗链</td>
				<td>
					<TCheckboxBinary value="1" v-model="config.isOn"/>
					<p class="comment">选中后表示开启防盗链。</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="isOn()">
			<tr>
				<td class="title">允许直接访问网站</td>
				<td>
					<TCheckboxBinary v-model="config.allowEmpty"></TCheckboxBinary>
					<p class="comment">允许用户直接访问网站，用户第一次访问网站时来源域名通常为空。</p>
				</td>
			</tr>
			<tr>
				<td>来源域名允许一致</td>
				<td>
					<TCheckboxBinary v-model="config.allowSameDomain"></TCheckboxBinary>
					<p class="comment">允许来源域名和当前访问的域名一致，相当于在站内访问。</p>
				</td>
			</tr>
			<tr>
				<td>允许的来源域名</td>
				<td class="bg-white">
					<DomainsBox :v-domains="config.allowDomains" @change="changeAllowDomains"></DomainsBox>
					<p class="comment">允许的其他来源域名列表，比如
						<CodeLabel>example.com</CodeLabel>
						、
						<CodeLabel>*.example.com</CodeLabel>
						。单个星号
						<CodeLabel>*</CodeLabel>
						表示允许所有域名。
					</p>
				</td>
			</tr>
			<tr>
				<td>禁止的来源域名</td>
				<td class="bg-white">
					<DomainsBox :v-domains="config.denyDomains" @change="changeDenyDomains"></DomainsBox>
					<p class="comment">禁止的来源域名列表，比如
						<CodeLabel>example.org</CodeLabel>
						、
						<CodeLabel>*.example.org</CodeLabel>
						；除了这些禁止的来源域名外，其他域名都会被允许，除非限定了允许的来源域名。
					</p>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<MoreOptionsIndicator @change="showMoreOptions"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="moreOptionsVisible && isOn()">
			<tr>
				<td>同时检查Origin</td>
				<td>
					<TCheckboxBinary v-model="config.checkOrigin"></TCheckboxBinary>
					<p class="comment">如果请求没有指定Referer Header，则尝试检查Origin Header，多用于跨站调用。</p>
				</td>
			</tr>
			<tr>
				<td>例外URL</td>
				<td class="bg-white">
					<URLPatternsBox v-model="config.exceptURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了例外URL，表示这些URL跳过不做处理。</p>
				</td>
			</tr>
			<tr>
				<td>限制URL</td>
				<td class="bg-white">
					<URLPatternsBox v-model="config.onlyURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了限制URL，表示只对这些URL进行处理；如果不填则表示支持所有的URL。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
