<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 TMessage from "@/components/ui/TMessage.vue";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import TLabel from "@/components/ui/TLabel.vue";
import LinkRed from "@/components/common/LinkRed.vue";
import LinkIcon from "@/components/common/LinkIcon.vue";
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

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

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

	<TMessage v-if="ctx.isRunning" info="">有任务在执行中，可能需要的时间较长，请耐心等待...</TMessage>

	<div v-if="ctx.tasks.length > 0">
		<ListTable :items="ctx.tasks" :row-class="(task) => {return task.isRunning? 'warning' : ''}">
			<Column header="ACME用户" class="email-column" frozen>
				<template #body="{data:task}">
					{{ task.acmeUser.email }}
					<div class="label-group mt-1">
						<TinyBasicLabel class="olive" v-if="task.authType == 'dns'">DNS</TinyBasicLabel>
						<TinyBasicLabel class="olive" v-if="task.authType == 'http'">HTTP</TinyBasicLabel>
					</div>
				</template>
			</Column>
			<Column header="证书域名" class="domain-column" frozen>
				<template #body="{data:task}">
					<div class="label-group">
						<div v-for="domain in task.domains">
							<TLabel outlined="">{{ domain }}</TLabel>
						</div>
					</div>
				</template>
			</Column>
			<Column header="到期时间" class="datetime-column">
				<template #body="{data:task}">
					<div v-if="task.cert != null">
						{{ task.cert.endTime }}
					</div>
					<span class="disabled" v-else>-</span>
				</template>
			</Column>
			<Column header="更新时间" class="datetime-column">
				<template #body="{data:task}">
					<div v-if="task.log != null">
						<span class="green" v-if="task.log.isOk">{{ task.log.createdTime }}</span>
						<LinkRed v-if="!task.log.isOk" title="任务执行失败，点击查看详情" @click.prevent="ctx.showError(task.log.error)">{{ task.log.createdTime }}</LinkRed>
					</div>
					<span v-else class="disabled">尚未执行</span>
				</template>
			</Column>
			<Column header="自动续期" class="bool-column">
				<template #body="{data:task}">
					<span class="green" v-if="task.autoRenew">Y</span>
					<span v-else class="disabled">N</span>
				</template>
			</Column>
			<Column header="关联证书" class="value-column">
				<template #body="{data:task}">
					<div v-if="task.cert != null">
						<a href="" @click.prevent="ctx.viewCert(task.cert.id)">
							<LinkIcon title="查看关联证书"></LinkIcon>
						</a>
					</div>
					<span class="disabled" v-else>-</span>
				</template>
			</Column>
			<Column header="操作" class="three op" frozen align-frozen="right">
				<template #body="{data:task, index}">
					<a href="" @click.prevent="ctx.updateTask(task.id)" :class="{disabled: ctx.isRunning}">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.runTask(index, task)" :class="{disabled: ctx.isRunning}">执行</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteTask(task.id)" :class="{disabled: ctx.isRunning}">删除</a>
				</template>
			</Column>
		</ListTable>

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

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