{$layout}

	{$template "node_menu"}

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

<!-- 基本信息 -->
<div class="config-section">
    <div class="section-title">{{t('clusters_cluster_node_detail@基本信息')}}</div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-tag"></i> {{t('clusters_cluster_node_detail@节点名称')}}</div>
        <div class="item-content">{{node.name}}</div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-power-off"></i> {{t('clusters_cluster_node_detail@启用状态')}}</div>
        <div class="item-content">
            <label-on :v-is-on="node.isOn"></label-on>
        </div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-sitemap"></i> {{t('clusters_cluster_node_detail@所属集群')}}</div>
        <div class="item-content">
            <node-clusters-labels :v-primary-cluster="node.cluster" :v-secondary-clusters="node.secondaryClusters"></node-clusters-labels>
        </div>
    </div>
    
    <div class="config-item" v-show="node.isBackupForCluster || node.isBackupForGroup">
        <div class="item-label"><i class="pi pi-shield"></i> {{t('clusters_cluster_node_detail@备用节点')}}</div>
        <div class="item-content">
            <span class="ui label basic small" v-if="node.isBackupForCluster">{{t('clusters_cluster_node_detail@集群备用节点')}}</span>
            <span class="ui label basic small" v-if="node.isBackupForGroup">{{t('clusters_cluster_node_detail@分组备用节点')}}</span>
            &nbsp; <a :href="'/clusters/cluster/node/settings/schedule?clusterId=' + clusterId + '&nodeId=' + node.id" style="font-size: 0.8em">[{{t('clusters_cluster_node_detail@修改')}}]</a>
        </div>
    </div>
    
    <div class="config-item" v-show="node.offlineDay.length > 0">
        <div class="item-label"><i class="pi pi-calendar-times"></i> {{t('clusters_cluster_node_detail@租期到期时间')}}</div>
        <div class="item-content">
            {{node.offlineDay.substring(0, 4)}}-{{node.offlineDay.substring(4, 6)}}-{{node.offlineDay.substring(6, 8)}}
            &nbsp; <a :href="'/clusters/cluster/node/settings/schedule?clusterId=' + clusterId + '&nodeId=' + node.id" style="font-size: 0.8em">[{{t('clusters_cluster_node_detail@修改')}}]</a>
            <p class="comment" v-if="node.isOffline"><span class="red">{{t('clusters_cluster_node_detail@已过期')}}</span></p>
        </div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-globe"></i> {{t('clusters_cluster_node_detail@IP地址')}}</div>
        <div class="item-content">
            <div v-if="node.ipAddresses.length > 0" class="ip-addresses">
                <div v-for="(address, index) in node.ipAddresses" class="ip-tag" :key="address.ip">
                    <i class="status-icon" :class="{'on': address.isOn && address.isUp, 'off': !address.isOn || !address.isUp}"></i>
                    <span v-if="address.ip.indexOf(':') > -1" class="grey">[IPv6]</span> {{address.ip}}
                    <span class="small red" v-if="address.originIP != null && address.originIP.length > 0 && address.originIP != address.ip">{{t('clusters_cluster_node_detail@原始IP', {originIP: address.originIP})}}</span>
                    <span class="small grey" v-if="address.name.length > 0">{{t('clusters_cluster_node_detail@备注', {name: address.name, status: address.canAccess ? '' : t('clusters_cluster_node_detail@未公开')})}}</span>
                    <span class="small grey" v-if="address.name.length == 0 && !address.canAccess">{{t('clusters_cluster_node_detail@未公开')}}</span>
                </div>
            </div>
            <div v-else>
                <b-empty>{{t('clusters_cluster_node_detail@没有IP地址')}}</b-empty>
            </div>
        </div>
    </div>
    
    <div class="config-item" v-if="node.routes.length > 0">
        <div class="item-label"><i class="pi pi-directions"></i> {{t('clusters_cluster_node_detail@DNS路由')}}</div>
        <div class="item-content">
            <span class="ui label tiny basic" v-for="route in node.routes" :key="route.id">{{route.name}} <span class="grey small">（{{route.domainName}}）</span></span>
        </div>
    </div>
    
    <div class="config-item" v-if="node.records.length > 0">
        <div class="item-label"><i class="pi pi-table"></i> {{t('clusters_cluster_node_detail@DNS记录')}}</div>
        <div class="item-content">
            <div :style="{opacity: dnsIsExcludingLnNode ? 0.5 : 1.0}" class="dns-records">
                 <b-table
                    :columns="[
                        { title: t('clusters_cluster_node_detail@集群'), dataIndex: 'clusterName', key: 'clusterName' },
                        { title: t('clusters_cluster_node_detail@记录名'), dataIndex: 'name', key: 'name' },
                        { title: t('clusters_cluster_node_detail@记录类型'), dataIndex: 'type', key: 'type', width: '80px' },
                        { title: t('clusters_cluster_node_detail@路由'), key: 'route', width: '150px', scopedSlots: { customRender: 'routeSlot' } },
                        { title: t('clusters_cluster_node_detail@记录值'), dataIndex: 'value', key: 'value' },
                        { title: t('clusters_cluster_node_detail@状态'), key: 'status', width: '100px', align: 'center', scopedSlots: { customRender: 'statusSlot' } }
                    ]"
                    :data-source="node.records"
                    row-key="name"
                    size="small"
                    :pagination="false"
                    class="simple-table"
                 >
                     <template slot="routeSlot" slot-scope="{ text, record }">
                          <span v-if="record.route.length > 0">{{record.route}}</span>
                          <span v-else class="disabled">{{t('clusters_cluster_node_detail@默认')}}</span>
                     </template>
                     <template slot="statusSlot" slot-scope="{ text, record }">
                        <Tag v-if="record.isBackup" color="orange">{{t('clusters_cluster_node_detail@备用节点')}}</Tag>
                        <Tag v-else-if="record.isOffline" color="red">{{t('clusters_cluster_node_detail@已过期')}}</Tag>
                        <Tag v-else color="green">{{t('clusters_cluster_node_detail@正常')}}</Tag>
                     </template>
                 </b-table>
            </div>
            <p class="comment" v-if="!dnsIsExcludingLnNode">{{t('clusters_cluster_node_detail@DNS记录说明')}}</p>
            <p class="comment" v-if="dnsIsExcludingLnNode"><span class="red">{{t('clusters_cluster_node_detail@DNS不解析Ln节点说明')}}</span></p>
            <p class="comment" v-if="!node.isInstalled"><span class="red">{{t('clusters_cluster_node_detail@未安装DNS说明')}}<a :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id">[{{t('clusters_cluster_node_detail@点击安装')}}]</a></span></p>
        </div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-map-marker"></i> {{t('clusters_cluster_node_detail@区域')}}</div>
        <div class="item-content">
            <span v-if="node.region != null" class="ui label small basic">{{node.region.name}}</span>
            <span v-else class="disabled">{{t('clusters_cluster_node_detail@没有设置区域')}}</span>
        </div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-users"></i> {{t('clusters_cluster_node_detail@分组')}}</div>
        <div class="item-content">
            <span v-if="node.group != null" class="ui label small basic">{{node.group.name}}</span>
            <span v-else class="disabled">{{t('clusters_cluster_node_detail@没有设置分组')}}</span>
        </div>
    </div>
    
    <div class="config-item" v-if="teaIsPlus">
        <div class="item-label"><i class="pi pi-star"></i> {{t('clusters_cluster_node_detail@等级')}}</div>
        <div class="item-content">
            <span :class="{blue: node.levelInfo.code > 1}">{{node.levelInfo.name}}</span>
            &nbsp; &nbsp; <span v-if="node.level > 1 && node.lnAddrs != null && node.lnAddrs.length > 0">
                <span v-for="lnAddr in node.lnAddrs" class="ui label tiny basic" :key="lnAddr">{{lnAddr}}</span>
            </span>
            <p class="comment" v-if="node.level > 1 && node.lnAddrs != null && node.lnAddrs.length > 0">{{t('clusters_cluster_node_detail@指定了Ln节点访问地址')}}</p>
        </div>
    </div>
