{$layout}
{$template "/first-menu"}

<div class="left-right-box-container">
	<div style="width: 100%;">
		<first-menu>
			<menu-item :href="'/servers/certs?userType=' + userType + '&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == ''">{{t('certs_index@所有证书')}}({{countAll}})</menu-item>
			<menu-item :href="'/servers/certs?userType=' + userType + '&type=ca&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == 'ca'">{{t('certs_index@CA证书')}}({{countCA}})</menu-item>
			<menu-item :href="'/servers/certs?userType=' + userType + '&type=available&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == 'available'">{{t('certs_index@有效证书')}}({{countAvailable}})</menu-item>
			<menu-item :href="'/servers/certs?userType=' + userType + '&type=expired&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == 'expired'">{{t('certs_index@过期证书')}}<span :class="{red: countExpired > 0}">({{countExpired}})</span></menu-item>
			<menu-item :href="'/servers/certs?userType=' + userType + '&type=7days&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == '7days'">{{t('certs_index@7天内过期')}}<span :class="{red: count7Days > 0}">({{count7Days}})</span></menu-item>
			<menu-item :href="'/servers/certs?userType=' + userType + '&type=30days&keyword=' + keyword + '&userId=' + searchingUserId" :active="type == '30days'">{{t('certs_index@30天内过期')}}({{count30Days}})</menu-item>
			<span class="item disabled">|</span>
			<a href="" class="item" @click.prevent="uploadCert">
				<i class="pi pi-upload" style="margin-right: .5rem;"></i>
				{{t('certs_index@上传证书')}}
			</a>
			<a href="" class="item" @click.prevent="uploadBatch">
				<i class="pi pi-upload" style="margin-right: .5rem;"></i>
				{{t('certs_index@批量上传')}}
			</a>
		</first-menu>

		<form method="get" class="ui form" action="/servers/certs">
			<input type="hidden" name="type" :value="type"/>
			<input type="hidden" name="userType" :value="userType"/>
			<div class="ui margin"></div>
			<div class="ui fields inline">
				<div class="ui field">
					<input type="text" name="keyword" :placeholder="t('certs_index@域名说明等关键词')" style="width:12em" v-model="keyword"/>
				</div>
				<div class="ui field">
					<user-selector :v-user-id="searchingUserId"></user-selector>
				</div>
				<div class="ui field">
					<button type="submit" class="ui button">{{t('certs_index@搜索')}}</button>
					&nbsp;
					<a :href="Tea.url('.', { 'userType':userType, 'type':type })" v-if="keyword.length > 0 || searchingUserId > 0">[{{t('certs_index@清除条件')}}]</a>
				</div>
			</div>
		</form>

		<div v-if="searchingUserId == 0" style="margin-top: 1em;">
			<div class="ui menu text basic tiny">
				<a :href="'/servers/certs?userType=&type=' + type + '&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: userType == ''}">{{t('certs_index@管理员证书')}}</a>
				<a :href="'/servers/certs?userType=user&type=' + type + '&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: userType == 'user'}">{{t('certs_index@用户证书')}}</a>
			</div>
			<div class="ui divider" style="margin-top:0"></div>
		</div>

		<b-empty v-if="certs.length == 0">
			{{t('certs_index@暂时还没有相关的证书')}}，{{t('certs_index@现在去')}}
			<a class="ant-btn-link ant-btn-link-hover" style="display: inline-flex; align-items: center; gap: 0.5em; margin-left: 0.5em;" href="" @click.prevent="uploadCert">{{t('certs_index@上传证书')}}<i class="pi pi-arrow-right" style="font-size: 12px;"></i></a>
		</b-empty>

		<div class="margin"></div>

		<b-table
			v-if="certs.length > 0"
			:columns="certColumns"
			:data-source="processedCerts"
			row-key="id"
			:bordered="false"
			size="middle"
			:pagination="false"
			:loading="false"
			:scroll="{ x: 1200 }">
			
			<!-- 证书说明列 -->
			<template slot="name" slot-scope="{ text, record }">
				<keyword :v-word="keyword">{{record.name}}</keyword>
				<div v-if="record.isCA" style="margin-top:0.5em">
					<micro-basic-label class="olive">CA</micro-basic-label>
				</div>
				<div v-if="record.isACME" style="margin-top: 0.5em">
					<micro-basic-label class="olive" :title="t('certs_index@ACME提示')">ACME</micro-basic-label>
				</div>
			</template>
			
			<!-- 顶级发行组织列 -->
			<template slot="organization" slot-scope="{ text, record }">
				<span v-if="record.commonNames != null && record.commonNames.length > 0">{{record.commonNames[record.commonNames.length-1]}}</span>
				<span v-else class="disabled">-</span>
			</template>
			
			<!-- 域名列 -->
			<template slot="dnsNames" slot-scope="{ text, record }">
				<div v-if="!record.dnsNames || record.dnsNames.length == 0" class="disabled">-</div>
				<div v-else v-for="dnsName in record.dnsNames" style="margin-bottom:0.4em">
					<span class="ui label tiny basic"><keyword :v-word="keyword">{{dnsName}}</keyword></span>
				</div>
			</template>
			
			<!-- 所属用户列 -->
			<template slot="user" slot-scope="{ text, record }">
				<span v-if="record.user != null && record.user.id > 0"><user-link :v-user="record.user"></user-link></span>
				<span v-else class="disabled">{{t('certs_index@管理员')}}</span>
			</template>
			
			<!-- 状态列 -->
			<template slot="status" slot-scope="{ text, record }">
				<span class="ui label red tiny basic" v-if="!record.isOn">{{t('certs_index@未启用')}}</span>
				<span class="ui label red tiny basic" v-else-if="record.isExpired">{{t('certs_index@已过期')}}</span>
				<span class="ui label green tiny basic" v-else>{{t('certs_index@有效中')}}</span>
			</template>
			
			<!-- 操作列 -->
			<template slot="actions" slot-scope="{ text, record }">
				<a href="" @click.prevent="viewCert(record.id)">{{t('certs_index@详情')}}</a> &nbsp;
				<a href="" @click.prevent="updateCert(record.id)">{{t('certs_index@修改')}}</a> &nbsp;
				<a href="" @click.prevent="deleteCert(record.id)">{{t('certs_index@删除')}}</a>
			</template>
		</b-table>

		<div class="page" v-if="certs.length > 0" v-html="filterPageContent(page)"></div>
	</div>
</div>