<template>
	<Dialog
		v-model="showDialog"
		:options="{
			title: '添加区域',
			actions: [
				{
					label: '添加区域',
					variant: 'solid',
					loading: groupDocResource.addRegion.loading,
					disabled: !selectedRegion,
					onClick: () =>
						groupDocResource.addRegion.submit(
							{
								region: selectedRegion.value
							},
							{
								onSuccess: () => {
									this.$emit('success');
									this.showDialog = false;
								}
							}
						)
				}
			]
		}"
	>
		<template #body-content>
			<div class="space-y-4">
				<FormControl
					type="autocomplete"
					label="选择区域"
					:options="regionOptions"
					v-model="selectedRegion"
				>
					<template #prefix>
						<img :src="selectedRegion?.image" class="mr-2 h-4" />
					</template>
					<template #item-prefix="{ active, selected, option }">
						<img v-if="option?.image" :src="option.image" class="mr-2 h-4" />
					</template>
				</FormControl>
				<ErrorMessage :message="groupDocResource.addRegion.error" />
			</div>
		</template>
	</Dialog>
</template>

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

export default {
	name: 'AddRegionDialog',
	props: ['group'],
	data() {
		return {
			showDialog: true,
			selectedRegion: null,
			groupDocResource: getCachedDocumentResource('Release Group', this.group)
		};
	},
	computed: {
		regionOptions() {
			return this.$resources.availableRegions.data.map(r => ({
				label: r.title || r.name,
				value: r.name,
				image: r.image,
				beta: r.beta
			}));
		}
	},
	resources: {
		availableRegions() {
			return {
				url: 'jcloud.api.bench.available_regions',
				params: {
					name: this.group
				},
				auto: true,
				initialData: []
			};
		}
	}
};
</script>