</div>

<!-- 运行状态 -->
<div class="config-section">
     <div class="section-title">{{t('clusters_cluster_node_detail@运行状态')}}</div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-cog"></i> {{t('clusters_cluster_node_detail@运行状态')}}</div>
        <div class="item-content">
            <div v-if="node.status.isActive">
                <Tag color="green">{{t('clusters_cluster_node_detail@运行中')}}</Tag>
                <div class="action-buttons" style="display: inline-block; margin-left: 1em;">
                    <a-button size="small" danger @click.prevent="stopNode()" :loading="isStopping">
                        <i class="pi pi-stop"></i> {{t('clusters_cluster_node_detail@通过SSH停止')}}
                    </a-button>
                </div>
            </div>
            <div v-else>
                 <Tag color="red">{{t('clusters_cluster_node_detail@已断开')}}</Tag>
                <div class="action-buttons" style="display: inline-block; margin-left: 1em;">
                    <a-button size="small" type="primary" @click.prevent="startNode()" v-if="node.isInstalled" :loading="isStarting">
                         <i class="pi pi-play"></i> {{t('clusters_cluster_node_detail@通过SSH启动')}}
                    </a-button>
                    <a-button size="small" v-if="!node.isInstalled" :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id">
                         <i class="pi pi-download"></i> {{t('clusters_cluster_node_detail@去安装')}}
                    </a-button>
                </div>
            </div>
        </div>
    </div>
    
    <template v-if="node.status.isActive">
        <div class="config-item">
            <div class="item-label"><i class="pi pi-microchip"></i> {{t('clusters_cluster_node_detail@CPU用量')}}</div>
            <div class="item-content">{{node.status.cpuUsageText}} <span v-if="node.status.cpuPhysicalCount > 0" class="small grey">{{t('clusters_cluster_node_detail@CPU核心数',[node.status.cpuPhysicalCount, node.status.cpuLogicalCount])}}</span></div>
        </div>
        
        <div class="config-item">
            <div class="item-label"><i class="pi pi-memory"></i> {{t('clusters_cluster_node_detail@内存用量')}}</div>
            <div class="item-content">{{node.status.memUsageText}}</div>
        </div>
        
        <div class="config-item">
            <div class="item-label"><i class="pi pi-link"></i> {{t('clusters_cluster_node_detail@连接数')}}</div>
            <div class="item-content">{{node.status.connectionCount}}</div>
        </div>
        
        <div class="config-item">
            <div class="item-label"><i class="pi pi-chart-bar"></i> {{t('clusters_cluster_node_detail@负载')}}</div>
            <div class="item-content">{{node.status.load1m}} &nbsp; {{node.status.load5m}} &nbsp; {{node.status.load15m}} &nbsp; <tip-icon :content="t('clusters_cluster_node_detail@负载说明')"></tip-icon></div>
        </div>
        
        <div class="config-item">
            <div class="item-label"><i class="pi pi-database"></i> {{t('clusters_cluster_node_detail@缓存用量')}}</div>
            <div class="item-content">{{t('clusters_cluster_node_detail@硬盘',[node.status.cacheTotalDiskSize])}} &nbsp; {{t('clusters_cluster_node_detail@内存',[node.status.cacheTotalMemorySize])}}</div>
        </div>
    </template>
    
    <div class="config-item" v-if="node.status.buildVersion != null && node.status.buildVersion.length > 0">
        <div class="item-label"><i class="pi pi-code"></i> {{t('clusters_cluster_node_detail@版本')}}</div>
        <div class="item-content">v{{node.status.buildVersion}}
            &nbsp; <a :href="'/clusters/cluster/upgradeRemote?clusterId=' + clusterId" v-if="shouldUpgrade"><span class="red">{{t('clusters_cluster_node_detail@发现新版本', [newVersion])}} &raquo;</span></a>
        </div>
    </div>
    
    <div class="config-item" v-if="node.status.exePath != null && node.status.exePath.length > 0">
        <div class="item-label"><i class="pi pi-file"></i> {{t('clusters_cluster_node_detail@主程序位置')}}</div>
        <div class="item-content">{{node.status.exePath}}</div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-cloud"></i> {{t('clusters_cluster_node_detail@最近API连接状况')}}</div>
        <div class="item-content">
            <span v-if="node.status.apiSuccessPercent > 0 && node.status.apiAvgCostSeconds > 0">
                <span v-if="node.status.apiSuccessPercent <= 50" class="red">{{t('clusters_cluster_node_detail@API连接错误严重', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else-if="node.status.apiSuccessPercent <= 80" class="red">{{t('clusters_cluster_node_detail@API连接错误高', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else-if="node.status.apiSuccessPercent < 100" class="orange">{{t('clusters_cluster_node_detail@API连接错误中等', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else>
                    <span v-if="node.status.apiAvgCostSeconds <= 1" class="green">{{t('clusters_cluster_node_detail@API连接良好')}}</span>
                    <span v-else-if="node.status.apiAvgCostSeconds <= 5" class="orange">{{t('clusters_cluster_node_detail@API连接基本稳定', [round(node.status.apiAvgCostSeconds)])}}</span>
                    <span v-else-if="node.status.apiAvgCostSeconds <= 10" class="orange">{{t('clusters_cluster_node_detail@API连接速度较慢', [round(node.status.apiAvgCostSeconds)])}}</span>
                    <span v-else class="red">{{t('clusters_cluster_node_detail@API连接非常慢', [round(node.status.apiAvgCostSeconds)])}}</span>
                </span>
            </span>
            <span v-else class="disabled">{{t('clusters_cluster_node_detail@没有数据报告')}}</span>
        </div>
    </div>
    
    <div class="config-item" v-if="nodeDatetime.length > 0">
        <div class="item-label"><i class="pi pi-clock"></i> {{t('clusters_cluster_node_detail@上次更新时间')}}</div>
        <div class="item-content">
            {{nodeDatetime}}
            <p class="comment" v-if="nodeTimeDiff > 30"><span class="red">{{t('clusters_cluster_node_detail@节点时间与API时间相差N秒',[nodeTimeDiff])}}</span></p>
        </div>
    </div>
</div>

<!-- 安装信息 -->
<div class="config-section">
     <div class="section-title">{{t('clusters_cluster_node_detail@安装信息')}}</div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-id-card"></i> {{t('clusters_cluster_node_detail@节点ID')}}<em>（id）</em></div>
        <div class="item-content">{{node.uniqueId}}</div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-key"></i> {{t('clusters_cluster_node_detail@密钥')}}<em>（secret）</em></div>
        <div class="item-content">{{node.secret}}</div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-folder"></i> {{t('clusters_cluster_node_detail@安装目录')}}</div>
        <div class="item-content">
            <div v-if="node.installDir.length == 0">{{t('clusters_cluster_node_detail@使用集群设置')}}<span v-if="node.cluster != null && node.cluster.installDir.length > 0">（{{node.cluster.installDir}}）</span></div>
            <span v-else>{{node.installDir}}</span>
        </div>
    </div>
    
    <div class="config-item">
        <div class="item-label"><i class="pi pi-check-circle"></i> {{t('clusters_cluster_node_detail@已安装')}}</div>
        <div class="item-content">
            <span v-if="node.isInstalled">
                <Tag color="green">{{t('clusters_cluster_node_detail@已安装')}}</Tag> &nbsp; 
                <a-button size="small" type="link" @click.prevent="showMoreOps">[{{t('clusters_cluster_node_detail@操作')}}]</a-button>
            </span>
            <a v-else :href="'/clusters/cluster/installNodes?clusterId=' + clusterId + '&nodeId=' + nodeId" title="点击进入安装界面">
                <Tag color="red">{{t('clusters_cluster_node_detail@未安装')}}</Tag>
            </a>
        </div>
    </div>
    
    <div class="config-item" v-show="moreOpsVisible && node.isInstalled">
        <div class="item-label"><i class="pi pi-trash"></i> {{t('clusters_cluster_node_detail@操作')}}</div>
        <div class="item-content">
            <a-button danger @click.prevent="uninstallNode">
                 <i class="pi pi-trash"></i> {{t('clusters_cluster_node_detail@卸载')}}
             </a-button>
        </div>
    </div>
</div>

<p class="comment" v-if="node.status.isActive">{{t('clusters_cluster_node_detail@更新状态说明')}}</p>