<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 Pager from "@/components/common/Pager.vue";
import TLabel from "@/components/ui/TLabel.vue";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import TButton from "@/components/ui/TButton.vue";
import TInputText from "@/components/ui/TInputText.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Navbar>
		<template #tabs>
			<NavTab :href="'/servers/certs?keyword=' + ctx.keyword" :active="ctx.type == ''">
				<template #name>
					所有证书({{ ctx.countAll }})
				</template>
			</NavTab>
			<NavTab :href="'/servers/certs?type=ca&keyword=' + ctx.keyword" :active="ctx.type == 'ca'">
				<template #name>
					CA证书({{ ctx.countCA }})
				</template>
			</NavTab>
			<NavTab :href="'/servers/certs?type=available&keyword=' + ctx.keyword" :active="ctx.type == 'available'">
				<template #name>
					有效证书({{ ctx.countAvailable }})
				</template>
			</NavTab>
			<NavTab :href="'/servers/certs?type=expired&keyword=' + ctx.keyword" :active="ctx.type == 'expired'">
				<template #name>
					过期证书<span :class="{red: ctx.countExpired > 0}">({{ ctx.countExpired }})</span>
				</template>
			</NavTab>
			<NavTab :href="'/servers/certs?type=7days&keyword=' + ctx.keyword" :active="ctx.type == '7days'">
				<template #name>
					7天内过期<span :class="{red: ctx.count7Days > 0}">({{ ctx.count7Days }})</span>
				</template>
			</NavTab>
			<NavTab :href="'/servers/certs?type=30days&keyword=' + ctx.keyword" :active="ctx.type == '30days'">
				<template #name>
					30天过期({{ ctx.count30Days }})
				</template>
			</NavTab>
			<NavTab separator></NavTab>
			<NavTab static @click.prevent="ctx.uploadCert" name="上传证书" action-upload></NavTab>
			<NavTab static @click.prevent="ctx.uploadBatch" name="批量上传" action-upload></NavTab>
		</template>
	</Navbar>

	<form>
		<div class="ui fields inline">
			<div class="ui field">
				<TInputText name="keyword" placeholder="关键词" style="width:10em" v-model="ctx.keyword"/>
			</div>
			<div class="ui field">
				<TButton type="submit" secondary="">搜索</TButton>
			</div>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.certs.length == 0">暂时还没有相关的证书。</NotFoundInfo>

	<div v-if="ctx.certs.length > 0" class="mt-4">
		<ListTable :items="ctx.certs">
			<Column header="证书说明" class="title-column" frozen>
				<template #body="{data:cert}">
					{{ cert.name }}
					<div v-if="cert.isCA" class="mt-1">
						<TinyBasicLabel class="olive">CA</TinyBasicLabel>
					</div>
					<div v-if="cert.isACME" class="mt-1">
						<TinyBasicLabel class="olive" v-tooltip.bottom="'通过ACME协议免费申请的证书'">ACME</TinyBasicLabel>
					</div>
					<div v-if="cert.isSelfSigned" class="mt-1">
						<TinyBasicLabel class="olive" v-tooltip.bottom="'通过系统提供的自签名证书生成工具生成的证书'">自签名</TinyBasicLabel>
					</div>
				</template>
			</Column>
			<Column header="顶级发行组织" class="title-column">
				<template #body="{data:cert}">
					<span v-if="cert.commonNames != null && cert.commonNames.length > 0">{{ cert.commonNames[cert.commonNames.length - 1] }}</span>
				</template>
			</Column>
			<Column header="域名" class="domain-column">
				<template #body="{data:cert}">
					<div class="label-group">
						<div v-for="dnsName in cert.dnsNames">
							<TLabel outlined="">{{ dnsName }}</TLabel>
						</div>
					</div>
				</template>
			</Column>
			<Column header="生效日期" class="date-column">
				<template #body="{data:cert, index}">
					{{ ctx.certInfos[index].beginDay }}
				</template>
			</Column>
			<Column header="过期日期" class="date-column">
				<template #body="{data:cert, index}">
					{{ ctx.certInfos[index].endDay }}
				</template>
			</Column>
			<Column header="引用网站" class="value-column">
				<template #body="{data:cert, index}">
					{{ ctx.certInfos[index].countServers }}
				</template>
			</Column>
			<Column header="状态" class="status-column">
				<template #body="{data:cert, index}">
					<TLabel outlined="" size="small" class="red" v-if="!ctx.certInfos[index].isOn">未启用</TLabel>
					<TLabel outlined="" size="small" class="red" v-else-if="ctx.certInfos[index].isExpired">已过期</TLabel>
					<TLabel outlined="" size="small" class="green" v-else>有效中</TLabel>
				</template>
			</Column>
			<Column header="操作" class="three op" frozen align-frozen="right">
				<template #body="{data:cert}">
					<a href="" @click.prevent="ctx.viewCert(cert.id)">详情</a> &nbsp;
					<a href="" @click.prevent="ctx.updateCert(cert.id)">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteCert(cert.id)">删除</a>
				</template>
			</Column>
		</ListTable>

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

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