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

<div class="left-right-box-container">
	<div style="width: 100%;">
		<first-menu>
			<a href="/servers/components/waf" class="item active">
				<i class="icon list"></i> {{t('waf_index@列表')}}
			</a>
			<a href="" class="item" @click.prevent="createPolicy()">
				<i class="icon plus"></i> {{t('waf_index@创建')}}
			</a>
		</first-menu>

		<form class="ui form" method="get" action="/servers/components/waf">
			<div class="ui margin"></div>
			<div class="ui fields inline">
				<div class="ui field">
					<node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
				</div>
				<div class="ui field">
					<input type="text" name="keyword" v-model="keyword" :placeholder="t('waf_index@策略名称placeholder')" style="width:12em"/>
				</div>
				<div class="ui field">
					<button type="submit" class="ui button">{{t('waf_index@搜索')}}</button>
					&nbsp;
					<a :href="Tea.url('.')" v-if="keyword.length > 0 || clusterId > 0">{{t('waf_index@清除条件')}}</a>
				</div>
			</div>
		</form>

		<b-empty v-if="policies.length == 0">{{t('waf_index@暂无WAF策略')}}</b-empty>

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

		<b-table
			v-if="policies.length > 0"
			:columns="columns"
			:data-source="policies"
			row-key="id"
			:bordered="false"
			size="middle"
			:pagination="false"
			:loading="false"
			:scroll="{ x: 1200 }">
			
			<!-- 策略名称列 -->
			<template slot="name" slot-scope="{ text, record }">
				<a :href="'/servers/components/waf/policy?firewallPolicyId=' + record.id">
					<keyword :v-word="keyword">{{record.name}}</keyword>
				</a>
			</template>
			
			<!-- 入站规则分组列 -->
			<template slot="inbound" slot-scope="{ text, record }">
				<a :href="'/servers/components/waf/groups?firewallPolicyId=' + record.id + '&type=inbound'">
					<span :class="{disabled: record.countInbound == 0}">{{record.countInbound}}</span>
				</a>
			</template>
			
			<!-- 出站规则分组列 -->
			<template slot="outbound" slot-scope="{ text, record }">
				<a :href="'/servers/components/waf/groups?firewallPolicyId=' + record.id + '&type=outbound'">
					<span :class="{disabled: record.countOutbound == 0}">{{record.countOutbound}}</span>
				</a>
			</template>
			
			<!-- 集群数列 -->
			<template slot="clusterCount" slot-scope="{ text, record }">
				{{record.countClusters}}
			</template>
			
			<!-- 状态列 -->
			<template slot="status" slot-scope="{ text, record }">
				<span v-if="!record.isOn" class="ui label red tiny">
					<i class="pi pi-ban"></i> {{t('waf_index@已停用')}}
				</span>
				<div v-else-if="record.modeInfo != null">
					<span v-if="record.modeInfo.code == 'defend'" class="ui label tiny">
						<i class="pi pi-check-circle"></i> {{record.modeInfo.name}}
					</span>
					<span v-else-if="record.modeInfo.code == 'observe'" class="ui label tiny">
						<i class="pi pi-eye"></i> {{record.modeInfo.name}}
					</span>
					<span v-else-if="record.modeInfo.code == 'bypass'" class="ui label tiny">
						<i class="pi pi-directions"></i> {{record.modeInfo.name}}
					</span>
				</div>
			</template>
			
			<!-- 操作列 -->
			<template slot="actions" slot-scope="{ text, record }">
				<a :href="'/servers/components/waf/policy?firewallPolicyId=' + record.id">{{t('waf_index@详情')}}</a> &nbsp;
				<a href="" @click.prevent="deletePolicy(record.id)">{{t('waf_index@删除')}}</a>
			</template>
		</b-table>

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