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

<!-- 未安装 -->
<div v-if="!node.isInstalled">
    <div>
        <span class="red">在当前节点完成安装前，相关DNS解析记录将不会生效，<link-red href="" @click.prevent="updateNodeIsInstalled(true)">已完成安装</link-red> 。</span>
        <div class="ui divider"></div>
    </div>

    <b-settings-header>方法1：通过SSH自动安装</b-settings-header>
    <!-- <h4>方法1：通过SSH自动安装</h4> -->

    <b-status-card>
        <b-status-card-item label="SSH地址" span="full">
            <span v-if="sshAddr.length > 0">{{sshAddr}} &nbsp; <a href="" @click.prevent="showSSHPopup(nodeId)">[修改]</a></span>
            <span v-else><span class="red">尚未设置</span> &nbsp; <a href="" @click.prevent="showSSHPopup(nodeId)">[设置]</a></span>
        </b-status-card-item>
        <b-status-card-item label="安装" span="full">
            <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 primary" type="button" @click.prevent="install()">开始安装</button>
            </div>
        </b-status-card-item>
    </b-status-card>
    <!-- <table class="ui table definition selectable">
        <tr>
            <td class="title">SSH地址</td>
            <td>
                <span v-if="sshAddr.length > 0">{{sshAddr}} &nbsp; <a href="" @click.prevent="showSSHPopup(nodeId)">[修改]</a></span>
                <span v-else><span class="red">尚未设置</span> &nbsp; <a href="" @click.prevent="showSSHPopup(nodeId)">[设置]</a></span>
            </td>
        </tr>
    </table> -->
    <!-- <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 primary" type="button" @click.prevent="install()">开始安装</button>
    </div> -->

    <b-settings-header>方法2：手动安装</b-settings-header>
    <!-- <h4>方法2：手动安装</h4> -->


    <b-status-card>
        <b-status-card-item v-if="installerFiles != null && installerFiles.length > 0" label="下载安装文件" span="full">
            <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>
        </b-status-card-item>
        <b-status-card-item label="配置文件" span="full">
            configs/api_node.yaml &nbsp;
            <download-link :v-element="'rpc-code'" :v-file="'api_node.yaml'">[下载]</download-link >
        </b-status-card-item>
        <b-status-card-item label="配置内容" span="full">
            <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_node.yaml</code-label>文件，然后重新启动生效；如果此文件不存在，则需要创建。</p>
        </b-status-card-item>
        <b-status-card-item label="安装目录" span="full">
            <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>
        </b-status-card-item>
    </b-status-card>

    <!-- <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>配置文件</td>
            <td>
                configs/api_node.yaml &nbsp;
                <download-link :v-element="'rpc-code'" :v-file="'api_node.yaml'">[下载]</download-link >
            </td>
        </tr>
        <tr>
            <td>配置内容</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_node.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> -->

    <div class="ui divider"></div>
    <a href="" @click.prevent="updateNodeIsInstalled(true)">[修改当前节点为已安装状态]</a>
</div>

<!-- 已安装 -->
<div v-if="node.isInstalled">
    <b-settings-header>配置文件</b-settings-header>
    <!-- <h4>配置文件</h4> -->

    <b-status-card>
        <b-status-card-item label="配置文件" span="full">
            configs/api_node.yaml  &nbsp; <download-link :v-element="'rpc-code'" :v-file="'api_node.yaml'">[下载]</download-link>
        </b-status-card-item>
        <b-status-card-item label="配置内容" span="full">
            <source-code-box id="rpc-code" type="text/yaml">rpc.endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
            <p class="comment">每个节点的配置文件内容均不相同，不能混用。</p>
        </b-status-card-item>
        <b-status-card-item label="安装目录" span="full">
            <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>
        </b-status-card-item>
        <b-status-card-item v-if="exeRoot.length > 0" label="最近运行目录" span="full">
            {{exeRoot}}
        </b-status-card-item>
    </b-status-card>

    <!-- <table class="ui table definition selectable">
        <tr>
            <td class="title">配置文件</td>
            <td>
                configs/api_node.yaml  &nbsp; <download-link :v-element="'rpc-code'" :v-file="'api_node.yaml'">[下载]</download-link >
            </td>
        </tr>
        <tr>
            <td class="title">配置内容<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">每个节点的配置文件内容均不相同，不能混用。</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>
                </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>