{$layout}
{$template "/clusters/cluster/menu"}
{$template "/left_menu_with_menu"}


<div class="left-right-box-container">
    {$template "/code_editor"}

    <div class="right-box">
        <b-steps :steps="[
            {label: t('clusters_cluster_createNode@填写节点信息'), key: 'info'},
            {label: t('clusters_cluster_createNode@安装节点'), key: 'install'},
            {label: t('clusters_cluster_createNode@完成'), key: 'finish'}
        ]" :current="step"></b-steps>

        <!-- 填写信息 -->
        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success" v-show="step == 'info'">
            <input type="hidden" name="clusterId" :value="clusterId"/>

            <p class="common" v-if="quota.maxNodes > 0 && quota.leftNodes >= 0">{{t('clusters_cluster_createNode@当前授权最多节点数', [quota.maxNodes, quota.leftNodes])}}</p>

            <table class="ui table definition selectable">
                <tr>
                    <td class="title">{{t('clusters_cluster_createNode@节点名称')}}</td>
                    <td>
                        <input type="text" name="name" maxlength="50" ref="focus" v-model="name" @input="changeName"/>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@IP地址')}}</td>
                    <td>
                        <node-ip-addresses-box></node-ip-addresses-box>
                        <p class="comment">{{t('clusters_cluster_createNode@用于访问节点和域名解析等')}}<span v-if="defaultIP.length > 0"><strong>{{t('clusters_cluster_createNode@如果没有填写默认为', [defaultIP])}}</strong></span>。</p>
                    </td>
                </tr>
                <tr v-if="dnsRoutes.length > 0">
                    <td>{{t('clusters_cluster_createNode@DNS线路')}}</td>
                    <td>
                        <input type="hidden" name="dnsDomainId" :value="dnsDomainId"/>
                        <dns-route-selector :v-all-routes="dnsRoutes"></dns-route-selector>
                        <p class="comment">{{t('clusters_cluster_createNode@当前节点对应的DNS线路')}}</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@所属分组')}}</td>
                    <td>
                        <node-group-selector :v-cluster-id="clusterId"></node-group-selector>
                        <p class="comment">{{t('clusters_cluster_createNode@用来筛选节点')}}<span v-if="teaIsPlus">{{t('clusters_cluster_createNode@同时可以在分组中设置二级缓存节点')}}</span>。</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@所属区域')}}</td>
                    <td>
                        <node-region-selector></node-region-selector>
                        <p class="comment">{{t('clusters_cluster_createNode@设置区域后可以根据区域进行流量统计和计费')}}</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@所属从集群')}}</td>
                    <td>
                        <div>
                            <div>
                                <input type="hidden" name="secondaryClusterIds" :value="JSON.stringify(secondaryClusterIds)"/>
                                <table class="ui table">
                                    <tr>
                                        <td>
                                            <div v-if="secondaryClusters.length > 0">
                                                <div class="ui label basic small" v-for="(cluster, index) in secondaryClusters"><span class="grey">{{cluster.name}}</span> &nbsp; <a href="" :title="t('clusters_cluster_createNode@删除')" @click.prevent="removeSecondary(index)"><i class="pi pi-times"></i></a> </div>
                                            </div>
                                            <div style="margin-top: 0.6em">
                                                <b-add-button @click="addSecondary"></b-add-button>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <more-options-indicator></more-options-indicator>
                    </td>
                </tr>
                <tbody v-show="moreOptionsVisible">
                <tr>
                    <td>{{t('clusters_cluster_createNode@SSH主机地址')}}</td>
                    <td>
                        <input type="text" name="sshHost" maxlength="64"/>
                        <p class="comment">{{t('clusters_cluster_createNode@比如SSH主机地址')}}</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@SSH主机端口')}}</td>
                    <td>
                        <input type="text" name="sshPort" maxlength="5"/>
                        <p class="comment">{{t('clusters_cluster_createNode@常见的比如22')}}</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@SSH登录认证')}}</td>
                    <td>
                        <grant-selector :v-node-cluster-id="clusterId"></grant-selector>
                    </td>
                </tr>
                <tr>
                    <td>{{t('clusters_cluster_createNode@初始化脚本代码')}}</td>
                    <td>
                        <node-init-script-selector :v-script-id="scriptId"></node-init-script-selector>
                    </td>
                </tr>
                </tbody>
            </table>
            <submit-btn>{{t('clusters_cluster_createNode@下一步')}}</submit-btn>
        </form>

        <!-- 安装节点 -->
        <div v-if="step == 'install'">
            <div class="ui tabular menu">
                <a href="" class="item" :class="{active: installMethod == 'remote'}" @click.prevent="switchInstallMethod('remote')">{{t('clusters_cluster_createNode@远程安装')}}</a>
                <a href="" class="item" :class="{active: installMethod == 'manual'}" @click.prevent="switchInstallMethod('manual')">{{t('clusters_cluster_createNode@手动安装')}}</a>
            </div>

            <!-- 远程安装 -->
            <div v-if="installMethod == 'remote'">
                <form class="ui form">
                    <table class="ui table definition selectable">
                        <tr>
                            <td class="title">{{t('clusters_cluster_createNode@SSH主机地址*')}}</td>
                            <td>
                                <input type="text" name="sshHost2" maxlength="64" v-model="sshHost" ref="installSSHHostRef" style="width: 16em" @change="changeSSHHost"/>
                                <div v-if="node.addresses != null && node.addresses.length > 1" style="margin-top: 1em">
                                    <a href="" class="ui label small basic" v-for="addr in node.addresses" :title="t('clusters_cluster_createNode@点击使用')" @click.prevent="selectSSHHost(addr)">{{addr}}</a>
                                </div>
                                <p class="comment">{{t('clusters_cluster_createNode@比如SSH主机地址2')}}</p>
                            </td>
                        </tr>
                        <tr>
                            <td>{{t('clusters_cluster_createNode@SSH主机端口*')}}</td>
                            <td>
                                <input type="text" name="sshPort2" maxlength="5" v-model="sshPort" style="width:5em"/>
                                <p class="comment"><node-login-suggest-ports ref="nodeLoginSuggestPortsRef" @select="selectLoginPort" @auto-select="autoSelectLoginPort"></node-login-suggest-ports></p>
                            </td>
                        </tr>
                        <tr>
                            <td>{{t('clusters_cluster_createNode@SSH登录认证*')}}</td>
                            <td>
                                <grant-selector :v-grant="node.grant" :v-node-cluster-id="clusterId" @change="changeGrant"></grant-selector>
                            </td>
                        </tr>
                        <tr>
                            <td>{{t('clusters_cluster_createNode@初始化脚本代码')}}</td>
                            <td>
                                <node-init-script-selector :v-script="node.script" :v-script-id="scriptId" @change="changeScript"></node-init-script-selector>
                            </td>
                        </tr>
                    </table>


                    <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
                        class="ui segment installing-box">
                        <div v-if="installStatus.isRunning" class="blue">{{t('clusters_cluster_createNode@安装中')}}</div>
                        <div v-if="installStatus.isFinished">
                            <span v-if="installStatus.isOk" class="green">{{t('clusters_cluster_createNode@已安装成功')}}</span>
                            <span v-if="!installStatus.isOk" class="red">{{t('clusters_cluster_createNode@安装过程中发生错误', [installStatus.error])}}</span>
                        </div>
                    </div>

                    <button class="ui primary button" type="button" @click.prevent="install" v-if="!isInstalling">{{t('clusters_cluster_createNode@远程安装')}}</button>
                    <button class="ui button disabled" v-if="isInstalling">{{t('clusters_cluster_createNode@正在安装')}}</button>
                    <a href="" @click.prevent="finish" v-if="!isInstalling" style="margin-left: 1em; float: right">{{t('clusters_cluster_createNode@跳过安装')}}</a>
                </form>
            </div>

            <!-- 手动安装 -->
            <div v-if="installMethod == 'manual'">
                <div class="row">{{t('clusters_cluster_createNode@上传边缘节点程序到服务器并解压')}}<code-label>configs/api_node.template.yaml</code-label>{{t('clusters_cluster_createNode@为')}}<code-label>configs/api_node.yaml</code-label>{{t('clusters_cluster_createNode@修改文件里面的内容为以下内容')}}</div>
                <div class="margin"></div>
                <source-code-box id="rpc-code" type="text/yaml">rpc.endpoints: [{{apiEndpoints}}]
nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</source-code-box>
                <div class="margin"></div>
                <div class="row">{{t('clusters_cluster_createNode@然后再使用')}}<code-label>bin/cdn1-node start</code-label>{{t('clusters_cluster_createNode@命令启动节点')}}</div>
                <div class="margin"></div>

                <div v-if="installerFiles != null && installerFiles.length > 0">
                    <b-settings-header>{{t('clusters_cluster_createNode@边缘节点安装文件下载')}}</b-settings-header>
                    <!-- <h4>边缘节点安装文件下载</h4> -->
                    <table class="ui table celled">
                        <thead class="full-width">
                        <tr>
                            <th>{{t('clusters_cluster_createNode@文件名')}}</th>
                            <th>{{t('clusters_cluster_createNode@操作系统')}}</th>
                            <th>{{t('clusters_cluster_createNode@CPU架构')}}</th>
                            <th>{{t('clusters_cluster_createNode@版本')}}</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>
                </div>

                <div>
                    <div class="ui divider"></div>
                    <a href="" @click.prevent="finish">{{t('clusters_cluster_createNode@安装完成')}}</a>
                    <a href="" @click.prevent="finish" style="float: right">{{t('clusters_cluster_createNode@跳过安装')}}</a>
                </div>
            </div>
        </div>

        <!-- 完成 -->
        <div v-show="step == 'finish'">
            <div>
                <div style="text-align: center; font-size: 1.4em; margin-top: 2.4em" v-if="isInstalled"><span class="green">{{t('clusters_cluster_createNode@节点已被创建并安装成功', node)}}</span></div>
                <div style="text-align: center; font-size: 1.4em; margin-top: 2.4em" v-if="!isInstalled"><span class="green">{{t('clusters_cluster_createNode@节点已创建成功', node)}}</span></div>
                <div style="text-align: center; margin-top: 3em">
                    <a :href="'/clusters/cluster/node?nodeId=' + nodeId + '&clusterId=' + clusterId" class="ui button primary" type="button">{{t('clusters_cluster_createNode@现在进入节点详情')}}<i class="ui icon long arrow alternate right"></i></a>
                </div>
                <div style="text-align: center; margin-top: 1em">
                    <a href="" @click.prevent="createNext">{{t('clusters_cluster_createNode@继续创建下一个节点')}}</a>
                </div>
            </div>
        </div>
    </div>
</div>