<script setup>

import {ref, watch} from "vue"
import TInputText from "@/components/ui/TInputText.vue";
import ValuesBox from "@/components/common/ValuesBox.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

// 通用Header长度
let defaultGeneralHeaders = ["Cache-Control", "Connection", "Date", "Pragma", "Trailer", "Transfer-Encoding", "Upgrade", "Via", "Warning"]

const props = defineProps(["v-checkpoint"])

const {headers, length} = (function () {
	let headers = null
	let length = null

	if (window.UPDATING_RULE != null) {
		let options = window.UPDATING_RULE.checkpointOptions
		if (options.headers != null && Array.$isArray(options.headers)) {
			headers = options.headers
		}
		if (options.length != null) {
			length = options.length
		}
	}

	if (headers == null) {
		headers = defaultGeneralHeaders
	}

	if (length == null) {
		length = 128
	}

	setTimeout(function () {
		change()
	}, 100)

	return {
		headers: ref(headers),
		length: ref(length)
	}
})()

const change = function () {
	props.vCheckpoint.options = [
		{
			code: "headers",
			value: headers.value
		},
		{
			code: "length",
			value: length.value
		}
	]
}

watch(length, function (v) {
	let len = parseInt(v)
	if (isNaN(len)) {
		len = 0
	}
	if (len < 0) {
		len = 0
	}
	length.value = len
	change()
})

</script>

<template>
	<div>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">通用Header列表</td>
				<td class="!font-normal">
					<ValuesBox :values="headers" :placeholder="'Header'" @change="change"></ValuesBox>
					<p class="comment">需要检查的Header列表。</p>
				</td>
			</tr>
			<tr>
				<td>Header值超出长度</td>
				<td class="!font-normal">
					<TInputGroup>
						<TInputText type="text" name="" style="width: 5em" v-model="length" maxlength="6"/>
						<TInputGroupAddon>
							<span>字节</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">超出此长度认为匹配成功，0表示不限制。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
