<script setup>
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./purge.js"
import Menu from "@/views/servers/server/settings/cache/@menu.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TRadio from "@/components/ui/TRadio.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import PostForm from "@/components/form/PostForm.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";

const keysBox = ref()
const ctx = ctxRef(new Context(), {
	refs: {keysBox}
})

</script>

<template>
	<ServerSettingLayout :ctx="ctx">
		<Menu :ctx="ctx" active-tab="purge"></Menu>

		<div v-show="ctx.webConfig.cache == null || !ctx.webConfig.cache.isOn">
			<NotFoundInfo disable-spacing>没有开启缓存，暂时不需要刷新。</NotFoundInfo>
		</div>
		<div v-show="ctx.webConfig.cache != null && ctx.webConfig.cache.isOn">
			<p class="!mb-4">可以在这里批量刷新一组URL缓存。</p>

			<PostForm action="$" @before="ctx.before" @success="ctx.success" @fail="ctx.fail" @done="ctx.done" timeout="300">
				<input type="hidden" name="serverId" :value="ctx.serverId"/>
				<input type="hidden" name="webId" :value="ctx.webId"/>
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">URL类型</td>
						<td>
							<div class="flex flex-wrap gap-4">
								<TRadio name="keyType" :value="'key'" v-model="ctx.keyType">URL</TRadio>
								<TRadio name="keyType" :value="'prefix'" v-model="ctx.keyType">目录</TRadio>
								<TRadio name="keyType" :value="'all'" v-model="ctx.keyType">全部URL</TRadio>
							</div>
							<p class="comment" v-if="ctx.keyType == 'key'">每行一个URL，比如
								<CodeLabel>https://example.com/hello/world.html</CodeLabel>
								。
							</p>
							<p class="comment" v-if="ctx.keyType == 'prefix'">每行一个URL目录，比如
								<CodeLabel>https://example.com/hello/</CodeLabel>
								；如果只填写域名部分，表示清理全站，比如
								<CodeLabel>https://example.com/</CodeLabel>
								。
							</p>
							<p class="comment" v-if="ctx.keyType == 'all'">清理当前网站下所有URL的缓存。</p>
						</td>
					</tr>
					<tr v-show="ctx.keyType != 'all'">
						<td>
							<span v-if="ctx.keyType == 'key'">URL</span>
							<span v-if="ctx.keyType == 'prefix'">目录</span>
						</td>
						<td>
							<TTextarea name="keys" rows="10" ref="keysBox" class="w-full"></TTextarea>
						</td>
					</tr>
					<tr>
						<td>操作结果</td>
						<td>
							<div v-if="ctx.isRequesting">数据发送中...</div>
							<span class="red" v-if="!ctx.isRequesting && !ctx.isOk && ctx.message.length > 0">失败：{{ ctx.message }}</span>
							<div v-if="!ctx.isRequesting && !ctx.isOk && ctx.failKeys.length > 0" class="fail-keys-box">
								<div v-for="failKey in ctx.failKeys">
									<span class="red">{{ failKey.key }}: {{ failKey.reason }}</span>
								</div>
							</div>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>
				<SubmitButton v-if="!ctx.isRequesting">提交</SubmitButton>
			</PostForm>
		</div>
	</ServerSettingLayout>
</template>

<style lang="postcss" scoped>
</style>