<template>
	<Dialog
		:options="{
			title: 'SSH 访问',
			size: 'xl'
		}"
		v-model="show"
	>
		<template #body-content v-if="$bench.pg">
			<div v-if="certificate" class="space-y-4">
				<div class="space-y-2">
					<h4 class="text-base font-semibold text-gray-700">步骤 1</h4>
					<div class="space-y-2">
						<p class="text-base">
							执行以下 shell 命令以在本地存储 SSH 证书。
						</p>
						<ClickToCopyField
							:textContent="certificateCommand"
							:breakLines="false"
						/>
					</div>
				</div>
				<div class="space-y-2">
					<h4 class="text-base font-semibold text-gray-700">步骤 2</h4>
					<div class="space-y-1">
						<p class="text-base">
							执行以下 shell 命令以 SSH 进入您的 bench
						</p>
						<ClickToCopyField :textContent="sshCommand" />
					</div>
				</div>
				<div class="space-y-2">
					<h4 class="text-base font-semibold text-gray-700">步骤 3</h4>
					<div class="space-y-1">
						<p class="text-base">
							请谨慎使用，仅用于
							<a
								href="/docs/benches/debugging"
								class="underline"
								target="_blank"
								>调试</a
							>
							目的。不要像在本地机器上那样安装/卸载应用程序。请使用 UI 进行操作。
						</p>
					</div>
				</div>
			</div>
			<div class="space-y-2 text-p-base text-gray-700" v-else>
				<p v-if="!$bench.pg.user_ssh_key">
					看起来您还没有添加 SSH 公钥。请前往
					<router-link
						:to="{ name: 'SettingsDeveloper' }"
						class="underline"
						@click="show = false"
					>
						开发者设置</router-link
					>
					添加您的 SSH 公钥。
				</p>
				<p v-else-if="!$bench.pg.is_ssh_proxy_setup">
					此 bench 未启用 SSH 访问。请联系支持以启用访问。
				</p>
				<p v-else>
					您需要 SSH 证书才能访问您的 bench。此证书仅适用于您的公私钥对，并且有效期为 6 小时。
				</p>
				<p>
					请参阅
					<a href="/docs/benches/ssh" class="underline" target="_blank"
						>SSH 访问文档</a
					>
					了解更多详情。
				</p>
			</div>
		</template>
		<template
			#actions
			v-if="
				!certificate &&
				$bench.pg?.is_ssh_proxy_setup &&
				$bench.pg?.user_ssh_key
			"
		>
			<Button
				:loading="$releaseGroup.generateCertificate.loading"
				@click="
					async () => {
						await $releaseGroup.generateCertificate.fetch();
						await $releaseGroup.getCertificate.reload();
					}
				"
				variant="solid"
				class="w-full"
				>生成 SSH 证书</Button
			>
		</template>
		<ErrorMessage
			class="mt-3"
			:message="$releaseGroup.generateCertificate.error"
		/>
	</Dialog>
</template>

<script>
import { getCachedDocumentResource } from 'jingrow-ui';

export default {
	props: ['bench', 'releaseGroup'],
	data() {
		return {
			show: true
		};
	},
	resources: {
		bench() {
			return {
				type: 'document',
				pagetype: 'Bench',
				name: this.bench,
				onSuccess(pg) {
					if (pg.is_ssh_proxy_setup && pg.user_ssh_key) {
						this.$releaseGroup.getCertificate.reload();
					}
				}
			};
		}
	},
	computed: {
		$bench() {
			return this.$resources.bench;
		},
		$releaseGroup() {
			return getCachedDocumentResource('Release Group', this.releaseGroup);
		},
		certificate() {
			return this.$releaseGroup.getCertificate.data;
		},
		sshCommand() {
			if (!this.$bench.pg) return;
return `ssh ${this.$bench.pg.name}@${this.$bench.pg.proxy_server} -p 2222`;
		},
		certificateCommand() {
			if (this.certificate) {
				return `echo '${this.certificate.ssh_certificate?.trim()}' > ~/.ssh/id_${
					this.certificate.key_type
				}-cert.pub`;
			}
			return null;
		}
	}
};
</script>