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

const ctx = ctxRef(new Context())

</script>

<template>
	<ServerSettingLayout :ctx="ctx">
		<Menu :ctx="ctx" active-tab="fetch"></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="3600">
				<input type="hidden" name="serverId" :value="ctx.serverId"/>
				<input type="hidden" name="webId" :value="ctx.webId"/>
				<DefinitionTable>
					<tbody>
					<tr>
						<td>URL列表</td>
						<td>
							<TTextarea name="keys" rows="10" class="w-full" autofocus></TTextarea>
							<p class="comment">每行一个URL。</p>
						</td>
					</tr>
					<tr>
						<td class="title">操作结果</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>