<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 "./updatePopup.js"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import FileTextarea from "@/components/common/FileTextarea.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputFile from "@/components/ui/TInputFile.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const certTextField = ref()
const ctx = ctxRef(new Context(), {
	refs: {certTextField}
})

</script>

<template>
	<PopupLayout>
		<header>修改证书<span><span v-if="ctx.certConfig.dnsNames != null && ctx.certConfig.dnsNames.length > 0" class="!font-normal text-base text-gray-500">&nbsp; （包含{{ ctx.certConfig.dnsNames[0] }}<var v-if="ctx.certConfig.dnsNames.length > 1" class="not-italic">等{{ ctx.certConfig.dnsNames.length }}个</var>域名）</span></span>
		</header>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="certId" :value="ctx.certConfig.id"/>
			<input type="hidden" name="textMode" :value="ctx.textMode ? 1 : 0"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">证书说明 *</td>
					<td>
						<TInputText name="name" maxlength="100" autofocus v-model="ctx.certConfig.name" class="w-full"/>
						<p class="comment">可以简单说明证书的用途。</p>
					</td>
				</tr>
				<tr>
					<td>证书类型</td>
					<td>
						<TSelect name="isCA" v-model="ctx.isCA">
							<TOption value="0">加密证书</TOption>
							<TOption value="1">CA证书</TOption>
						</TSelect>
					</td>
				</tr>
				<tr>
					<td><span v-if="ctx.textMode">输入证书内容</span><span v-else>选择证书文件</span></td>
					<td>
						<TInputFile type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert, .pem" v-if="!ctx.textMode"/>
						<FileTextarea class="w-full" rows="10" ref="certTextField" spellcheck="false" name="certText" placeholder="-----BEGIN CERTIFICATE-----" v-if="ctx.textMode" style="font-size: 0.7em"></FileTextarea>
						<p class="comment">
							<a href="" @click.prevent="ctx.switchTextMode">[<span v-if="!ctx.textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息<span v-if="ctx.textMode">，可以直接拖动证书文件到输入框，留空表示不修改</span>。
						</p>
					</td>
				</tr>
				<tr v-show="ctx.isCA == 0">
					<td><span v-if="ctx.textMode">输入私钥内容</span><span v-else>选择私钥文件</span></td>
					<td>
						<TInputFile type="file" name="keyFile" accept="application/pkcs8, application/x-pem-file, .key, .pem" v-if="!ctx.textMode"/>
						<FileTextarea class="w-full" rows="10" spellcheck="false" name="keyText" placeholder="-----BEGIN RSA PRIVATE KEY-----" v-if="ctx.textMode" style="font-size: 0.7em"></FileTextarea>
						<p class="comment">
							<a href="" @click.prevent="ctx.switchTextMode">[<span v-if="!ctx.textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息<span v-if="ctx.textMode">，可以直接拖动证书文件到输入框，留空表示不修改</span>。
						</p>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr>
					<td>详细说明</td>
					<td>
						<TTextarea rows="3" name="description" maxlength="200" v-model="ctx.certConfig.description" class="w-full"></TTextarea>
					</td>
				</tr>
				<tr>
					<td>启用当前证书</td>
					<td>
						<TCheckboxBinary name="isOn" value="1" v-model="ctx.certConfig.isOn"/>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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