{$layout}
{$template "menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

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

		<div v-if="nodes.length > 0">
			<b-settings-header
				v-if="selected.length > 0" 
				@action="installBatch()"
				:action-text="'批量安装(' + selected.length + ')'"
			>
				所有未安装节点
			</b-settings-header>
			<b-settings-header v-else>
				所有未安装节点
			</b-settings-header>

			<b-table
				:columns="columns"
				:data-source="nodes"
				:row-key="'id'"
				:row-selection="{
					type: 'checkbox',
					selectedRowKeys: selected,
					onChange: (selectedRowKeys, selectedRows) => {
						selected = selectedRows.map(v => v.id);
					},
					getCheckboxProps: record => ({
							props: {
									disabled: (record.installStatus && record.installStatus.isOk) || (this.isInstalling && record.isInstalling), // 示例：禁用已安装或正在安装的节点
									name: record.id.toString(),
							},
					}),
			}"
				size="middle"
			>
				<!-- 节点名 -->
				<template slot="nameSlot" slot-scope="{ record }">
					<link-icon :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.id">{{record.name}}</link-icon>
				</template>

				<!-- 访问IP -->
				<template slot="ipSlot" slot-scope="{ record }">
					<span v-for="addr in record.addresses" v-if="addr.canAccess" class="ui label tiny basic">{{addr.ip}}</span>
				</template>

				<!-- SSH地址 -->
				<template slot="sshSlot" slot-scope="{ record }">
					<span v-if="record.login != null && record.login.type == 'ssh' && record.loginParams != null && record.loginParams.host != null && record.loginParams.host.length > 0">
						{{record.loginParams.host}}:{{record.loginParams.port}}
					</span>
					<span v-else class="disabled">没有设置</span>
				</template>

				<!-- 节点状态 -->
				<template slot="statusSlot" slot-scope="{ record }">
					<div v-if="record.installStatus != null && (record.installStatus.isRunning || record.installStatus.isFinished)">
						<div v-if="record.installStatus.isRunning" class="blue"><i class="icon loading circle notch"></i> 安装中...</div>
						<div v-if="record.installStatus.isFinished">
							<span v-if="record.installStatus.isOk" class="green"><i class="icon check circle"></i> 已安装成功</span>
							<span v-if="!record.installStatus.isOk" class="red"><i class="icon warning circle"></i> 安装过程中发生错误：{{record.installStatus.error}}</span>
						</div>
					</div>
					<span v-else class="disabled">等待安装</span>
				</template>

				<!-- 操作 -->
				<template slot="actionSlot" slot-scope="{ record }">
					<a-button type="link" @click="installNode(record)" v-if="!isInstalling && (!record.installStatus || !record.installStatus.isOk)">
						<i class="pi pi-download" style="font-size: 12px; padding: 4px;"></i> 安装
					</a-button>
					<span v-if="isInstalling && record.isInstalling" class="grey"><i class="icon loading circle notch"></i> 安装中...</span>
					<span v-if="isInstalling && !record.isInstalling && (!record.installStatus || !record.installStatus.isOk)" class="disabled">安装</span>
					<span v-if="record.installStatus && record.installStatus.isOk" class="green">已安装</span> <!-- Show installed status -->
				</template>
			</b-table>
		</div>
	</div>
</div>