{$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>

		<div class="ui divider"></div>

		<!-- {{t('cache_test@测试写入')}} -->
		<div class="cache-config-form">
			<div class="form-title">
				<i class="icon write"></i> {{t('cache_test@测试写入')}}
			</div>
			<form method="post" class="ui form" data-tea-action=".testWrite" data-tea-before="beforeWrite" data-tea-done="doneWrite" data-tea-success="successWrite" data-tea-fail="failWrite">
				<input type="hidden" name="clusterId" :value="clusterId"/>
				<input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
				
				<div class="config-section">
					<div class="config-item">
						<div class="item-label">Key</div>
						<div class="item-content">
							<input type="text" name="key" value="my-key" class="ui input"/>
						</div>
					</div>
					
					<div class="config-item">
						<div class="item-label">Value</div>
						<div class="item-content">
							<textarea name="value" rows="3" class="ui textarea">my-value</textarea>
						</div>
					</div>
					
					<div class="config-item">
						<div class="item-label">{{t('cache_fetch@操作结果')}}</div>
						<div class="item-content">
							<div v-if="isRequestingWrite" class="ui info message mini">
								<i class="icon spinner loading"></i> {{t('cache_fetch@数据发送中')}}
							</div>
							<div v-if="!isRequestingWrite && !writeOk && writeMessage.length > 0" class="ui negative message mini">
								<i class="icon exclamation circle"></i> {{t('cache_fetch@失败')}}{{writeMessage}}
							</div>
							<div v-if="!isRequestingWrite && writeOk" class="domain-labels">
								<div v-if="writeResults.length == 0" class="ui negative message mini">
									<i class="icon exclamation circle"></i> {{t('cache_clean@无可用节点')}}
								</div>
								<div class="domain-label" v-for="result in writeResults" :class="{'enabled': result.isOk, 'red': !result.isOk}">
									<span class="domain-name">
										<i class="icon server"></i>
										{{t('index_节点_0101')}}{{result.nodeName}}：{{result.message}}
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="action-buttons">
					<submit-btn v-if="!isRequestingWrite" class="primary">
						<i class="icon write"></i> {{t('cache_fetch@提交')}}
					</submit-btn>
				</div>
			</form>
		</div>

		<div class="ui divider"></div>

		<!-- {{t('cache_test@测试读取')}} -->
		<div class="cache-config-form">
			<div class="form-title">
				<i class="icon read"></i> {{t('cache_test@测试读取')}}
			</div>
			<form method="post" class="ui form" data-tea-action=".testRead" data-tea-before="beforeRead" data-tea-done="doneRead" data-tea-success="successRead" data-tea-fail="failRead">
				<input type="hidden" name="clusterId" :value="clusterId"/>
				<input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
				
				<div class="config-section">
					<div class="config-item">
						<div class="item-label">Key</div>
						<div class="item-content">
							<input type="text" name="key" value="my-key" class="ui input"/>
						</div>
					</div>
					
					<div class="config-item">
						<div class="item-label">{{t('cache_fetch@操作结果')}}</div>
						<div class="item-content">
							<div v-if="isRequestingRead" class="ui info message mini">
								<i class="icon spinner loading"></i> {{t('cache_fetch@数据发送中')}}
							</div>
							<div v-if="!isRequestingRead && !readOk && readMessage.length > 0" class="ui negative message mini">
								<i class="icon exclamation circle"></i> {{t('cache_fetch@失败')}}{{readMessage}}
							</div>
							<div v-if="!isRequestingRead && readOk" class="domain-labels">
								<div v-if="readResults.length == 0" class="ui negative message mini">
									<i class="icon exclamation circle"></i> {{t('cache_clean@无可用节点')}}
								</div>
								<div class="domain-label" v-for="result in readResults" :class="{'enabled': result.isOk, 'red': !result.isOk}">
									<span class="domain-name">
										<i class="icon server"></i>
										{{t('index_节点_0101')}}{{result.nodeName}}：{{result.message}}
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="action-buttons">
					<submit-btn v-if="!isRequestingRead" class="primary">
						<i class="icon write"></i> {{t('cache_fetch@提交')}}
					</submit-btn>
				</div>
			</form>
		</div>
	</div>