<script setup>

import {ref} from "vue"
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import ValuesBox from "@/components/common/ValuesBox.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import MoreOptionsTbody from "@/components/common/MoreOptionsTbody.vue";
import SizeCapacityBox from "@/components/common/SizeCapacityBox.vue";
import HTTPRequestCondsBox from "@/components/server/HTTPRequestCondsBox.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-webp-config", "v-is-location", "v-is-group", "v-require-cache", "minCacheLife"])

const {config, moreOptionsVisible} = (function () {
	let config = props.vWebpConfig
	if (config == null) {
		config = {
			isPrior: false,
			isOn: false,
			minLength: {count: 0, "unit": "kb"},
			maxLength: {count: 0, "unit": "kb"},
			mimeTypes: ["image/png", "image/jpeg", "image/bmp", "image/x-ico"],
			extensions: [".png", ".jpeg", ".jpg", ".bmp", ".ico"],
			conds: null
		}
	}

	if (config.mimeTypes == null) {
		config.mimeTypes = []
	}
	if (config.extensions == null) {
		config.extensions = []
	}

	return {
		config: ref(config),
		moreOptionsVisible: ref(false)
	}
})()

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

const changeExtensions = function (values) {
	values.forEach(function (v, k) {
		if (v.length > 0 && v[0] != ".") {
			values[k] = "." + v
		}
	})
	config.value.extensions = values
}

const changeMimeTypes = function (values) {
	config.value.mimeTypes = values
}

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

const changeConds = function (conds) {
	config.value.conds = conds
}

const cacheSettingURL = window.location.toString().replace("/webp?", "/cache?")

</script>

<template>
	<div>
		<input type="hidden" name="webpJSON" :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">启用WebP压缩</td>
				<td>
					<TCheckboxBinary value="1" v-model="config.isOn"/>
					<p class="comment">选中后表示开启自动WebP压缩；图片的宽和高均不能超过16383像素<span v-if="vRequireCache">；只有满足 <a :href="cacheSettingURL">[缓存条件]</a> 的图片内容才会被转换</span><span v-if="vRequireCache && minCacheLife > 0">；最小缓存时间为：{{minCacheLife}}秒</span>。
					</p>
				</td>
			</tr>
			</tbody>
			<MoreOptionsTbody @change="changeAdvancedVisible" v-if="isOn()"></MoreOptionsTbody>
			<tbody v-show="isOn() && moreOptionsVisible">
			<tr>
				<td>支持的扩展名</td>
				<td>
					<ValuesBox :values="config.extensions" @change="changeExtensions" placeholder="比如 .html"></ValuesBox>
					<p class="comment">含有这些扩展名的URL将会被转成WebP，不区分大小写。</p>
				</td>
			</tr>
			<tr>
				<td>支持的MimeType</td>
				<td>
					<ValuesBox :values="config.mimeTypes" @change="changeMimeTypes" placeholder="比如 text/*"></ValuesBox>
					<p class="comment">响应的Content-Type里包含这些MimeType的内容将会被转成WebP。</p>
				</td>
			</tr>
			<tr>
				<td>内容最小长度</td>
				<td>
					<SizeCapacityBox :v-name="'minLength'" :v-value="config.minLength" :v-unit="'kb'"></SizeCapacityBox>
					<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
				</td>
			</tr>
			<tr>
				<td>内容最大长度</td>
				<td>
					<SizeCapacityBox :v-name="'maxLength'" :v-value="config.maxLength" :v-unit="'mb'"></SizeCapacityBox>
					<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
				</td>
			</tr>
			<tr>
				<td>匹配条件</td>
				<td>
					<HTTPRequestCondsBox :v-conds="config.conds" @change="changeConds"></HTTPRequestCondsBox>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
