<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 Menu from "./@menu.vue"
import NSDomainGroupSelector from "@/components/ns/NSDomainGroupSelector.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import GreyLabel from "@/components/common/GreyLabel.vue";
import Keyword from "@/components/common/Keyword.vue";
import Pager from "@/components/common/Pager.vue";
import {ref} from "vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const groupSelector = ref()
const ctx = ctxRef(new Context(), {
	refs: {groupSelector}
})

</script>

<template>
	<Menu active-tab="index"></Menu>

	<form method="get" action="/ns/domains" v-show="!ctx.hasSelectedDomains">
		<div class="ui fields inline">
			<div class="ui field" v-if="ctx.hasGroups">
				<NSDomainGroupSelector :v-domain-group-id="ctx.groupId" ref="groupSelector"></NSDomainGroupSelector>
			</div>
			<div class="ui field">
				<TInputText name="keyword" v-model="ctx.keyword" placeholder="域名..."/>
			</div>
			<div class="ui field">
				<TButton secondary="" type="submit">搜索</TButton>
				&nbsp;
				<a :href="ctx.$url('.')" v-if="ctx.groupId > 0 || ctx.keyword.length > 0">[清除条件]</a>
			</div>

			<div class="ui field"></div>
		</div>
	</form>

	<form v-show="ctx.hasSelectedDomains">
		<div class="ui fields inline">
			<div class="ui field">
				<TButton secondary="" outlined type="button" @click.prevent="ctx.cancelDomains">取消选中</TButton>
			</div>
			<div class="ui field" v-if="ctx.hasVerifyingDomains">
				<TButton secondary="" outlined type="button" @click.prevent="ctx.verifyDomains">批量验证选中域名</TButton>
			</div>
			<div class="ui field">
				<TButton secondary="" outlined type="button" @click.prevent="ctx.deleteDomains">批量删除选中域名</TButton>
			</div>
		</div>
	</form>

	<div v-if="ctx.domains.length == 0">
		<NotFoundInfo>暂时还没有域名。</NotFoundInfo>
	</div>

	<!-- 域名列表 -->
	<div v-if="ctx.domains.length > 0" class="mt-4">
		<ListTable :items="ctx.domains">
			<TColumn class="checkbox-column" frozen>
				<template #header>
					<TCheckboxBinary v-model="ctx.selectedAll"></TCheckboxBinary>
				</template>
				<template #body="{data: domain}">
					<TCheckboxBinary v-model="domain.isChecked"
									 @change="ctx.changeDomainChecked(domain)"></TCheckboxBinary>
				</template>
			</TColumn>
			<TColumn header="域名" frozen>
				<template #body="{data: domain}">
					<a :href="'/ns/domains/domain?domainId=' + domain.id">
						<Keyword :v-word="ctx.keyword">{{ domain.name }}</Keyword>
					</a>
					<div v-if="domain.groups.length > 0" class="label-group mt-1">
						<a v-for="group in domain.groups" :href="'/ns/domains?userId=' + group.userId + '&groupId=' + group.id">
							<GreyLabel :key="group.id">{{ group.name }}</GreyLabel>
						</a>
					</div>
				</template>
			</TColumn>
			<TColumn header="状态" class="fixed-status-column">
				<template #body="{data: domain}">
					<span v-if="!domain.isOn" class="red">已停用</span>
					<span v-if="domain.isOn">
                	<a href="" v-if="domain.status == 'none'" @click.prevent="ctx.verifyDomain(domain.id)"><span class="red"
																											 style="border-bottom: 1px #db2828 dashed">未验证</span></a>
                		<span v-else :class="{green:domain.status == 'verified', red:domain.status == 'rejected' || domain.status == 'forbidden'}">{{ domain.statusName }}</span>
            		</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data: domain}">
					<a :href="'/ns/domains/domain?domainId=' + domain.id">详情</a> &nbsp; <a href="" @click.prevent="ctx.deleteDomain(domain.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>

		<Pager :data="ctx.page"></Pager>
	</div>
</template>

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