<script setup>

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

const props = defineProps(["v-expires-time"])

const emits = defineEmits(["change"])

const {expiresTime} = (function () {
	let expiresTime = props.vExpiresTime
	if (expiresTime == null) {
		expiresTime = {
			isPrior: false,
			isOn: false,
			overwrite: true,
			autoCalculate: true,
			duration: {count: -1, "unit": "hour"}
		}
	}
	return {
		expiresTime: ref(expiresTime)
	}
})()

const notifyChange = function () {
	emits("change", expiresTime.value)
}

watch(() => expiresTime.value.isPrior, function () {
	notifyChange()
})

watch(() => expiresTime.value.isOn, function () {
	notifyChange()
})

watch(() => expiresTime.value.overwrite, function () {
	notifyChange()
})

watch(() => expiresTime.value.autoCalculate, function () {
	notifyChange()
})


</script>

<template>
	<div>
		<table class="ui table definition">
			<PriorCheckbox :v-config="expiresTime"></PriorCheckbox>
			<tbody v-show="expiresTime.isPrior">
			<tr>
				<td class="title">启用</td>
				<td>
					<TCheckboxBinary v-model="expiresTime.isOn"></TCheckboxBinary>
					<p class="comment">启用后，将会在响应的Header中添加
						<CodeLabel>Expires</CodeLabel>
						字段，浏览器据此会将内容缓存在客户端；同时，在管理后台执行清理缓存时，也将无法清理客户端已有的缓存。
					</p>
				</td>
			</tr>
			<tr v-show="expiresTime.isPrior && expiresTime.isOn">
				<td>覆盖源站设置</td>
				<td>
					<TCheckboxBinary v-model="expiresTime.overwrite"></TCheckboxBinary>
					<p class="comment">选中后，会覆盖源站Header中已有的
						<CodeLabel>Expires</CodeLabel>
						字段。
					</p>
				</td>
			</tr>
			<tr v-show="expiresTime.isPrior && expiresTime.isOn">
				<td>自动计算时间</td>
				<td>
					<TCheckboxBinary v-model="expiresTime.autoCalculate"></TCheckboxBinary>
					<p class="comment">根据已设置的缓存有效期进行计算。</p>
				</td>
			</tr>
			<tr v-show="expiresTime.isPrior && expiresTime.isOn && !expiresTime.autoCalculate">
				<td>强制缓存时间</td>
				<td>
					<TimeDurationBox :v-value="expiresTime.duration" @change="notifyChange"></TimeDurationBox>
					<p class="comment">从客户端访问的时间开始要缓存的时长。</p>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</template>

<style scoped>
</style>
