<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 "./index.css"
import Menu from "./@menu.vue"
import TMessage from "@/components/ui/TMessage.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import Keyword from "@/components/common/Keyword.vue";
import PopupIcon from "@/components/common/PopupIcon.vue";
import ServerTrafficLimitStatusViewer from "@/components/server/ServerTrafficLimitStatusViewer.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<div class="child-box">
		<Menu active-tab="index"></Menu>

		<TMessage error="" v-if="!ctx.serversIsEnabled">
			当前账号下的网站不可用，请检查账号状态以及是否有逾期未支付的账单。
		</TMessage>

		<WarningMessage v-if="ctx.serversIsEnabled && ctx.countUnpaidBills > 0">
			<a href="/finance/bills?paidFlag=0">有逾期未支付的账单，可能会影响你的CDN服务正常运行，请尽快完成支付。</a>
		</WarningMessage>

		<form action="/servers" class="search-form">
			<div class="ui fields inline">
				<div class="ui field">
					<TInputText name="keyword" v-model="ctx.keyword" placeholder="输入域名" />
				</div>
				<div class="ui field" v-if="ctx.groups.length > 0">
					<TSelect name="groupId" v-model="ctx.groupId">
						<TOption value="0">[分组]</TOption>
						<TOption v-for="group in ctx.groups" :value="group.id">{{ group.name }}</TOption>
					</TSelect>
				</div>
				<div class="ui field">
					<TButton type="submit" secondary="" class="btn-search">搜索</TButton>
					&nbsp;
					<a href="/servers" v-if="ctx.keyword.length > 0 || ctx.groupId > 0">[清除条件]</a>
				</div>
			</div>

			<div v-if="ctx.checkedServerIds.length > 0">
				<TButton secondary="" outlined @click.prevent="ctx.resetCheckedServers" class="btn-cancel">取消所选</TButton>
				<TButton secondary="" outlined @click.prevent="ctx.deleteServers" class="btn-delete">删除所选{{ ctx.checkedServerIds.length }}网站</TButton>
			</div>
		</form>

		<NotFoundInfo v-if="ctx.servers.length == 0">暂时还没有任何网站。</NotFoundInfo>


		<div v-if="ctx.servers.length > 0" class="table-box">
			<ListTable :items="ctx.servers">
				<Column style="width: 1em" class="server-checkbox-td" frozen>
					<template #header>
						<TCheckboxBinary @change="ctx.changeAllChecked" v-model="ctx.allChecked"></TCheckboxBinary>
					</template>
					<template #body="{ data: server }">
						<TCheckboxBinary v-model="server.isChecked" @change="ctx.changeServerChecked"></TCheckboxBinary>
					</template>
				</Column>
				<Column header="域名" class="domain-column server-td" frozen>
					<template #body="{ data: server }">
						<a :href="'/servers/server?serverId=' + server.id" class="link-server-name">
							<span v-if="server.serverNames.length > 0">
								<span
									v-if="server.serverNames[0].subNames == null || server.serverNames[0].subNames.length == 0">
									<Keyword :v-word="ctx.keyword">{{ server.serverNames[0].name }}</Keyword>
								</span>
								<span v-else>{{ server.serverNames[0].subNames[0] }}</span>
								<span v-if="server.countServerNames > 1">等{{ server.countServerNames }}个域名
									<PopupIcon :href="'/servers/serverNamesPopup?serverId=' + server.id" height="30em">
									</PopupIcon>
								</span>
							</span>
							<span v-else class="disabled">-</span>
						</a>

						<br>
						<!-- name -->
						<span class="server-name-box inline-block">
							<span class="grey flex items-center gap-1">
								<!-- <i class="icon tag mr-2"></i> -->
								<svg style="margin-right: 4px;" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M10.5423 7.31128L7.31577 10.5378C7.14697 10.7068 6.9179 10.8017 6.67903 10.8017C6.44015 10.8017 6.2111 10.7068 6.04227 10.5378L2 6.5V2H6.5L10.5423 6.04227C10.8912 6.3933 10.8912 6.96025 10.5423 7.31128Z" stroke="#657080" stroke-width="0.833333" stroke-linejoin="round"/>
									<path fill-rule="evenodd" clip-rule="evenodd" d="M4.625 5.25C4.97018 5.25 5.25 4.97018 5.25 4.625C5.25 4.27983 4.97018 4 4.625 4C4.27983 4 4 4.27983 4 4.625C4 4.97018 4.27983 5.25 4.625 5.25Z" fill="#657080"/>
								</svg>

								<span>{{ server.name }}</span>&nbsp; 
								<a href="" @click.prevent="ctx.updateServerName(server.id)">
									<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<g clip-path="url(#clip0_26_596)">
											<path
												d="M5.25005 8.79451L6.90954 8.79455L12.9945 2.70958L11.335 1.05005L5.25 7.13503L5.25005 8.79451Z"
												stroke="#1E65FF" stroke-linejoin="round" />
											<path d="M9.67548 2.70972L11.335 4.36926" stroke="#1E65FF"
												stroke-linecap="round" stroke-linejoin="round" />
											<path d="M8.04999 1.75H6.64999H1.04999V12.95H12.25V7.35V5.95"
												stroke="#1E65FF" />
										</g>
										<defs>
											<clipPath id="clip0_26_596">
												<rect width="14" height="14" fill="white" />
											</clipPath>
										</defs>
									</svg>

								</a>
							</span>
						</span>

						<div v-if="server.userPlan != null && server.userPlan.id > 0">
							<span style="margin-top: 1em" class=""
								:class="{ grey: !server.userPlan.isExpired, red: server.userPlan.isExpired }">套餐：{{
									server.userPlan.name }}
								/ {{ server.userPlan.dayTo }} <span v-if="server.userPlan.isExpired">已过期</span></span>
						</div>
						<div v-if="server.trafficLimitStatus != null">
							<ServerTrafficLimitStatusViewer v-model="server.trafficLimitStatus">
							</ServerTrafficLimitStatusViewer>
						</div>
						<div v-if="server.groups.length > 0">
							<span style="margin-top: 1em" class="grey" v-for="serverGroup in server.groups">[{{
								serverGroup.name }}] &nbsp; </span>
						</div>
					</template>
				</Column>
				<Column header="CNAME" class="domain-column">
					<template #body="{ data: server }">
						{{ server.cname }}
					</template>
				</Column>
				<Column header="状态" class="status-column">
					<template #body="{ data: server }">
						<span v-if="!server.isOn" class="grey">停用中</span>
						<span v-else-if="server.status.isOk" class="green">正常</span>
						<span v-else-if="server.status.message.length == 0">检查中</span>
						<span v-else class="flex items-center gap-1" style="color: rgba(255, 67, 67, 1);">
							<span>{{ server.status.message }}</span>&nbsp;
							<TipIcon :content="server.status.todo"></TipIcon>
						</span>
					</template>
				</Column>
				<Column header="HTTP" class="bool-column">
					<template #body="{ data: server }">
						<span v-if="server.httpIsOn" class="">Y</span>
					</template>
				</Column>
				<Column header="HTTPS" class="bool-column">
					<template #body="{ data: server }">
						<span v-if="server.httpsIsOn" class="">Y</span>
					</template>
				</Column>
				<Column header="操作" class="three op" frozen align-frozen="right">
					<template #body="{ data: server }">
						<a :href="'/servers/server?serverId=' + server.id">管理</a> &nbsp;
						<a href="" v-if="server.isOn" @click.prevent="ctx.updateServerOff(server.id)">停用</a><a href=""
							v-if="!server.isOn" @click.prevent="ctx.updateServerOn(server.id)"><span
								style="color: rgba(255, 67, 67, 1);">启用</span></a> &nbsp;
						<a href="" @click.prevent="ctx.deleteServer(server.id)">删除</a>
					</template>
				</Column>
			</ListTable>

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

