{$layout}

{$template "menu"}

{$var "header"}
<link rel="stylesheet" href="./nodes.css">
{$end}

<form class="ui form" action="/clusters/cluster/nodes" v-show="countAll > 0">
	<input type="hidden" name="clusterId" :value="clusterId"/>
	<div class="ui fields inline">
		<div class="ui field" v-if="groups.length > 0">
			<b-select
				name="groupId"
				v-model="groupId"
				:options="[
					{label: t('clusters_cluster_nodes@全部分组'), value: '0'},
					...groups.map(group => ({
						label: group.name??'',
						value: group.id??'',
					}))
				]"
			></b-select>
		</div>
        <div class="ui field" v-if="regions.length > 0">
            <b-select
                name="regionId"
                v-model="regionId"
                :options="[
                    {label: t('clusters_cluster_nodes@全部区域'), value: '0'},
                    ...regions.map(region => ({
                        label: region.name??'',
                        value: region.id??'',
                    }))
                ]"
            ></b-select>
        </div>
        <div class="ui field">
            <b-select
                name="activeState"
                v-model="activeState"
                :options="[
                    {label: t('clusters_cluster_nodes@在线状态'), value: '0'},
                    {label: t('clusters_cluster_nodes@在线'), value: '1'},
                    {label: t('clusters_cluster_nodes@不在线'), value: '2'},
                ]"
            ></b-select>
        </div>
		<div class="ui field">
			<b-select
				name="installedState"
				v-model="installState"
				:options="[
					{label: t('clusters_cluster_nodes@安装状态'), value: '0'},
					{label: t('clusters_cluster_nodes@已安装'), value: '1'},
					{label: t('clusters_cluster_nodes@未安装'), value: '2'},
				]"
			></b-select>
		</div>
        <div class="ui field" v-if="teaIsPlus && levels.length > 0">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: t('clusters_cluster_nodes@级别'), value: '0'},
                    ...levels.map(levelInfo => ({
                        label: levelInfo.name??'',
                        value: levelInfo.code??'',
                    }))
                ]"
            ></b-select>
        </div>
		<div class="ui field">
			<input type="text" name="keyword" :placeholder="t('clusters_cluster_nodes@关键词')" v-model="keyword" style="width:10em"/>
		</div>
		<div class="ui field">
			<button class="ui button" type="submit">{{t('clusters_cluster_nodes@搜索')}}</button> &nbsp;
            <a :href="'/clusters/cluster/nodes?clusterId=' + clusterId" v-if="regionId > 0 || groupId > 0 || groupId < 0 || installState > 0 || activeState > 0 || keyword.length > 0 || level > 0">{{t('clusters_cluster_nodes@清除条件')}}</a>
		</div>
	</div>
</form>

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

<div v-if="countAll == 0">
	<b-empty large>
		{{t('clusters_cluster_nodes@当前集群下还没有节点')}}
		<a :href="'/clusters/cluster/createNode?clusterId=' + clusterId">
			<i class="pi pi-pen-to-square"></i>
			{{t('clusters_cluster_nodes@创建节点')}}
		 </a>
	</b-empty>
</div>
<div v-if="countAll > 0">
	<b-empty v-if="nodes.length == 0">{{t('clusters_cluster_nodes@暂时还没有节点')}}</b-empty>
</div>

