<script setup>

import "@/lib/array.js"
import { ref } from "vue"
import TInputText from "@/components/ui/TInputText.vue";
import TimeDurationBox from "@/components/common/TimeDurationBox.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TimeDurationText from "@/components/common/TimeDurationText.vue";
import TButton from "@/components/ui/TButton.vue";
import TLabel from "@/components/ui/TLabel.vue";

const extInputRef = ref()
const pathInputRef = ref()
const { conds, addingExt, addingPath, extDuration, pathDuration } = (function () {
	return {
		conds: ref([]),
		addingExt: ref(false),
		addingPath: ref(false),

		extDuration: ref(null),
		pathDuration: ref(null)
	}
})()

const addExt = function () {
	addingExt.value = !addingExt.value
	addingPath.value = false

	if (addingExt.value) {
		setTimeout(function () {
			if (extInputRef.value != null) {
				extInputRef.value.focus()
			}
		})
	}
}

const changeExtDuration = function (duration) {
	extDuration.value = duration
}

const confirmExt = function () {
	let value = extInputRef.value.value
	if (value.length == 0) {
		return
	}

	let exts = []
	let pieces = value.split(/[,，]/)
	pieces.forEach(function (v) {
		v = v.trim()
		v = v.replace(/\s+/, "")
		if (v.length > 0) {
			if (v[0] != ".") {
				v = "." + v
			}
			exts.push(v)
		}
	})

	conds.value.push({
		type: "url-extension",
		value: JSON.stringify(exts),
		duration: extDuration.value
	})
	extInputRef.value.value = ""
	cancel()
}

const addPath = function () {
	addingExt.value = false
	addingPath.value = !addingPath.value

	if (addingPath.value) {
		setTimeout(function () {
			if (pathInputRef.value != null) {
				pathInputRef.value.focus()
			}
		})
	}
}

const changePathDuration = function (duration) {
	pathDuration.value = duration
}

const confirmPath = function () {
	let value = pathInputRef.value.value
	if (value.length == 0) {
		return
	}

	if (value[0] != "/") {
		value = "/" + value
	}

	conds.value.push({
		type: "url-prefix",
		value: value,
		duration: pathDuration.value
	})
	pathInputRef.value.value = ""
	cancel()
}

const remove = function (index) {
	conds.value.$remove(index)
}

const cancel = function () {
	addingExt.value = false
	addingPath.value = false
}


</script>

<template>
	<div>
		<input type="hidden" name="cacheCondsJSON" :value="JSON.stringify(conds)" />
		<div v-if="conds.length > 0" class="flex flex-wrap items-center">
			<TLabel outlined="" v-for="(cond, index) in conds">
				<span v-if="cond.type == 'url-extension'">扩展名</span>
				<span v-if="cond.type == 'url-prefix'">路径</span>：{{ cond.value }} &nbsp; <span class="grey small">(
					<TimeDurationText :v-value="cond.duration"></TimeDurationText>)</span> &nbsp;
				<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
			</TLabel>
			<TDivider style="margin-top: 8px; margin-bottom: 16px;"></TDivider>
		</div>

		<div class="flex flex-col gap-[12px]">
			<!-- 添加扩展名 -->
			<div v-show="addingExt">
				<div class="ui fields flex items-center gap-[12px]">
					<div class="ui field">
						<TInputText type="text" placeholder="扩展名，比如.png, .gif，英文逗号分割" style="width:20em"
							ref="extInputRef" @keyup.enter="confirmExt" @keypress.enter.prevent="1" />
					</div>
					<div class="ui field">
						<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changeExtDuration">
						</TimeDurationBox>
					</div>
					<div class="ui field flex gap-[12px] items-center">
						<TButton secondary="" size="small" @click.prevent="confirmExt" class="w-[57px] h-[34px]">确定
						</TButton>
						<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
					</div>
				</div>
			</div>

			<!-- 添加路径 -->
			<div v-show="addingPath">
				<div class="ui fields inline">
					<div class="ui field">
						<TInputText type="text" placeholder="路径，以/开头" style="width:20em" ref="pathInputRef"
							@keyup.enter="confirmPath" @keypress.enter.prevent="1" />
					</div>
					<div class="ui field">
						<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changePathDuration">
						</TimeDurationBox>
					</div>
					<div class="ui field">
						<TButton type="button" secondary="" size="small" @click.prevent="confirmPath">确定</TButton>&nbsp;
						<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
					</div>
				</div>
			</div>

			<div >
				<TButton type="button" secondary="" size="small" @click.prevent="addExt">+缓存扩展名</TButton> &nbsp;
				<TButton type="button" secondary="" size="small" @click.prevent="addPath">+缓存路径</TButton>
			</div>
		</div>
	</div>
</template>

<style scoped></style>
