{$layout}

{$template "policy_menu"}

<div class="cache-config-container">
	<!-- {{t('cache_clean@选择集群')}} -->
	<div class="cache-config-form">
		<div class="form-title">
			<i class="icon server"></i> {{t('cache_clean@选择集群')}}
		</div>
		<div class="config-section">
			<div class="config-item">
				<div class="item-content">
					<b-select
						v-model="clusterId"
						auto-width
						:options="[
							...clusters.map(cluster => ({
								label: cluster.name,
								value: cluster.id,
							}))
						]"
					></b-select>
				</div>
			</div>
		</div>
	</div>

	<!-- {{t('cache_policy_menu@统计')}} -->
	<div class="cache-config-form">
		<div class="form-title">
			<i class="icon chart bar"></i> {{t('cache_policy_menu@统计')}}
		</div>
		<form method="post" data-tea-action="$" data-tea-before="before" data-tea-success="success" data-tea-fail="fail" data-tea-done="done">
			<input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
			<input type="hidden" name="clusterId" :value="clusterId"/>

			<div class="config-section">
				<div class="config-item">
					<div class="item-content">
						<b-table
							:columns="columns"
							:data-source="[{key: 'result'}]"
							:pagination="false"
							:bordered="false"
							size="middle">
							
							<!-- {{t('cache_stat@操作结果列')}} -->
							<template slot="result" slot-scope="{ text, record }">
								<div v-if="isRequesting" class="ui info message mini">
									<i class="icon spinner loading"></i> {{t('cache_fetch@数据发送中')}}
								</div>
								
								<div v-if="!isRequesting && !isOk && message.length > 0" class="ui negative message mini">
									<i class="icon exclamation circle"></i> {{t('cache_fetch@失败')}}{{message}}
								</div>
								
								<div v-if="!isRequesting && isOk" class="domain-labels">
									<div v-if="results.length == 0" class="ui negative message mini">
										<i class="icon exclamation circle"></i> {{t('cache_clean@无可用节点')}}
									</div>
									<div class="domain-label" v-for="one in results" :class="{'enabled': one.isOk, 'red': !one.isOk}">
										<span class="domain-name">
											<i class="icon server"></i>
											{{one.nodeName}}：{{one.message}}
										</span>
									</div>
								</div>
							</template>
						</b-table>
					</div>
				</div>
			</div>
			
			<div class="action-buttons">
				<submit-btn v-if="!isRequesting" class="primary">
					<i class="icon chart bar"></i> {{t('cache_fetch@提交')}}
				</submit-btn>
			</div>
		</form>
	</div>
</div>