{$layout}
{$template "/left_menu"}

<div class="right-box">
	{$template "node_menu"}

	<!-- 已安装 -->
	<div v-if="node.isInstalled">
		<div class="ui message green">当前节点为已安装状态。</div>
		<a href="" @click.prevent="updateNodeIsInstalled(false)">[修改为未安装状态]</a>
	</div>

	<!-- 未安装 -->
	<div v-if="!node.isInstalled">
		<h3>方法1：自动安装</h3>

		<div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
			 class="ui segment installing-box">
			<div v-if="installStatus.isRunning" class="blue">安装中...</div>
			<div v-if="installStatus.isFinished">
				<span v-if="installStatus.isOk" class="green">已安装成功</span>
				<span v-if="!installStatus.isOk" class="red">安装过程中发生错误：{{installStatus.error}}</span>
			</div>
		</div>
		<div v-if="installStatus != null && installStatus.isFinished">
			<button class="ui button small" type="button" @click.prevent="install()">重新安装</button>
		</div>
		<div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
			<button class="ui button small" type="button" @click.prevent="install()">开始安装</button>
		</div>

		<h3>方法2：手动安装</h3>
		<table class="ui table definition selectable">
			<tr>
				<td>配置文件<em>（configs/api.yaml）</em></td>
				<td>
					<pre>rpc:
  endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</pre>
				</td>
			</tr>
			<tr>
				<td class="title">安装目录</td>
				<td>
					<div v-if="node.installDir.length == 0">使用集群设置<span
								v-if="node.cluster != null && node.cluster.installDir.length > 0">（{{node.cluster.installDir}}）</span>
					</div>
					<span v-else>{{node.installDir}}</span>
				</td>
			</tr>
		</table>

		<a href="" @click.prevent="updateNodeIsInstalled(true)">[修改为已安装状态]</a>
	</div>
</div>