<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import Menu from "./@menu.vue"
import PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import TOption from "@/components/ui/TOption.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TButton from "@/components/ui/TButton.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

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

	<div>
		<span class="grey">刷新缓存指的是标记URL列表或目录为失效状态，当有新的用户请求这些URL时，会再次从源站读取最新的内容。</span>
	</div>

	<PostForm action="$" @success="ctx.success" @before="ctx.before" @done="ctx.done" class="mt-4">
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">刷新类型 *</td>
				<td>
					<TSelect name="keyType" v-model="ctx.keyType">
						<TOption value="key">URL</TOption>
						<TOption value="prefix">目录</TOption>
					</TSelect>
				</td>
			</tr>
			<tr>
				<td>
					<span v-if="ctx.keyType == 'key'">URL列表 *</span>
					<span v-if="ctx.keyType == 'prefix'">目录列表 *</span>
				</td>
				<td>
					<TTextarea rows="20" name="urlList" ref="keysBox" class="w-full"></TTextarea>
					<p class="comment">每行一条，每次最多提交{{ ctx.maxKeysPerTask }}个URL，每天最多提交{{ ctx.maxKeysPerDay }}个<span v-if="ctx.quotaKeysToday > 0">，今日剩余{{ ctx.quotaKeysToday }}个</span>。
					</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<SubmitButton v-if="!ctx.isRequesting">刷新缓存</SubmitButton>
		<TButton disabled type="button" v-if="ctx.isRequesting">处理中...</TButton>
	</PostForm>
</template>

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