<style lang="postcss" scoped>
.search-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.btn-search {
	background: rgba(30, 101, 255, 1);
	border-radius: 4px;
	font-family: Source Han Sans SC;
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	vertical-align: middle;
	color: rgba(255, 255, 255, 1);
	line-height: 35px;
	padding: 0 14px;
}

.btn-search:hover {
	background: rgba(29, 83, 222, 1);
	color: rgba(255, 255, 255, 1);
}

.btn-cancel {
	margin-right: 16px;
	border-radius: 4px;
	border: 1px solid rgba(229, 232, 242, 1)!important;
	color: rgba(101, 112, 128, 1)!important;
	font-weight: 400;
	font-size: 14px;
	vertical-align: middle;
}

.btn-delete {
	border: 1px solid rgba(30, 101, 255, 1)!important;
	color: rgba(30, 101, 255, 1)!important;
	border-radius: 4px;
}

:deep(.p-inputtext),
:deep(.p-inputnumber),
:deep(.p-select) {
	border-radius: 4px;
	border-color: rgba(229, 232, 242, 1);
}

.table-box {
	margin-top: 14px;
	font-family: Source Han Sans SC;
}

.table-box :deep(.ui.table thead th) {
	padding: 9px 16px;
	border-color: rgba(229, 232, 242, 1);
}

.table-box :deep(.p-datatable-tbody > tr > td) {
	vertical-align: middle;
	color: rgba(101, 112, 128, 1);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	border-color: rgba(229, 232, 242, 1);
	padding: 9px 16px;
}

.table-box :deep(td a) {
	color: rgba(30, 101, 255, 1);
}

.link-server-name {
	font-weight: 400;
	font-size: 14px;
	color: rgba(30, 101, 255, 1);
}

:deep(.p-checkbox) {
	width: 100%;
	justify-content: center;
}
:deep(.p-checkbox-box) {
	border-radius: 0;
	border-color: rgba(229, 232, 242, 1);
}
:deep(.p-datatable-column-title) {
	color: rgba(49, 49, 49, 1);
}
</style>