{$layout}

{$template "node_menu"}

<!-- 节点详情 -->
<div class="config-section">
    <div class="section-title">{{t('node_index@节点详情')}}</div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@节点名称')}}</div>
        <div class="item-content">{{node.name}}</div>
    </div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@状态')}}</div>
        <div class="item-content">
            <label-on :v-is-on="node.isOn"></label-on>
        </div>
    </div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@IP地址')}}</div>
        <div class="item-content">
            <div v-if="node.ipAddresses.length > 0">
                <div>
                    <div v-for="(address, index) in node.ipAddresses" class="ui label tiny basic" style="margin-right: 5px; margin-bottom: 5px;">
                        {{address.ip}}
                        <span class="small" v-if="address.name.length > 0">（{{address.name}}<span v-if="!address.canAccess">，{{t('node_index@不公开访问')}}</span>）</span> &nbsp;
                        <span class="small red" v-if="!address.isOn">[off]</span>
                        <span class="small red" v-if="!address.isUp">[down]</span>
                        <span class="small" v-if="address.name.length == 0 && !address.canAccess">（{{t('node_index@不公开访问')}}）</span>
                    </div>
                </div>
            </div>
            <div v-else>
                <b-empty>{{t('node_index@暂时还没有填写IP地址')}}</b-empty>
            </div>
        </div>
    </div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@更多选项')}}</div>
        <div class="item-content">
            <more-options-indicator></more-options-indicator>
        </div>
    </div>

    <div v-show="moreOptionsVisible">
        <div class="config-item">
            <div class="item-label">{{t('node_index@SSH主机地址')}}</div>
            <div class="item-content">
                <div v-if="node.login != null && node.login.params != null && node.login.params.host != null">
                    <span v-if="node.login.params.host.length > 0">{{node.login.params.host}}</span>
                    <span v-else class="disabled">{{t('node_index@尚未设置')}}</span>
                </div>
                <div v-else class="disabled">
                    {{t('node_index@尚未设置')}}
                </div>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_index@SSH主机端口')}}</div>
            <div class="item-content">
                <div v-if="node.login != null && node.login.params != null && node.login.params.host != null">
                    <span v-if="node.login.params.port > 0">{{node.login.params.port}}</span>
                    <span v-else class="disabled">{{t('node_index@尚未设置')}}</span>
                </div>
                <span v-else class="disabled">
                    {{t('node_index@尚未设置')}}
                </span>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_index@SSH登录认证')}}</div>
            <div class="item-content">
                <div v-if="node.login != null && node.login.grant != null && node.login.grant.id > 0">
                    <a :href="'/clusters/grants/grant?grantId=' + node.login.grant.id">{{node.login.grant.name}}<span class="small grey">（{{node.login.grant.methodName}}）</span><span class="small grey" v-if="node.login.grant.username.length > 0">（{{node.login.grant.username}}）</span></a>
                </div>
                <span v-else class="disabled">
                    {{t('node_index@尚未设置')}}
                </span>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_index@API节点地址')}}</div>
            <div class="item-content">
                <div v-if="node.apiNodeAddrs != null && node.apiNodeAddrs.length > 0">
                    <span v-for="addr in node.apiNodeAddrs" class="ui label basic small" style="margin-right: 5px; margin-bottom: 5px;">{{addr}}</span>
                </div>
                <span v-else class="disabled">{{t('node_index@使用全局设置')}}</span>
            </div>
        </div>
    </div>
</div>

