<script setup>

import {ref, watch} from "vue"
import HTTPStatusBox from "@/components/server/HTTPStatusBox.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TimeDurationBox from "@/components/common/TimeDurationBox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-cache-stale-config"])

const emits = defineEmits(["change"])

const {config} = (function () {
	let config = props.vCacheStaleConfig
	if (config == null) {
		config = {
			isPrior: false,
			isOn: false,
			status: [],
			supportStaleIfErrorHeader: true,
			life: {
				count: 1,
				unit: "day"
			}
		}
	}
	return {
		config: ref(config)
	}
})()

watch(config, () => {
	emits("change", config.value)
}, {
	deep: true
})


</script>

<template>
	<DefinitionTable>
		<tbody>
		<tr>
			<td class="title">启用过时缓存</td>
			<td>
				<TCheckboxBinary v-model="config.isOn"></TCheckboxBinary>
				<p class="comment">
					选中后，在更新缓存失败后会尝试读取过时的缓存。
				</p>
			</td>
		</tr>
		<tr v-show="config.isOn">
			<td>有效期</td>
			<td>
				<TimeDurationBox :v-value="config.life"></TimeDurationBox>
				<p class="comment">缓存在过期之后，仍然保留的时间。</p>
			</td>
		</tr>
		<tr v-show="config.isOn">
			<td>状态码</td>
			<td>
				<HTTPStatusBox :v-status-list="config.status"></HTTPStatusBox>
				<p class="comment">在这些状态码出现时使用过时缓存，默认支持
					<CodeLabel>50x</CodeLabel>
					状态码。
				</p>
			</td>
		</tr>
		<tr v-show="config.isOn">
			<td>支持stale-if-error</td>
			<td>
				<TCheckboxBinary v-model="config.supportStaleIfErrorHeader"></TCheckboxBinary>
				<p class="comment">选中后，支持在Cache-Control中通过
					<CodeLabel>stale-if-error</CodeLabel>
					指定过时缓存有效期。
				</p>
			</td>
		</tr>
		</tbody>
	</DefinitionTable>
</template>

<style scoped>
</style>
