{$layout}
{$template "menu"}

<div class="left-right-box-container">
	{$template "/left_menu"}

	<div class="right-box">
		<b-empty v-if="nodes.length == 0">暂时没有需要远程安装的节点。</b-empty>

		<div v-if="nodes.length > 0">
			<b-settings-header
				v-if="countCheckedNodes() > 0"
				@action="installBatch()"
				:action-text="'批量安装(' + countCheckedNodes() + ')'"
			>
				所有未安装节点
			</b-settings-header>
			<b-settings-header v-else>
				所有未安装节点
			</b-settings-header>
			<!-- <h3>
				所有未安装节点
				<button class="ui button primary tiny" v-if="countCheckedNodes() > 0" @click.prevent="installBatch()">
					批量安装({{countCheckedNodes()}})
				</button>
			</h3> -->
			<table class="ui table selectable celled">
				<thead>
					<tr>
						<th style="width:3em">
								<checkbox :v-value="1" @input="checkNodes"></checkbox>
						</th>
						<th>节点名</th>
						<th>访问IP</th>
						<th>SSH地址</th>
						<th class="four wide">节点状态</th>
						<th class="two op">操作</th>
					</tr>
				</thead>
				<tr v-for="node in nodes">
					<td>
							<checkbox :v-value="1" v-model="node.isChecked" v-if="node.installStatus == null || !node.installStatus.isOk"></checkbox>
					</td>
					<td>
						<link-icon :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</link-icon>
					</td>
					<td>
						<span v-for="addr in node.addresses" v-if="addr.canAccess" class="ui label tiny basic">{{addr.ip}}</span>
					</td>
					<td>
						<span v-if="node.login != null && node.login.type == 'ssh' && node.loginParams != null && node.loginParams.host != null && node.loginParams.host.length > 0">
							{{node.loginParams.host}}:{{node.loginParams.port}}
						</span>
						<span v-else class="disabled">没有设置</span>
					</td>
					<td>
						<div v-if="node.installStatus != null && (node.installStatus.isRunning || node.installStatus.isFinished)">
							<div v-if="node.installStatus.isRunning" class="blue">安装中...</div>
							<div v-if="node.installStatus.isFinished">
								<span v-if="node.installStatus.isOk" class="green">已安装成功</span>
								<span v-if="!node.installStatus.isOk" class="red">安装过程中发生错误：{{node.installStatus.error}}</span>
							</div>
						</div>
						<span v-else class="disabled">等待安装</span>
					</td>
					<td>
						<a href="" @click.prevent="installNode(node)" v-if="!isInstalling">安装</a>
						<span v-if="isInstalling && node.isInstalling">安装中...</span>
						<span v-if="isInstalling && !node.isInstalling" class="disabled">安装</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>