<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 "./uploadBatchPopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import TButton from "@/components/ui/TButton.vue";
import PostForm from "@/components/form/PostForm.vue";
import TInputFile from "@/components/ui/TInputFile.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>批量上传证书</header>

		<PostForm @success="ctx.successUpload" action="$" @before="ctx.before" @done="ctx.done" timeout="600">
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">选择要上传的证书和私钥文件 *</td>
					<td>
						<TInputFile type="file" name="certFiles" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert, application/pkcs8, .key, .pem" multiple="multiple"/>
						<p class="comment">点击后在弹出的文件选择框中支持多选；不用担心文件名和顺序问题，系统会自动匹配。</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton v-show="!ctx.isRequesting">上传</SubmitButton>
			<TButton disabled type="button" v-if="ctx.isRequesting">上传中...</TButton>
		</PostForm>
	</PopupLayout>
</template>

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