<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;

					let SiteAppPlanSelectDialog = defineAsyncComponent(() =>
						import('./SiteAppPlanSelectDialog.vue')
					);

					renderDialog(
						h(SiteAppPlanSelectDialog, {
							app: row,
							currentPlan: null,
							onPlanSelected: plan => {
								toast.promise(
									this.$site.installApp.submit({
										app: row.app,
										plan: plan.name
									}),
									{
										loading: '正在安装应用...',
										success: jobId => {
											router.push({
												name: 'Site Job',
												params: {
													name: this.site,
													id: jobId
												}
											});
											this.$emit('installed');
											this.show = false;
											return '应用即将安装';
										},
										error: e => getToastErrorMessage(e)
									}
								);
							}
						})
					);
				} else {
					toast.promise(
						this.$site.installApp.submit({
							app: row.app
						}),
						{
							loading: '正在安装应用...',
							success: jobId => {
								router.push({
									name: 'Site Job',
									params: {
										name: this.site,
										id: jobId
									}
								});
								this.$emit('installed');
								this.show = false;
								return '应用即将安装';
							},
							error: e => 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>