<template>
	<div
		class="flex h-screen w-screen items-center justify-center"
		v-if="$resources.saasProduct.loading || $resources.siteRequest.loading"
	>
		<Spinner class="mr-2 w-4" />
		<p class="text-gray-800">加载中</p>
	</div>
	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
		<div class="w-full overflow-auto">
			<LoginBox
				v-if="$resources?.siteRequest?.pg?.status === 'Site Created'"
				title="站点创建成功"
				:subtitle="`您的试用站点已准备就绪，地址为
					${$resources?.siteRequest?.pg?.domain || $resources?.siteRequest?.pg?.site}`"
			>
				<template v-slot:logo v-if="saasProduct">
					<div class="mx-auto flex items-center space-x-2">
						<img
							class="inline-block h-7 w-7 rounded-sm"
							:src="saasProduct?.logo"
						/>
						<span
							class="select-none text-xl font-semibold tracking-tight text-gray-900"
						>
							{{ saasProduct?.title }}
						</span>
					</div>
				</template>
				<div>
					<div
						class="mb-4 mt-16 flex flex-col items-center justify-center space-y-4"
					>
						<Button
							variant="solid"
							class="w-2/5"
							icon-right="external-link"
							@click="loginToSite"
							:loading="this.$resources?.siteRequest?.getLoginSid.loading"
						>
							登录
						</Button>
					</div>
				</div>
				<ErrorMessage
					class="w-full text-center"
					:message="this.$resources?.siteRequest?.getLoginSid.error"
				/>
				<template v-slot:footer>
					<div
						class="mt-2 flex w-full items-center justify-center text-sm text-gray-600"
					>
						由 Jingrow 提供支持
					</div>
				</template>
			</LoginBox>
			<LoginBox
				v-else-if="this.$resources?.siteRequest?.pg?.status === 'Error'"
				title="站点创建失败"
				:subtitle="
					this.$resources?.siteRequest?.pg?.domain ||
					this.$resources?.siteRequest?.pg?.site
				"
			>
				<template v-slot:logo v-if="saasProduct">
					<div class="mx-auto flex items-center space-x-2">
						<img
							class="inline-block h-7 w-7 rounded-sm"
							:src="saasProduct?.logo"
						/>
						<span
							class="select-none text-xl font-semibold tracking-tight text-gray-900"
						>
							{{ saasProduct?.title }}
						</span>
					</div>
				</template>
				<template v-slot:default>
					<div class="flex h-40 flex-col items-center justify-center px-10">
						<div class="text-center text-base leading-5 text-gray-800">
							<p>看起来出了点问题</p>
							<p>
								请联系
								<a href="mailto:support@jingrow.com" class="underline">
									support@jingrow.com</a
								><br />
								以解决问题
							</p>
						</div>
					</div>
				</template>
				<template v-slot:footer>
					<div
						class="mt-2 flex w-full items-center justify-center text-sm text-gray-600"
					>
						由 Jingrow 提供支持
					</div>
				</template>
			</LoginBox>
			<LoginBox
				v-else
				title="正在创建您的站点"
				:subtitle="
					this.$resources?.siteRequest?.pg?.domain ||
					this.$resources?.siteRequest?.pg?.site
				"
			>
				<template v-slot:logo v-if="saasProduct">
					<div class="mx-auto flex items-center space-x-2">
						<img
							class="inline-block h-7 w-7 rounded-sm"
							:src="saasProduct?.logo"
						/>
						<span
							class="select-none text-xl font-semibold tracking-tight text-gray-900"
						>
							{{ saasProduct?.title }}
						</span>
					</div>
				</template>
				<template v-slot:default>
					<div class="flex h-40 items-center justify-center">
						<Progress
							class="px-10"
							size="md"
							:value="progressCount"
:label="currentBuildStep"
						/>
					</div>
				</template>
				<template v-slot:footer>
					<div
						class="mt-2 flex w-full items-center justify-center text-sm text-gray-600"
					>
						由 Jingrow 提供支持
					</div>
				</template>
			</LoginBox>
		</div>
	</div>
</template>
<script>
import LoginBox from '../../components/auth/LoginBox.vue';
import { Progress } from 'jingrow-ui';

export default {
	name: 'SignupLoginToSite',
	props: ['productId'],
	components: {
		LoginBox,
		Progress,
	},
	data() {
		return {
			product_trial_request: this.$route.query.product_trial_request,
			progressCount: 0,
			currentBuildStep: '准备构建',
		};
	},
	resources: {
		saasProduct() {
			return {
				type: 'document',
				pagetype: 'Product Trial',
				name: this.productId,
				auto: true,
			};
		},
		siteRequest() {
			return {
				type: 'document',
				pagetype: 'Product Trial Request',
				name: this.product_trial_request,
				realtime: true,
				auto: true,
				onSuccess(pg) {
					if (
						pg.status == 'Wait for Site' ||
						pg.status == 'Completing Setup Wizard' ||
						pg.status == 'Adding Domain'
					) {
						this.$resources.siteRequest.getProgress.reload();
					}
				},
				whitelistedMethods: {
					getProgress: {
						method: 'get_progress',
						makeParams() {
							return {
								current_progress:
									this.$resources.siteRequest.getProgress.data?.progress || 0,
							};
						},
						onSuccess: (data) => {
							this.currentBuildStep =
								data.current_step || this.currentBuildStep;
							this.progressCount += 1;

							if (
								!(
									this.$resources.siteRequest.getProgress.error &&
									this.progressCount <= 10
								)
							) {
								this.progressCount = Math.round(data.progress * 10) / 10;
								setTimeout(() => {
									this.$resources.siteRequest.getProgress.reload();
								}, 2000);
							}
						},
					},
					getLoginSid: {
						method: 'get_login_sid',
						onSuccess(data) {
							// Backend returns complete URL with correct route
							if (data) {
								window.open(data, '_blank');
							}
						},
					},
				},
			};
		},
	},
	computed: {
		saasProduct() {
			return this.$resources.saasProduct.pg;
		},
	},
	methods: {
		loginToSite() {
			this.$resources.siteRequest.getLoginSid.submit();
		},
	},
};
</script>