{$layout}

<div class="margin"></div>

<b-steps :steps="[
    {label: t('settings_transfer_index@开始'), key: STEP_PREPARE},
    {label: t('settings_transfer_index@迁移数据库'), key: STEP_DATABASE},
    {label: t('settings_transfer_index@迁移API节点'), key: STEP_API},
    {label: t('settings_transfer_index@变更地址'), key: STEP_ADDRESS},
    {label: t('settings_transfer_index@迁移管理平台'), key: STEP_ADMIN},
    {label: t('settings_transfer_index@升级节点配置'), key: STEP_UPGRADE},
    {label: t('settings_transfer_index@完成'), key: STEP_FINISH},
]" :current="step"></b-steps>

<!-- <div class="ui steps fluid small">
    <div class="ui step" :class="{active: step == STEP_PREPARE}">
        <div class="content">开始</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_DATABASE}">
        <div class="content">迁移数据库</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_API}">
        <div class="content">迁移API节点</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_ADDRESS}">
        <div class="content">变更地址</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_ADMIN}">
        <div class="content">迁移管理平台</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_UPGRADE}">
        <div class="content">升级节点配置</div>
    </div>
    <div class="ui step" :class="{active: step == STEP_FINISH}">
        <div class="content">完成</div>
    </div>
</div> -->

<!-- 准备工作 -->
<div class="step-box" v-if="step == STEP_PREPARE">
    <div class="content">
        <p>{{t('settings_transfer_index@通过此引导程序可以帮助你将当前平台配置迁移到新的平台中。')}}</p>
        <p>{{t('settings_transfer_index@每个步骤请小心操作，一旦配置错误可能需要手工还原。')}}</p>
    </div>

    <div class="ui button-group">
        <button class="ui button primary next" @click.prevent="doPrepare()">{{t('settings_transfer_index@下一步')}}</button>
    </div>
</div>

