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

import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./selectPopup.js"
import TInputText from "@/components/ui/TInputText.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 Pager from "@/components/common/Pager.vue";
import GetForm from "@/components/form/GetForm.vue";
import TLabel from "@/components/ui/TLabel.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import ViewLink from "@/components/common/ViewLink.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header>选择证书
			<span v-if="ctx.searchingDomains.length > 0" class="text-base gray">（当前网站域名：{{ ctx.searchingDomains[0] }}<var class="not-italic" v-if="ctx.searchingDomains.length > 1">等{{ ctx.searchingDomains.length }}个域名</var>）</span>
		</header>

		<!-- 搜索表单 -->
		<GetForm action="/servers/certs/selectPopup">
			<input type="hidden" name="selectedCertIds" :value="ctx.selectedCertIds"/>
			<input type="hidden" name="searchingType" :value="ctx.searchingType"/>
			<input type="hidden" name="searchingDomains" :value="ctx.searchingDomains.join(',')"/>
			<div class="ui fields inline">
				<div class="ui field">
					<TInputText name="keyword" v-model="ctx.keyword" placeholder="域名、说明文字等" size="30"/>
				</div>
				<div class="ui field">
					<TButton secondary="" type="submit">搜索</TButton> &nbsp;
					<ViewLink :href="'/servers/certs/selectPopup?selectedCertIds=' + ctx.selectedCertIds + '&searchingType=' + ctx.searchingType + '&searchingDomains=' + ctx.encodeURL(ctx.searchingDomains.join(','))" v-if="ctx.keyword.length > 0">[清除条件]</ViewLink>
				</div>
			</div>
		</GetForm>

		<!-- 选项卡 -->
		<div v-if="ctx.searchingDomains.length > 0">
			<TDivider></TDivider>
			<div class="flex gap-4 items-center">
				<ViewLink :active="ctx.searchingType == 'all'" :href="ctx.baseURL + '&searchingType=all'">所有证书
					<span class="small">({{ ctx.totalAll }})</span></ViewLink>
				<span class="disabled item">|</span>
				<ViewLink :active="ctx.searchingType == 'match'" :href="ctx.baseURL + '&searchingType=match'">域名匹配证书
					<span class="small"> ({{ ctx.totalMatch }})</span></ViewLink>
			</div>
		</div>

		<!-- 全选 -->
		<div v-if="ctx.countChecked > 0" class="mt-4">
			<TButton secondary="" outlined type="button" @click.prevent="ctx.confirmChecked">使用选中的{{ ctx.countChecked }}个证书</TButton>
		</div>

		<!-- 证书列表 -->
		<NotFoundInfo v-if="ctx.certs.length == 0">暂时还没有<span v-if="ctx.searchingType == 'match'">跟所添加域名匹配的</span>相关证书。
		</NotFoundInfo>

		<div v-if="ctx.certs.length > 0" class="mt-4">
			<ListTable :items="ctx.certs" dataKey="id">
				<Column style="width:1em" frozen>
					<template #header>
						<TCheckboxBinary @change="ctx.changeAll"></TCheckboxBinary>
					</template>
					<template #body="{data:cert, index}">
						<TCheckboxBinary v-model="cert.isChecked" @change="ctx.changeCertChecked" v-if="!ctx.certInfos[index].isSelected"></TCheckboxBinary>
					</template>
				</Column>
				<Column header="证书说明" class="title-column" frozen>
					<template #body="{data:cert, index}">
						<a href="" @click.prevent="ctx.selectCert(cert)" v-if="!ctx.certInfos[index].isSelected">
							<Keyword :key="ctx.keyword" :v-word="ctx.keyword">{{ cert.name }}</Keyword>
						</a>
						<span v-if="ctx.certInfos[index].isSelected">{{ cert.name }}</span>

						<div v-if="cert.commonNames != null && cert.commonNames.length > 0" class="mt-1">
							<span class="grey small">{{ cert.commonNames[cert.commonNames.length - 1] }}</span>
						</div>

						<div v-if="cert.isCA" class="mt-1">
							<TLabel size="tiny" class="olive">CA</TLabel>
						</div>
					</template>
				</Column>
				<Column header="域名" class="domain-column">
					<template #body="{data:cert}">
						<div class="label-group">
							<div v-for="dnsName in cert.dnsNames">
								<TLabel outlined="">
									<Keyword :key="ctx.keyword" :v-word="ctx.keyword">{{ dnsName }}</Keyword>
								</TLabel>
							</div>
						</div>
					</template>
				</Column>
				<Column header="过期日期" class="date-column">
					<template #body="{data:cert, index}">
						{{ ctx.certInfos[index].endDay }}
					</template>
				</Column>
				<Column header="引用网站" class="value-column">
					<template #body="{data:cert, index}">
						{{ ctx.certInfos[index].countServers }}
					</template>
				</Column>
				<Column header="状态" class="status-column">
					<template #body="{data:cert, index}">
						<TLabel outlined="" size="small" class="red" v-if="ctx.certInfos[index].isExpired">已过期</TLabel>
						<TLabel outlined="" size="small" class="green" v-else>有效中</TLabel>
					</template>
				</Column>
				<Column header="操作" class="one op" frozen align-frozen="right">
					<template #body="{data:cert, index}">
						<a href="" @click.prevent="ctx.selectCert(cert)" v-if="!ctx.certInfos[index].isSelected">选择</a>
						<span v-else>已选</span>
					</template>
				</Column>
			</ListTable>

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

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