<!-- 运行状态 -->
<div class="config-section">
    <div class="section-title">{{t('node_index@运行状态')}}</div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@运行状态')}}</div>
        <div class="item-content">
            <div  v-if="node.status.isActive">
                <span class="green">{{t('node_index@运行中')}}</span> &nbsp;
                <a href="" @click.prevent="stopNode()" v-if="!isStopping"><span>[{{t('node_index@通过SSH停止')}}]</span></a>
                <span v-if="isStopping">[{{t('node_index@停止中')}}...]</span>
            </div>
            <div v-else>
                <span class="red">{{t('node_index@已断开')}}</span> &nbsp;
                <a href="" @click.prevent="startNode()" v-if="node.isInstalled && !isStarting"><span>[{{t('node_index@通过SSH启动')}}]</span></a>
                <span v-if="node.isInstalled && isStarting">[{{t('node_index@启动中')}}...]</span>
                <a v-if="!node.isInstalled" :href="'/ns/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" ><span>{{t('node_index@去安装')}}&gt;</span></a>
            </div>
        </div>
    </div>

    <div v-show="node.status.isActive">
        <div class="config-item">
            <div class="item-label">{{t('node_index@CPU用量')}}</div>
            <div class="item-content">{{node.status.cpuUsageText}} &nbsp; <span v-if="node.status.cpuPhysicalCount > 0" class="small grey">（{{node.status.cpuPhysicalCount}}{{t('node_index@核心')}}/{{node.status.cpuLogicalCount}}{{t('node_index@线程')}}）</span></div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('node_index@内存用量')}}</div>
            <div class="item-content">{{node.status.memUsageText}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('node_index@负载')}}</div>
            <div class="item-content">{{node.status.load1m}} &nbsp; {{node.status.load5m}} &nbsp; {{node.status.load15m}} &nbsp; <tip-icon :content="t('node_index@三个数字分别代表1分钟5分钟15分钟平均负载')"></tip-icon></div>
        </div>
    </div>

    <div class="config-item" v-if="node.status.buildVersion != null && node.status.buildVersion.length > 0">
        <div class="item-label">{{t('node_index@版本')}}</div>
        <div class="item-content">v{{node.status.buildVersion}}
            &nbsp; <a :href="'/ns/clusters/cluster/upgradeRemote?clusterId=' + clusterId" v-if="shouldUpgrade"><span class="red">{{t('node_index@发现新版本vValue', [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">{{t('node_index@主程序位置')}}</div>
        <div class="item-content">{{node.status.exePath}}</div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('node_index@最近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('node_index@连接错误异常严重Value失败请改善当前节点和API节点之间通讯', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else-if="node.status.apiSuccessPercent <= 80" class="red">{{t('node_index@连接错误较多Value失败请改善当前节点和API节点之间通讯', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else-if="node.status.apiSuccessPercent < 100" class="orange">{{t('node_index@有连接错误发生Value失败请改善当前节点和API节点之间通讯', [round(100 - node.status.apiSuccessPercent)])}}</span>
                <span v-else>
                    <span v-if="node.status.apiAvgCostSeconds <= 1" class="green">{{t('node_index@连接良好')}}</span>
                    <span v-else-if="node.status.apiAvgCostSeconds <= 5" class="orange">{{t('node_index@连接基本稳定平均Value秒', [round(node.status.apiAvgCostSeconds)])}}</span>
                    <span v-else-if="node.status.apiAvgCostSeconds <= 10" class="orange">{{t('node_index@连接速度较慢平均Value秒', [round(node.status.apiAvgCostSeconds)])}}</span>
                    <span v-else class="red">{{t('node_index@连接非常慢平均Value秒请改善当前节点和API节点之间通讯', [round(node.status.apiAvgCostSeconds)])}}</span>
                </span>
            </span>
            <span v-else class="disabled">{{t('node_index@尚未上报数据')}}</span>
        </div>
    </div>
    <div class="config-item" v-if="nodeDatetime.length > 0">
        <div class="item-label">{{t('node_index@上次更新时间')}}</div>
        <div class="item-content">
            {{nodeDatetime}}
            <p class="comment" v-if="nodeTimeDiff > 30"><span class="red">{{t('node_index@当前节点时间与API节点时间相差Value秒请同步节点时间', [nodeTimeDiff])}}</span></p>
        </div>
    </div>
    <p class="comment" v-if="node.status.isActive" style="padding-left: 1rem; padding-bottom: 1rem;">{{t('node_index@每隔30秒钟更新一次运行状态')}}</p>
</div>

<!-- 安装信息 -->
<div class="config-section">
    <div class="section-title">{{t('node_index@安装信息')}}</div>

    <div class="config-item">
        <div class="item-label">{{t('node_index@节点ID')}}<em>（id）</em></div>
        <div class="item-content">{{node.uniqueId}}</div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('node_index@密钥')}}<em>（secret）</em></div>
        <div class="item-content">{{node.secret}}</div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('node_index@安装目录')}}</div>
        <div class="item-content">
            <div v-if="node.installDir.length == 0">{{t('node_index@使用集群设置')}}<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">{{t('node_index@已安装')}}</div>
        <div class="item-content">
            <span v-if="node.isInstalled" class="green">{{t('node_index@已安装')}}</span>
            <a v-else :href="'/ns/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + nodeId" class="underline" :title="t('node_index@点击进入安装界面')"><span class="red">{{t('node_index@未安装')}}</span></a>
        </div>
    </div>
</div>