<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import DomainMenu from "@/views/ns/domains/@menu_domain.vue";
import TLabel from "@/components/ui/TLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<DomainMenu :ctx="ctx" activeTab="index"></DomainMenu>

	<DefinitionTable>
		<tbody>
		<tr>
			<td class="title">域名</td>
			<td>{{ctx.domain.name}}</td>
		</tr>
		<tr>
			<td>状态</td>
			<td>
				<span v-if="!ctx.domain.isOn" class="red">已停用</span>
				<span v-if="ctx.domain.isOn" :class="{green:ctx.domain.status == 'verified', red:ctx.domain.status == 'rejected' || ctx.domain.status == 'forbidden'}">{{ctx.domain.statusName}}</span>
				&nbsp; &nbsp;
			</td>
		</tr>
		<tr>
			<td>所属分组</td>
			<td>
				<div v-if="ctx.domain.groups.length > 0" class="label-group">
					<a :href="'/ns/domains?userId=' + group.userId + '&groupId=' + group.id" v-for="group in ctx.domain.groups">
						<TLabel outlined="" class="blue">{{group.name}}</TLabel>
					</a>
				</div>
				<span v-else class="disabled">暂时没有分组</span>
			</td>
		</tr>
		</tbody>
	</DefinitionTable>
</template>

<style lang="postcss" scoped>
</style>