<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 "./task.js"
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";
import NavButton from "@/components/common/NavButton.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Navbar :content-name="'任务：' + ctx.task.id" :parent-items="[['任务列表', ctx.$Tea.url('.tasks')]]">
		<template #tabs>
			<NavTab :href="'.task?taskId=' + ctx.task.id" overview active></NavTab>
		</template>
		<template #buttons>
			<NavButton href="" @click.prevent="ctx.deleteTask(ctx.task.id)" action-delete>删除</NavButton>
		</template>
	</Navbar>

	<CardView>
		<CardRow>
			<template #name>任务编号</template>
			<template #value>{{ ctx.task.id }}</template>
		</CardRow>
		<CardRow>
			<template #name>任务类型</template>
			<template #value>
				<span v-if="ctx.task.type == 'purge'">刷新</span>
				<span v-if="ctx.task.type == 'fetch'">预热</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>Key类型</template>
			<template #value>
				<span v-if="ctx.task.keyType == 'key'">URL</span>
				<span v-if="ctx.task.keyType == 'prefix'">目录</span>
				<span v-if="ctx.task.keyType == 'all'">全部URL</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>创建时间</template>
			<template #value>
				{{ ctx.task.createdTime }}
			</template>
		</CardRow>
		<CardRow>
			<template #name>完成时间</template>
			<template #value>
				<span v-if="ctx.task.isDone">{{ ctx.task.doneTime }}</span>
				<span v-else class="disabled">尚未完成</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>任务状态</template>
			<template #value>
				<span v-if="ctx.task.isOk" class="green">已完成</span>
				<a :href="'/servers/components/cache/batch/task?taskId=' + ctx.task.id" v-else-if="ctx.task.isDone" class="red"><span class="red">失败</span></a>
				<span v-else-if="!ctx.task.isDone" class="grey">等待执行</span>
			</template>
		</CardRow>
	</CardView>

	<h5 class="group-header">要操作的缓存Key</h5>
	<ListTable :items="ctx.task.keys">
		<TColumn>
			<template #header>
				<span v-if="ctx.task.keyType == 'key'">URL</span>
				<span v-if="ctx.task.keyType == 'prefix'">目录</span>
				<span v-if="ctx.task.keyType == 'all'">域名</span>
			</template>
			<template #body="{data: key}">
				{{ key.key }}
			</template>
		</TColumn>
		<TColumn header="状态" class="fixed-status-column">
			<template #body="{data: key}">
				<span v-if="key.isDone && key.errors.length == 0" class="green">完成</span>
				<span v-if="key.isDone && key.errors.length > 0" class="red">失败</span>
				<span v-if="!key.isDone && !key.isDoing" class="grey">未执行</span>
				<span v-if="!key.isDone && key.isDoing" class="grey">执行中</span>
			</template>
		</TColumn>
	</ListTable>
</template>

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