{$layout}
{$template "node_menu"}
{$template "/code_editor"}

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

<!-- 未安装 -->
<div v-if="!node.isInstalled">
    <div class="ui message warning">
        <span class="red">{{t('clusters_cluster_node_install@未安装警告')}}<link-red href=""
                @click.prevent="updateNodeIsInstalled(true)">{{t('clusters_cluster_node_install@已完成安装Link')}}</link-red> 。</span>
    </div>

    <!-- SSH自动安装 -->
    <div class="config-section">
        <div class="section-title"><i class="pi pi-code"></i> {{t('clusters_cluster_node_install@方法1通过SSH自动安装')}}</div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-server"></i> {{t('clusters_cluster_node_install@SSH地址')}}</div>
            <div class="item-content">
                <span v-if="sshAddr.length > 0">{{sshAddr}} &nbsp; <a href=""
                        @click.prevent="showSSHPopup(nodeId)">{{t('clusters_cluster_node_install@修改')}}</a></span>
                <span v-else><span class="red">{{t('clusters_cluster_node_install@尚未设置')}}</span> &nbsp; <a href=""
                        @click.prevent="showSSHPopup(nodeId)">{{t('clusters_cluster_node_install@设置')}}</a></span>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-download"></i> {{t('clusters_cluster_node_install@安装')}}</div>
            <div class="item-content">
                <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
                    class="installing-box"
                    :class="{'info': installStatus.isRunning, 'success': installStatus.isOk, 'error': !installStatus.isOk}">
                    <div v-if="installStatus.isRunning" class="blue"><i class="pi pi-spin pi-spinner"></i> {{t('clusters_cluster_node_install@安装中')}}</div>
                    <div v-if="installStatus.isFinished">
                        <span v-if="installStatus.isOk" class="green"><i class="pi pi-check-circle"></i> {{t('clusters_cluster_node_install@已安装成功')}}</span>
                        <span v-if="!installStatus.isOk" class="red"><i class="pi pi-times-circle"></i> {{t('clusters_cluster_node_install@安装过程中发生错误', [installStatus.error])}}</span>
                    </div>
                </div>
                <div class="action-buttons" style="margin-top: 0.5em;">
                    <div v-if="installStatus != null && installStatus.isFinished">
                         <a-button @click.prevent="install()">
                             <i class="pi pi-refresh"></i> {{t('clusters_cluster_node_install@重新安装')}}
                         </a-button>
                    </div>
                    <div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
                         <a-button @click.prevent="install()">
                             <i class="pi pi-play"></i> {{t('clusters_cluster_node_install@开始安装')}}
                         </a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 手动安装 -->
    <div class="config-section">
        <div class="section-title"><i class="pi pi-wrench"></i> {{t('clusters_cluster_node_install@方法2手动安装')}}</div>

        <div v-if="installerFiles != null && installerFiles.length > 0" class="config-item">
            <div class="item-label"><i class="pi pi-download"></i> {{t('clusters_cluster_node_install@下载安装文件')}}</div>
            <div class="item-content">
                <table class="ui table compact celled definition structured small">
                    <thead>
                        <tr>
                            <th>{{t('clusters_cluster_node_install@文件名')}}</th>
                            <th>{{t('clusters_cluster_node_install@操作系统')}}</th>
                            <th>{{t('clusters_cluster_node_install@CPU架构')}}</th>
                            <th>{{t('clusters_cluster_node_install@版本')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="installerFile in installerFiles" :key="installerFile.name">
                            <td>
                                <a :href="'/clusters/cluster/downloadInstaller?name=' + installerFile.name"
                                    target="_blank">{{installerFile.name}}</a>
                            </td>
                            <td>{{installerFile.os}}</td>
                            <td>{{installerFile.arch}}</td>
                            <td>v{{installerFile.version}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-file"></i> {{t('clusters_cluster_node_install@配置文件')}}</div>
            <div class="item-content">
                configs/api_node.yaml &nbsp;
                <download-link :v-element="'rpc-code'" :v-file="'api_node.yaml'">{{t('clusters_cluster_node_install@下载')}}</download-link>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-code"></i> {{t('clusters_cluster_node_install@配置内容')}}</div>
            <div class="item-content">
                <source-code-box id="rpc-code" type="text/yaml">rpc.endpoints: [{{apiEndpoints}}]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
                <p class="comment">
                {{t('clusters_cluster_node_install@配置文件说明')}}<code-label>configs/api_node.yaml</code-label>{{t('clusters_cluster_node_install@配置文件说明2')}}。
                </p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-folder"></i> {{t('clusters_cluster_node_install@安装目录')}}</div>
            <div class="item-content">
                <div v-if="node.installDir.length == 0">
                    <span
                        v-if="node.cluster != null && node.cluster.installDir.length > 0">{{t('clusters_cluster_node_install@建议使用集群设置')}}（{{node.cluster.installDir}}）</span>
                    <span v-else>{{t('clusters_cluster_node_install@建议安装在')}}</span>
                </div>
                <span v-else>{{node.installDir}}</span>
            </div>
        </div>
    </div>

    <div class="ui divider"></div>
    <div class="action-buttons">
        <a-button @click.prevent="updateNodeIsInstalled(true)">
            <i class="pi pi-check"></i> {{t('clusters_cluster_node_install@修改当前节点为已安装状态')}}
        </a-button>
    </div>
</div>

<!-- 已安装 -->
<div v-if="node.isInstalled">
    <div class="config-section">
        <div class="section-title"><i class="pi pi-file"></i> {{t('clusters_cluster_node_install@配置文件')}}</div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-file"></i> {{t('clusters_cluster_node_install@配置文件')}}</div>
            <div class="item-content">
                configs/api_node.yaml &nbsp; <download-link :v-element="'rpc-code'"
                    :v-file="'api_node.yaml'">{{t('clusters_cluster_node_install@下载')}}</download-link>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-code"></i> {{t('clusters_cluster_node_install@配置内容')}}</div>
            <div class="item-content">
                <source-code-box id="rpc-code" type="text/yaml">rpc.endpoints: [ {{apiEndpoints}} ]
                    nodeId: "{{node.uniqueId}}"
                    secret: "{{node.secret}}"</source-code-box>
                <p class="comment">{{t('clusters_cluster_node_install@每个节点的配置文件内容均不相同不能混用')}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"><i class="pi pi-folder"></i> {{t('clusters_cluster_node_install@安装目录')}}</div>
            <div class="item-content">
                <div v-if="node.installDir.length == 0">
                    {{t('clusters_cluster_node_install@使用集群设置')}}
                    <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 v-if="exeRoot.length > 0" class="config-item">
            <div class="item-label"><i class="pi pi-map-marker"></i> {{t('clusters_cluster_node_install@最近运行目录')}}</div>
            <div class="item-content">{{exeRoot}}</div>
        </div>
    </div>

    <div class="ui message success">
        <i class="pi pi-check-circle" style="font-size: 17px; margin-right: 5px;"></i> {{t('clusters_cluster_node_install@当前节点为已安装状态')}}
        <a-button @click.prevent="updateNodeIsInstalled(false)" style="margin-left: 1em;">
            <i class="pi pi-refresh"></i> {{t('clusters_cluster_node_install@重新安装')}}
        </a-button>
    </div>
</div>