<template>
	<Dialog
		v-model="showDialog"
		:options="{
			title: '在其他站点恢复备份',
			actions: [
				{
					label: '恢复',
					variant: 'solid',
					theme: 'red',
					disabled: !selectedSite,
					onClick: () => {
						this.$emit('restore', this.selectedSite.value);
						showDialog = false;
					}
				}
			]
		}"
	>
		<template #body-content>
			<FormControl
				label="选择要恢复备份的站点"
				class="mt-4"
				type="autocomplete"
				v-model="selectedSite"
				:options="
					($resources.sites.data || []).map(site => {
						return {
							label: site.host_name || site.name,
							value: site.name
						};
					})
				"
			/>
			<AlertBanner
				v-if="selectedSite"
				class="mt-4"
				type="warning"
				:title="`恢复操作将使用 <strong>${site}</strong> 的备份数据覆盖 <strong>${selectedSite.value}</strong> 的当前数据`"
			/>
		</template>
	</Dialog>
</template>

<script>
import AlertBanner from '../AlertBanner.vue';

export default {
	name: 'SelectSiteForRestore',
	props: ['site'],
	emits: ['restore'],
	data() {
		return {
			selectedSite: null,
			showDialog: true
		};
	},
	components: {
		AlertBanner
	},
	resources: {
		sites() {
			return {
				type: 'list',
				pagetype: 'Site',
				fields: ['host_name', 'name'],
				filters: { name: ['!=', this.site] },
				pageLength: 500,
				auto: true
			};
		}
	}
};
</script>