<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./certPopup.js"
import "./certPopup.css"
import TLabel from "@/components/ui/TLabel.vue";
import CardView from "@/components/common/CardView.vue";
import TTabView from "@/components/ui/TTabView.vue";
import TTabs from "@/components/ui/TTabs.vue";
import TTabPanels from "@/components/ui/TTabPanels.vue";
import TTab from "@/components/ui/TTab.vue";
import TTabPanel from "@/components/ui/TTabPanel.vue";
import CardRow from "@/components/common/CardRow.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>证书详情</header>

		<TTabView v-model="ctx.tab">
			<TTabs>
				<TTab code="basic">基本信息</TTab>
				<TTab code="preview">预览</TTab>
			</TTabs>
			<TTabPanels>
				<TTabPanel code="basic">
					<CardView cols="3">
						<CardRow>
							<template #name>证书说明</template>
							<template #value>{{ ctx.info.name }}</template>
						</CardRow>
						<CardRow v-if="ctx.info.description.length > 0">
							<template #name>详细说明</template>
							<template #value>{{ ctx.info.description }}</template>
						</CardRow>
						<CardRow>
							<template #name>证书状态</template>
							<template #value>
								<TLabel size="small" outlined="" class="green" v-if="ctx.info.isAvailable">有效中</TLabel>
								<TLabel size="small" class="red" v-else>已过期</TLabel>
							</template>
						</CardRow>
						<CardRow>
							<template #name>发行信息</template>
							<template #value>
								<div v-if="ctx.info.commonNames != null">
									<div v-for="(commonName, index) in ctx.info.commonNames">
										<span v-html="ctx.indent(index)"></span>{{ commonName }}
									</div>
								</div>
							</template>
						</CardRow>
						<CardRow full>
							<template #name>域名</template>
							<template #value>
								<div class="label-group">
									<TLabel outlined="" v-for="dnsName in ctx.info.dnsNames">{{ dnsName }}</TLabel>
								</div>
							</template>
						</CardRow>
						<CardRow full>
							<template #name>有效期</template>
							<template #value>{{ ctx.info.beginTime }} - {{ ctx.info.endTime }}</template>
						</CardRow>
						<CardRow full>
							<template #name>证书文件下载</template>
							<template #value>
								<a :href="'/servers/certs/downloadZip?certId=' + ctx.info.id" target="_blank">[ZIP下载]</a> &nbsp;
								<a :href="'/servers/certs/downloadCert?certId=' + ctx.info.id" target="_blank">[证书下载]</a> &nbsp;
								<a :href="'/servers/certs/downloadKey?certId=' + ctx.info.id" v-if="!ctx.info.isCA" target="_blank">[私钥下载]</a>
							</template>
						</CardRow>
					</CardView>
				</TTabPanel>
				<TTabPanel code="preview">
					<CardView>
						<CardRow full>
							<template #name>证书预览</template>
							<template #value>
								<pre class="pre-box" style="font-family: Menlo, Monaco, 'Courier New', monospace !important">{{ ctx.info.certString }}</pre>
								<div style="margin-top:1em">
									<a :href="'/servers/certs/viewCert?certId=' + ctx.info.id" target="_blank">[浏览器新窗口打开]</a>
								</div>
							</template>
						</CardRow>
						<CardRow full v-if="!ctx.info.isCA">
							<template #name>私钥预览</template>
							<template #value>
								<pre class="pre-box" style="font-family: Menlo, Monaco, 'Courier New', monospace !important">{{ ctx.info.keyString }}</pre>
								<div style="margin-top: 1em">
									<a :href="'/servers/certs/viewKey?certId=' + ctx.info.id" target="_blank">[浏览器新窗口打开]</a>
								</div>
							</template>
						</CardRow>
					</CardView>
				</TTabPanel>
			</TTabPanels>
		</TTabView>
	</PopupLayout>
</template>

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