<!-- 数据库 -->
<div class="step-box" v-if="step == STEP_DATABASE">
    <form class="ui form">
        <table class="ui table selectable definition">
            <tr>
                <td class="title">{{t('settings_transfer_index@数据库地址是否改变？')}}</td>
                <td>
                   <div class="ui fields inline">
                       <div class="ui field">
                           <div class="ui radio checkbox">
                               <radio name="databaseChanged" :v-value="0" v-model="databaseChanged" id="database-changed-0">{{t('settings_transfer_index@没有变')}}</radio>
                           </div>
                       </div>
                       <div class="ui field">
                           <div class="ui radio checkbox">
                                <radio name="databaseChanged" :v-value="1" v-model="databaseChanged" id="database-changed-1">{{t('settings_transfer_index@变了')}}</radio>
                           </div>
                       </div>
                   </div>
                </td>
            </tr>
            <tr v-if="databaseChanged == 1">
                <td>{{t('settings_transfer_index@数据是否已经导入到新的数据库？')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="databaseTransferred" :v-value="0" v-model="databaseTransferred" id="database-transferred-0">{{t('settings_transfer_index@没有导入')}}</radio>
                            </div>
                        </div>
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="databaseTransferred" :v-value="1" v-model="databaseTransferred" id="database-transferred-1">{{t('settings_transfer_index@已经导入')}}</radio>
                            </div>
                        </div>
                    </div>
                    <p class="comment" v-if="databaseTransferred == 0"><span class="red">{{t('settings_transfer_index@请自行将当前数据库中数据导入到新的数据库中。')}}</span></p>
                </td>
            </tr>
        </table>
    </form>
    <div class="ui button-group">
        <button class="ui button prev" @click.prevent="doBack(STEP_PREPARE)">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button primary next" @click.prevent="doDatabase()">{{t('settings_transfer_index@下一步')}}</button>
    </div>
</div>

<!-- 检查API节点 -->
<div class="step-box" v-if="step == STEP_API">
    <form class="ui form">
        <table class="ui table selectable definition">
            <tr>
                <td class="title">{{t('settings_transfer_index@API节点地址是否变更？')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="apiNodeChanged" :v-value="1" v-model="apiNodeChanged" id="api-node-changed-1">{{t('settings_transfer_index@已经变更')}}</radio>
                            </div>
                        </div>
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="apiNodeChanged" :v-value="0" v-model="apiNodeChanged" id="api-node-changed-0">{{t('settings_transfer_index@没有变更')}}</radio>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tbody v-show="apiNodeChanged == 1">
                <tr>
                    <td>{{t('settings_transfer_index@是否已安装新的API节点')}}</td>
                    <td>
                        <div class="ui fields inline">
                            <div class="ui field">
                                <div class="ui radio checkbox">
                                    <radio name="apiNodeInstalled" :v-value="1" v-model="apiNodeInstalled" id="api-node-installed-1">{{t('settings_transfer_index@已经安装')}}</radio>
                                </div>
                            </div>
                            <div class="ui field">
                                <div class="ui radio checkbox">
                                    <radio name="apiNodeInstalled" :v-value="0" v-model="apiNodeInstalled" id="api-node-installed-0">{{t('settings_transfer_index@没有安装')}}</radio>
                                </div>
                            </div>
                        </div>
                        <p class="comment" v-if="apiNodeInstalled == 0"><span class="red">{{t('settings_transfer_index@请先安装新的API节点，请拷贝当前的API节点配置configs/api.yaml和configs/db.yaml到新API节点对应的位置，并记得修改其中的configs/db.yaml中的数据库地址、用户名、密码。')}}</span></p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('settings_transfer_index@新的API节点IP或域名')}} *</td>
                    <td>
                        <input type="text" name="newAPINodeHost" :placeholder="t('settings_transfer_index@IP或域名')" v-model="apiNodeHost" style="width: 14em" maxlength="100"/>
                        <p class="comment">{{t('settings_transfer_index@如果有多个IP或者域名，填写任意其中一个即可。')}}</p>
                    </td>
                </tr>
                <tr>
                    <td>{{t('settings_transfer_index@新的API节点端口')}} *</td>
                    <td>
                        <input type="text" name="newAPINodePort" v-model="apiNodePort" style="width: 5em" maxlength="5" :placeholder="t('settings_transfer_index@端口')"/>
                    </td>
                </tr>
                <tr>
                    <td>{{t('settings_transfer_index@新的API节点协议')}}</td>
                    <td>
                        <b-select
                            v-model="apiNodeProtocol"
                            auto-width
                            :options="[
                                {label: 'HTTP', value: 'http'},
                                {label: 'HTTPS', value: 'https'},
                            ]"
                        ></b-select>
                        
                        <!-- <select class="ui dropdown auto-width" v-model="apiNodeProtocol">
                            <option value="http">HTTP</option>
                            <option value="https">HTTPS</option>
                        </select> -->
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

    <div class="button-group">
        <button class="ui button prev" @click.prevent="doBack(STEP_DATABASE)">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button primary next" @click.prevent="doAPI()">{{t('settings_transfer_index@下一步')}}</button>
    </div>
</div>

<!-- 地址 -->
<div class="step-box" v-show="step == STEP_ADDRESS">
    <form method="post" class="ui form" data-tea-action=".updateHosts" data-tea-success="doAddress">
        <input type="hidden" name="host" :value="apiNodeHost"/>
        <input type="hidden" name="port" :value="apiNodePort"/>
        <input type="hidden" name="protocol" :value="apiNodeProtocol"/>
        <table class="ui table selectable celled">
            <thead>
            <tr>
                <th>{{t('settings_transfer_index@API节点原地址')}}</th>
                <th>{{t('settings_transfer_index@API节点新地址（留空表示不修改）')}}</th>
            </tr>
            </thead>
            <tr v-for="host in apiAddressHosts">
                <td>{{host}}</td>
                <td>
                    <input type="text" maxlength="100" name="newHosts"/>
                    <input type="hidden" name="oldHosts" :value="host"/>
                </td>
            </tr>
        </table>


        <div class="button-group">
            <button class="ui button prev" @click.prevent="doBack(STEP_API)">{{t('settings_transfer_index@上一步')}}</button>
            <button type="submit" class="ui button primary next">{{t('settings_transfer_index@下一步')}}</button>
        </div>
    </form>
</div>

<!-- admin -->
<div class="step-box" v-if="step == STEP_ADMIN">
    <form class="ui form">
        <table class="ui table selectable definition">
            <tr>
                <td class="title">{{t('settings_transfer_index@管理平台地址是否变更？')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="adminNodeChanged" :v-value="1" v-model="adminNodeChanged" id="admin-node-changed-1">{{t('settings_transfer_index@已经变更')}}</radio>
                            </div>
                        </div>
                        <div class="ui field">
                            <div class="ui radio checkbox">
                                <radio name="adminNodeChanged" :v-value="0" v-model="adminNodeChanged" id="admin-node-changed-0">{{t('settings_transfer_index@没有变更')}}</radio>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tbody v-show="adminNodeChanged == 1">
                <tr>
                    <td>{{t('settings_transfer_index@是否已安装新的管理平台')}}</td>
                    <td>
                        <div class="ui fields inline">
                            <div class="ui field">
                                <div class="ui radio checkbox">
                                    <radio name="adminNodeInstalled" :v-value="1" v-model="adminNodeInstalled" id="admin-node-installed-1">{{t('settings_transfer_index@已经安装')}}</radio>
                                </div>
                            </div>
                            <div class="ui field">
                                <div class="ui radio checkbox">
                                    <radio name="adminNodeInstalled" :v-value="0" v-model="adminNodeInstalled" id="admin-node-installed-0">{{t('settings_transfer_index@没有安装')}}</radio>
                                </div>
                            </div>
                        </div>
                        <p class="comment" v-if="adminNodeInstalled == 0"><span class="red">{{t('settings_transfer_index@请先安装新的管理平台，请拷贝当前的管理平台下的configs/目录下的配置到新管理平台对应的位置。')}}</span></p>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

    <div class="ui button-group">
        <button class="ui button prev" @click.prevent="doBack(STEP_API)" v-if="apiNodeChanged == 0">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button prev" @click.prevent="doBack(STEP_ADDRESS)" v-if="apiNodeChanged == 1">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button primary next" @click.prevent="doAdmin()">{{t('settings_transfer_index@下一步')}}</button>
    </div>
</div>

<!-- 升级节点配置 -->
<div class="step-box" v-if="step == STEP_UPGRADE">
    <form class="ui form">
        <table class="ui table selectable definition">
            <tr>
                <td class="title">{{t('settings_transfer_index@升级节点API地址配置')}}</td>
                <td>
                    <span>{{apiNodeProtocol}}://<span v-if="apiNodeHost.indexOf(':')>0">[{{apiNodeHost}}]</span><span v-else>{{apiNodeHost}}</span>:{{apiNodePort}}</span>
                </td>
            </tr>
            <tr>
                <td>{{t('settings_transfer_index@当前平台节点数')}}</td>
                <td>
                    <span v-if="isUpgrading">{{countNodes}}</span>
                    <span v-else>-</span>
                </td>
            </tr>
            <tr>
                <td>{{t('settings_transfer_index@新平台节点数')}}</td>
                <td>
                    <span v-if="isUpgrading">{{countFinishedNodes}}</span>
                    <span v-else>-</span>
                </td>
            </tr>
            <tr>
                <td>{{t('settings_transfer_index@完成比例')}}</td>
                <td>
                    <span v-if="isUpgrading">{{percentNodes}}%</span>
                    <span v-else>-</span>
                </td>
            </tr>
        </table>
    </form>
    <div class="ui button-group">
        <button class="ui button prev" @click.prevent="doBack(STEP_ADMIN)">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button primary next" @click.prevent="doStartUpgrade()" v-if="!isUpgrading">{{t('settings_transfer_index@开始升级')}}</button>
        <button class="ui button next" :class="{disabled: percentNodes<100}" v-if="isUpgrading && percentNodes < 100">{{t('settings_transfer_index@等待完成')}}</button>
        <button class="ui button primary next" @click.prevent="doUpgrade()" v-if="isUpgrading && percentNodes == 100">{{t('settings_transfer_index@下一步')}}</button>
    </div>
</div>

<!-- 完成 -->
<div class="step-box" v-if="step == STEP_FINISH">
    <div class="content">
        <p v-if="adminNodeChanged == 1">{{t('settings_transfer_index@所有迁移任务已完成，请登录新的管理平台进行管理。')}}</p>
        <p v-if="adminNodeChanged == 0">{{t('settings_transfer_index@所有迁移任务已完成。')}}</p>
    </div>
    <div class="ui button-group">
        <button class="ui button prev" @click.prevent="doBack(STEP_UPGRADE)">{{t('settings_transfer_index@上一步')}}</button>
        <button class="ui button primary next" @click.prevent="doFinish()">{{t('settings_transfer_index@完成')}}</button>
    </div>
</div>