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

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

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

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

    <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> -->
    <table class="ui table definition selectable">
        <tr>
            <td class="title">配置文件</td>
            <td>
                configs/api_dns.yaml &nbsp;
                <download-link :v-element="'rpc-code'" :v-file="'api_dns.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>
            </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>
    </table>

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