<div class="node-cards-container" v-if="nodes.length > 0">
    <div class="node-card" v-for="(record, index) in nodes" :key="record.id">
        <!-- 节点卡片头部 -->
        <div class="node-card-header">
            <div class="node-name">
                <a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.id">
                    {{record.name}}
                    <sup v-if="record.level > 1"><span class="node-level">L{{record.level}}</span></sup>
                </a>
                <a :href="'/clusters/cluster/node/settings/schedule?clusterId=' + record.cluster.id + '&nodeId=' + record.id">
                    <sup v-if="record.isBackup"><span class="node-status-tag">{{t('clusters_cluster_nodes@备用')}}</span></sup>
                    <sup v-if="record.offlineDay != null && record.offlineDay.length > 0"><span class="node-status-tag">{{t('clusters_cluster_nodes@到', [record.offlineDay.substring(0, 4) + '-' + record.offlineDay.substring(4, 6) + '-' + record.offlineDay.substring(6, 8)])}}</span></sup>
                </a>
            </div>
            <div class="node-actions">
                <a :href="'/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + record.id" class="node-action" :title="t('clusters_cluster_nodes@设置')">
                    <i class="pi pi-cog"></i>
                </a>
            </div>
        </div>
        
        <!-- 卡片内容区 -->
        <div class="node-card-body">
            <!-- 区域和分组信息 -->
            <div class="node-card-item node-card-item-wide" v-if="record.region != null || record.group != null">
                <div class="item-label">{{t('clusters_cluster_nodes@区域/分组')}}</div>
                <div class="item-value">
                    <span v-if="record.region != null">{{record.region.name}}</span>
                    <span v-if="record.region != null && record.group != null"> / </span>
                    <span v-if="record.group != null">{{record.group.name}}</span>
                </div>
            </div>
            
            <!-- IP地址 -->
            <div class="node-card-item node-card-item-wide">
                <div class="item-label">{{t('clusters_cluster_nodes@IP地址')}}</div>
                <div class="item-value">
                    <span v-if="record.ipAddresses.length == 0" class="disabled">-</span>
                    <div v-else class="ip-address-list">
                        <span class="compact-label" v-for="(addr, index) in record.ipAddresses" :title="addr.name.length > 0 ? addr.name + (addr.canAccess ? '' : t('clusters_cluster_nodes@不公开访问')) : (addr.canAccess ? '' : t('clusters_cluster_nodes@不公开访问'))">
                            {{addr.ip}}
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- DNS线路 -->
            <div class="node-card-item node-card-item-wide">
                <div class="item-label">{{t('clusters_cluster_nodes@DNS线路')}}</div>
                <div class="item-value">
                    <div class="routes-box compact" v-if="record.dnsRouteNames.length > 0">
                        <span class="compact-label" v-for="routeName in record.dnsRouteNames">{{routeName}}</span>
                        <a href="" @click.prevent="updateNodeDNS(record.id)" class="small">{{t('clusters_cluster_nodes@修改')}}</a>
                    </div>
                    <span v-else-if="hasClusterDNS">
                        <a href="" @click.prevent="updateNodeDNS(record.id)" class="small">{{t('clusters_cluster_nodes@设置DNS')}}</a>
                    </span>
                    <span v-else class="disabled">-</span>
                </div>
            </div>
            
            <!-- 系统状态信息 -->
            <div class="node-card-item">
                <div class="item-label">CPU</div>
                <div class="item-value" :class="{red: record.status.isActive && record.status.cpuUsage > 0.50, disabled: !record.status.isActive}">
                    {{record.status.isActive ? record.status.cpuUsageText : '-'}}
                </div>
            </div>
            
            <div class="node-card-item">
                <div class="item-label">{{t('clusters_cluster_nodes@内存')}}</div>
                <div class="item-value" :class="{red: record.status.isActive && record.status.memUsage > 0.80, disabled: !record.status.isActive}">
                    {{record.status.isActive ? record.status.memUsageText : '-'}}
                </div>
            </div>
            
            <div class="node-card-item">
                <div class="item-label">{{t('clusters_cluster_nodes@下行带宽')}}</div>
                <div class="item-value" :class="{disabled: !record.status.isActive || record.status.trafficOutBytes <= 0}">
                    {{record.status.isActive && record.status.trafficOutBytes > 0 ? teaweb.formatBits(record.status.trafficOutBytes * 8/60, 2) : '-'}}
                </div>
            </div>
            
            <div class="node-card-item">
                <div class="item-label">{{t('clusters_cluster_nodes@连接数')}}</div>
                <div class="item-value" :class="{disabled: !record.status.isActive || record.status.countConnections <= 0}">
                    {{record.status.isActive && record.status.countConnections > 0 ? teaweb.formatCount(record.status.countConnections) : '-'}}
                </div>
            </div>
            
            <div class="node-card-item">
                <div class="item-label">{{t('clusters_cluster_nodes@负载')}}</div>
                <div class="item-value" :class="{disabled: !record.status.isActive}">
                    {{record.status.isActive ? record.status.load1m : '-'}}
                </div>
            </div>
        </div>
        
        <!-- 卡片底部 -->
        <div class="node-card-footer">
            <!-- 状态显示 -->
            <div>
                <div v-if="!record.isUp" class="node-status red">
                    <i class="pi pi-exclamation-triangle"></i>
                    {{t('clusters_cluster_nodes@健康问题下线')}}
                    <a href="" @click.prevent="upNode(record.id)" class="action-link">
                        <i class="pi pi-arrow-up"></i>
                        {{t('clusters_cluster_nodes@上线')}}
                    </a>
                </div>
                <div v-else-if="!record.isOn">
                    <label-on :v-is-on="record.isOn"></label-on>
                </div>
                <div v-else-if="record.isInstalled">
                    <div v-if="record.status.isActive">
                        <span v-if="!record.isSynced" class="node-status red">
                            <i class="pi pi-sync"></i>
                            {{t('clusters_cluster_nodes@同步中')}}
                        </span>
                        <span v-else class="node-status green">
                            <i class="pi pi-check-circle"></i>
                            {{t('clusters_cluster_nodes@运行中')}}
                        </span>
                    </div>
                    <span v-else-if="record.status.updatedAt > 0" class="node-status red">
                        <i class="pi pi-times-circle"></i>
                        {{t('clusters_cluster_nodes@已断开')}}
                    </span>
                    <span v-else-if="record.status.updatedAt == 0" class="node-status red">
                        <i class="pi pi-power-off"></i>
                        {{t('clusters_cluster_nodes@未连接')}}
                    </span>
                </div>
                <div v-else>
                    <span v-if="record.installStatus.isRunning" class="node-status red">
                        <i class="pi pi-spin pi-spinner"></i>
                        {{t('clusters_cluster_nodes@安装中')}}
                    </span>
                    <a v-if="record.installStatus.isFinished && !record.installStatus.isOk" 
                       :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" 
                       :title="t('clusters_cluster_nodes@点击看安装错误')" 
                       class="node-status red">
                        <i class="pi pi-exclamation-circle"></i>
                        {{t('clusters_cluster_nodes@安装出错')}}
                    </a>
                    <a v-else 
                       class="node-status red" 
                       :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" 
                       :title="t('clusters_cluster_nodes@点击进安装界面')">
                        <i class="pi pi-download"></i>
                        {{t('clusters_cluster_nodes@未安装')}}
                    </a>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="node-footer-actions">
                <a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.id">{{t('clusters_cluster_nodes@详情')}}</a>
                <a href="" @click.prevent="updateNodeOn(record.id, !record.isOn)">
                    <span v-if="record.isOn">{{t('clusters_cluster_nodes@停用')}}</span><span v-else class="red">{{t('clusters_cluster_nodes@启用')}}</span>
                </a>
                <a href="" @click.prevent="deleteNode(record.id)">{{t('clusters_cluster_nodes@删除')}}</a>
            </div>
        </div>
    </div>
</div>

<div class="page" v-html="filterPageContent(page)"></div>