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

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

    <div class="config-section" style="margin-top: 1em;">
        <div class="section-title">{{t('node_install@配置文件')}}</div>

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

        <div class="config-item">
            <div class="item-label">{{t('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('node_install@每个节点的配置文件内容均不相同不能混用')}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_install@安装目录')}}</div>
            <div class="item-content">
                <div v-if="node.installDir.length == 0">{{t('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>
</div>

<!-- 未安装 -->
<div v-if="!node.isInstalled">
    <!-- 方法1：通过SSH自动安装 -->
    <div class="config-section">
         <div class="section-title">{{t('node_install@方法1通过SSH自动安装')}}</div>

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

        <div style="padding: 1rem;">
            <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
                 class="ui segment installing-box" style="margin-bottom: 1rem;">
                <div v-if="installStatus.isRunning" class="blue">{{t('node_install@安装中')}}...</div>
                <div v-if="installStatus.isFinished">
                    <span v-if="installStatus.isOk" class="green">{{t('node_install@已安装成功')}}</span>
                    <span v-if="!installStatus.isOk" class="red">{{t('node_install@安装过程中发生错误Value', [installStatus.error])}}</span>
                </div>
            </div>
            <div v-if="installStatus != null && installStatus.isFinished">
                <button class="ui button small" type="button" @click.prevent="install()">{{t('node_install@重新安装按钮')}}</button>
            </div>
            <div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
                <button class="ui button small primary" type="button" @click.prevent="install()">{{t('node_install@开始安装')}}</button>
            </div>
        </div>
    </div>

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

         <div class="config-item">
             <div class="item-label">{{t('node_install@配置文件')}}</div>
             <div class="item-content">
                 configs/api_dns.yaml &nbsp;
                 <download-link :v-element="'rpc-code2'" :v-file="'api_dns.yaml'">[{{t('node_install@下载')}}]</download-link> <!-- Note: Changed id to rpc-code2 -->
             </div>
         </div>

         <div class="config-item">
             <div class="item-label">{{t('node_install@配置内容')}}</div>
             <div class="item-content">
                 <source-code-box id="rpc-code2" type="text/yaml">rpc.endpoints: [ {{apiEndpoints}} ]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
             </div>
         </div>

         <div class="config-item">
             <div class="item-label">{{t('node_install@安装目录')}}</div>
             <div class="item-content">
                 <div v-if="node.installDir.length == 0">{{t('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>

    <div style="margin-top: 1em;">
        <a-button href="" @click.prevent="updateNodeIsInstalled(true)">{{t('node_install@修改为已安装状态')}}</a-button>
    </div>
</div>