<template>
	<Dialog :options="{ title: '删除活动服务器' }" v-model="showDialog">
		<template #body-content>
			<div class="prose text-base">
				在禁用账户之前，请删除以下活动服务器：
				<ul class="pt-2">
					<li
						class="font-semibold"
						v-for="server in $resources.activeServers.data"
					>
						{{ server.title }} - {{ server.name }}
					</li>
				</ul>
			</div>
		</template>
		<template #actions>
			<Button variant="solid" class="w-full" @click="redirectToServer"
				>删除服务器</Button
			>
		</template>
	</Dialog>
</template>
<script>
export default {
	name: 'ActiveServersDialog',
	data() {
		return {
			showDialog: true
		};
	},
	resources: {
		activeServers: {
			url: 'jcloud.api.account.active_servers',
			auto: true
		}
	},
	methods: {
		redirectToServer() {
			window.location = '/servers';
		}
	}
};
</script>