<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 "./tasks.js"
import Menu from "@/views/servers/cache/@menu.vue";
import Pager from "@/components/common/Pager.vue";
import TColumn from "@/components/ui/TColumn.vue";
import ListTable from "@/components/common/ListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

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

	<NotFoundInfo disable-spacing v-if="ctx.tasks.length == 0">暂时还没有任务。</NotFoundInfo>

	<div  v-if="ctx.tasks.length > 0">
		<ListTable :items="ctx.tasks">
			<TColumn header="任务编号" class="normal-value-column" frozen>
				<template #body="{data: task}">
					<a :href="'/servers/cache/task?taskId=' + task.id">{{task.id}}</a>
				</template>
			</TColumn>
			<TColumn header="任务类型" class="normal-value-column">
				<template #body="{data: task}">
					<span v-if="task.type == 'purge'">刷新</span>
					<span v-if="task.type == 'fetch'">预热</span>
				</template>
			</TColumn>
			<TColumn header="Key类型" class="normal-value-column">
				<template #body="{data: task}">
					<span v-if="task.keyType == 'key'">URL</span>
					<span v-if="task.keyType == 'prefix'">目录</span>
					<span v-if="task.keyType == 'all'">全部URL</span>
				</template>
			</TColumn>
			<TColumn header="创建时间" class="datetime-column">
				<template #body="{data: task}">
					{{task.createdTime}}
				</template>
			</TColumn>
			<TColumn header="任务状态" class="fixed-status-column">
				<template #body="{data: task}">
					<span v-if="task.isOk" class="green">已完成</span>
					<a :href="'/servers/cache/task?taskId=' + task.id" v-else-if="task.isDone" class="red"><span class="red">失败</span></a>
					<span v-else-if="!task.isDone" class="grey">等待执行</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data: task}">
					<a :href="'/servers/cache/task?taskId=' + task.id">详情</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteTask(task.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>
	</div>

	<Pager :data="ctx.page"></Pager>
</template>

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