<template>
	<Dialog
		v-model="show"
		:options="{
			title: '在您的站点上安装应用',
			size: '4xl'
		}"
	>
		<template #body-content>
			<ObjectList :options="listOptions" />
		</template>
	</Dialog>
</template>

<script>
import { getCachedDocumentResource } from 'jingrow-ui';
import { defineAsyncComponent, h } from 'vue';
import { toast } from 'vue-sonner';
import { renderDialog } from '../../utils/components';
import router from '../../router';
import ObjectList from '../ObjectList.vue';
import { getToastErrorMessage } from '../../utils/toast';

export default {
	props: {
		site: {
			type: String,
			required: true
		}
	},
	emits: ['installed'],
	components: {
		ObjectList
	},
	data() {
		return {
			show: true
		};
	},
	computed: {
		$site() {
			return getCachedDocumentResource('Site', this.site);
		},
		listOptions() {
			const handleInstall = row => {
				if (this.$site.installApp.loading) return;

				if (row.plans) {
					this.show = false;

					import('./SiteAppPlanSelectDialog.vue').then(module => {
						const SiteAppPlanSelectDialog = module.default;
						
						const component = h(SiteAppPlanSelectDialog, {
							app: row,
							currentPlan: null,
							onPlanSelected: plan => {
								handleAppInstall(row, plan);
							},
							"onPlan-selected": plan => {
								handleAppInstall(row, plan);
							},
						});
						
						renderDialog(component);
					}).catch(err => {
						toast.error('加载组件失败');
						this.show = true;
					});
				} else {
					toast.promise(
						this.$site.installApp.submit({
							app: row.app
						}),
						{
							loading: '正在创建安装任务...',
							success: jobId => {
								this.$emit('installed');
								this.show = false;
								
								try {
									if (jobId) {
										router.push({
											name: 'Site Job',
											params: {
												name: this.site,
												id: String(jobId)
											}
										}).catch(err => {
										});
									} else {
									}
								} catch (err) {
								}
								
								return '应用安装任务已创建';
							},
							error: e => {
								return getToastErrorMessage(e);
							}
						}
					);
				}
			};

			const handleAppInstall = (app, plan) => {
				toast.promise(
					this.$site.installApp.submit({
						app: app.app,
						plan: plan.name
					}),
					{
						loading: '正在创建安装任务...',
						success: jobId => {
							this.$emit('installed');
							this.show = false;
							
							try {
								if (jobId) {
									router.push({
										name: 'Site Job',
										params: {
											name: this.site,
											id: String(jobId)
										}
									}).catch(err => {
									});
								} else {
								}
							} catch (err) {
							}
							
							return '应用安装任务已创建';
						},
						error: e => {
							return getToastErrorMessage(e);
						}
					}
				);
			};

			return {
				label: '应用',
				fieldname: 'app',
				fieldtype: 'ListSelection',
				emptyStateMessage:
					'未找到应用' +
					(!this.$site.pg?.group_public
						? '。请从您的工作台添加它们。'
						: ''),
				columns: [
					{
						label: '标题',
						fieldname: 'title',
						class: 'font-medium',
						width: 2,
						format: (value, row) => value || row.app_title
					},
					{
						label: '仓库',
						fieldname: 'repository_owner',
						class: 'text-gray-600',
						width: '10rem'
					},
					{
						label: '版本',
						fieldname: 'branch',
						class: 'text-gray-600',
						width: '20rem'
					},
					{
						label: '',
						fieldname: '',
						align: 'right',
						type: 'Button',
						width: '5rem',
						Button({ row }) {
							return {
								label: '安装',
								onClick: () => {
									handleInstall(row);
								}
							};
						}
					}
				],
				resource: () => {
					return {
						url: 'jcloud.api.site.available_apps',
						params: {
							name: this.site
						},
						auto: true
					};
				}
			};
		}
	}
};
</script>