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

<!-- 未安装 -->
<div v-if="!node.isInstalled">
    <h4>方法1：通过SSH自动安装</h4>

    <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
         class="ui segment installing-box">
        <div v-if="installStatus.isRunning" class="blue">安装中...</div>
        <div v-if="installStatus.isFinished">
            <span v-if="installStatus.isOk" class="green">已安装成功</span>
            <span v-if="!installStatus.isOk" class="red">安装过程中发生错误：{{installStatus.error}}</span>
        </div>
    </div>
    <div v-if="installStatus != null && installStatus.isFinished">
        <button class="ui button small" type="button" @click.prevent="install()">重新安装</button>
    </div>
    <div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
        <button class="ui button small" type="button" @click.prevent="install()">开始安装</button>
    </div>

    <h4>方法2：手动安装</h4>
    <table class="ui table definition selectable">
        <tr v-if="installerFiles != null && installerFiles.length > 0">
            <td class="title">下载安装文件</td>
            <td>
                <table class="ui table celled">
                    <thead class="full-width">
                        <tr>
                            <th>文件名</th>
                            <th>操作系统</th>
                            <th>CPU架构</th>
                            <th>版本</th>
                        </tr>
                    </thead>
                    <tr v-for="installerFile in installerFiles">
                        <td>
                            <a :href="'/clusters/cluster/downloadInstaller?name=' + installerFile.name" target="_blank" style="font-weight: normal">{{installerFile.name}}</a>
                        </td>
                        <td>{{installerFile.os}}</td>
                        <td>{{installerFile.arch}}</td>
                        <td>v{{installerFile.version}}</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>配置文件<em>（configs/api.yaml）</em><br/>
            <em><download-link :v-element="'rpc-code'" :v-file="'api.yaml'">[下载]</download-link ></em></td>
            <td>
					<source-code-box id="rpc-code" type="text/yaml">rpc:
    endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
                <p class="comment">手动替换edge-node安装目录下的<code-label>configs/api.yaml</code-label>文件，然后重新启动生效；如果此文件不存在，则需要创建。</p>
            </td>
        </tr>
        <tr>
            <td class="title">安装目录</td>
            <td>
                <div v-if="node.installDir.length == 0">
                    <span v-if="node.cluster != null && node.cluster.installDir.length > 0">建议使用集群设置（{{node.cluster.installDir}}</span>
                    <span v-else>建议安装在 /usr/local/goedge/edge-node</span>
                </div>
                <span v-else>{{node.installDir}}</span>
            </td>
        </tr>
    </table>

    <a href="" @click.prevent="updateNodeIsInstalled(true)">[修改为已安装状态]</a>
</div>

<!-- 已安装 -->
<div v-if="node.isInstalled">
    <h4>配置文件</h4>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">配置文件<em>（configs/api.yaml）</em><br/>
                <em><download-link :v-element="'rpc-code'" :v-file="'api.yaml'">[下载]</download-link ></em></td>
            <td>
                <source-code-box id="rpc-code" type="text/yaml">rpc:
    endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
            </td>
        </tr>
        <tr>
            <td class="title">安装目录</td>
            <td>
                <div v-if="node.installDir.length == 0">使用集群设置<span
                        v-if="node.cluster != null && node.cluster.installDir.length > 0">（{{node.cluster.installDir}}）</span>
                </div>
                <span v-else>{{node.installDir}}</span>
            </td>
        </tr>
        <tr v-if="exeRoot.length > 0">
            <td>最近运行目录</td>
            <td>{{exeRoot}}</td>
        </tr>
    </table>

    <div>
        <div class="ui message success">当前节点为已安装状态。</div>
        <a href="" @click.prevent="updateNodeIsInstalled(false)">[重新安装]</a>
    </div>
</div>