{$layout}

<div class="margin"></div>

<!-- 自动升级设置 -->
<div class="ui segment">
	<h3>自动升级</h3>
	<table class="ui table definition">
		<tr>
			<td class="title">开启自动升级</td>
			<td>
				<div class="ui checkbox">
					<input type="checkbox" name="autoUpgrade" v-model="config.autoUpgrade" @change="updateAutoUpgrade">
					<label></label>
				</div>
				<p class="comment">开启后，边缘节点、DNS节点、HTTPDNS节点每分钟检查新版本并自动下载升级。关闭后节点不会自动升级，但管理员仍可在下方手动升级。</p>
			</td>
		</tr>
	</table>
</div>

<div class="margin"></div>

<!-- 手动升级 -->
<div class="ui segment">
	<h3 style="display: flex; justify-content: space-between; align-items: center;">
		<span>手动升级</span>
		<button class="ui button primary tiny" v-if="totalUpgradeCount > 0"
			@click.prevent="upgradeAll()">全部升级({{totalUpgradeCount}})</button>
	</h3>

	<div v-if="modules.length == 0">
		<p class="comment">暂无需要升级的节点。</p>
	</div>

	<div v-for="mod in modules" class="ui segment" style="margin-bottom: 1em; padding: 0;">
		<h4 style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.8em 1em; margin: 0; background: #f9fafb; border-bottom: 1px solid rgba(34,36,38,.15);"
			@click.prevent="mod.expanded = !mod.expanded">
			<div>
				<i class="icon angle down" v-if="mod.expanded"></i>
				<i class="icon angle right" v-else></i>
				{{mod.name}}
				<span class="ui label tiny basic" v-if="mod.count > 0"
					style="margin-left: 0.5em;">{{mod.count}}个待升级</span>
			</div>
			<button class="ui button primary tiny" v-if="mod.count > 0"
				@click.stop.prevent="upgradeModule(mod.code)">升级所有{{mod.name}}</button>
		</h4>

		<div v-show="mod.expanded" style="padding: 1em;">
			<div v-for="cluster in mod.clusters" style="margin-bottom: 1em;">
				<h5 style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.6em; background: #f3f4f5; border-radius: 4px; margin: 0;"
					@click.prevent="cluster.expanded = !cluster.expanded">
					<div>
						<i class="icon angle down" v-if="cluster.expanded"></i>
						<i class="icon angle right" v-else></i>
						{{cluster.name}}
						<span class="ui label tiny basic" style="margin-left: 0.5em;">{{cluster.count}}个待升级</span>
					</div>
					<div>
						<button class="ui button tiny primary" v-if="countCheckedNodesInCluster(cluster) > 0"
							@click.stop.prevent="upgradeBatchInCluster(mod.code, cluster)">批量升级({{countCheckedNodesInCluster(cluster)}})</button>
						<button class="ui button tiny"
							@click.stop.prevent="upgradeCluster(mod.code, cluster.id)">升级集群内所有节点</button>
					</div>
				</h5>

				<div v-show="cluster.expanded" style="margin-top: 0.5em;">
					<table class="ui table selectable celled small" style="margin: 0;">
						<thead>
							<tr>
								<th style="width:3em">
									<div class="ui checkbox" @click.prevent="toggleCheckAll(cluster)">
										<input type="checkbox" :checked="isAllChecked(cluster)">
										<label></label>
									</div>
								</th>
								<th>节点名</th>
								<th>访问IP</th>
								<th>SSH地址</th>
								<th>版本变化</th>
								<th class="four wide">节点状态</th>
								<th class="two op">操作</th>
							</tr>
						</thead>
						<tr v-for="node in cluster.nodes">
							<td>
								<div class="ui checkbox" v-if="!isNodeUpgradeFinished(node)">
									<input type="checkbox" v-model="node.isChecked">
									<label></label>
								</div>
							</td>
							<td>
								{{node.name}}
								<a :href="nodeDetailURL(mod.code, cluster.id, node.id)" title="节点详情" style="margin-left: 0.4em"><i class="icon external alternate small"></i></a>
							</td>
							<td>
								<span v-if="node.accessIP && node.accessIP.length > 0" class="ui label tiny basic">{{node.accessIP}}</span>
								<span v-else class="disabled">-</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>
								<span v-if="node.oldVersion">v{{node.oldVersion}}</span>
								<span v-else class="ui label tiny">未知</span>
								-&gt; <strong>v{{node.newVersion}}</strong>
							</td>
							<td>
								<div v-if="node.installStatus != null && (node.installStatus.isRunning || node.installStatus.isFinished)">
									<div v-if="node.installStatus.isRunning && !node.installStatus.isFinished"
										class="blue">
										<i class="notched circle loading icon"></i> 升级中...
									</div>
									<div v-if="node.installStatus.isFinished">
										<span v-if="node.installStatus.isOk" class="green"><i
												class="icon check circle"></i>
											已升级成功</span>
										<span v-if="!node.installStatus.isOk" class="red"><i
												class="icon warning circle"></i>
											升级过程中发生错误：{{node.installStatus.error}}</span>
									</div>
								</div>
								<span v-else class="disabled">等待升级</span>
							</td>
							<td>
								<a href="" @click.prevent="upgradeNode(mod.code, node)" v-if="!node.isUpgrading">升级</a>
								<span v-if="node.isUpgrading" class="blue">升级中...</span>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>