<!DOCTYPE html>
<html lang="zh" class="light">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="shortcut icon" href="/images/favicon.png"/>
	<title>安装GoEdge管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	{$TEA.VUE}
	{$TEA.SEMANTIC}
	<script type="text/javascript" src="/js/md5.min.js"></script>
	<script type="text/javascript" src="/js/utils.min.js"></script>
	<script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js"></script>
	<script type="text/javascript" src="/js/components.js"></script>
	<link rel="stylesheet" href="/_/@default/@layout.css"/>
	<link rel="stylesheet" href="/_/@default/ui_override.css" />
</head>

<body style="overflow: auto;" class="theme10">

<div class="install-box">
	<!-- 步骤列表 -->
	<b-steps :steps="[
		{label: '介绍', key: STEP_INTRO},
		{label: '设置API节点', key: STEP_API},
		{label: '设置MySQL数据库', key: STEP_DB},
		{label: '设置管理员账号', key: STEP_ADMIN},
		{label: '完成安装', key: STEP_FINISH},
	]" :current="step"></b-steps>
	<!-- <div class="ui steps fluid small">
		<div class="ui step" :class="{active: step == STEP_INTRO}">
			<div class="content">
				<div :class="{title: step == STEP_INTRO}">1. 介绍</div>
			</div>
		</div>
		<div class="ui step" :class="{active: step == STEP_API}">
			<div class="content">
				<div :class="{title: step == STEP_API}">2. 设置API节点</div>
			</div>
		</div>
		<div class="ui step" :class="{active: step == STEP_DB}">
			<div class="content">
				<div :class="{title: step == STEP_DB}">3. 设置MySQL数据库</div>
			</div>
		</div>
		<div class="ui step" :class="{active: step == STEP_ADMIN}">
			<div class="content">
				<div :class="{title: step == STEP_ADMIN}">4. 设置管理员账号</div>
			</div>
		</div>
		<div class="ui step" :class="{active: step == STEP_FINISH}">
			<div class="content">
				<div :class="{title: step == STEP_FINISH}">5. 完成安装</div>
			</div>
		</div>
	</div> -->

	<!-- 介绍 -->
	<div class="step-container step-1" v-show="step == STEP_INTRO">
		<div><strong>感谢你选择使用GoEdge CDN系统，下面让我们一起开始配置系统。</strong></div>
		<div class="margin"><strong>在这之前如果你还没有可用的MySQL数据库（支持MySQL 5.7.8/8.0/8.1/TiDB 3.0及以上版本），请先安装MySQL数据库再进行。</strong></div>
		<div class="margin grey">免责声明：GoEdge软件开发者并不对您的软件使用方法、服务对象、服务内容负道德或法律上的约束责任，在使用本软件时产生的一切法律风险自负。</div>
		<div class="margin grey">用户协议：请在遵守中华人民共和国政策、法律、法规的前提下使用本软件；自愿承担因不当使用本软件产生的一切法律后果；承认GoEdge开发者拥有本软件的所有著作权；点击"开始"安装表示你同意此用户协议。</div>
		
		
		<button class="ui button primary" style="margin-top: 4em" type="button" @click.prevent="goIntroNext()">
			开始
			<i class="icon long arrow right"></i>
		</button>
	</div>

	<!-- 设置API节点 -->
	<div class="step-container step-2" v-show="step == STEP_API">
		<div class="ui message"><strong>API节点</strong>是管理系统和数据库之间通讯的桥梁，新安装时可以先使用自动启动的API节点，等系统变得庞大时再扩展新的API节点。</div>
		<form method="post" class="ui form" data-tea-action=".validateApi" data-tea-success="apiSuccess" data-tea-before="apiSubmit" data-tea-done="apiDone">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">API节点类型</td>
					<td>
						<div class="ui radio checkbox">
							<input type="radio" name="mode" value="new" id="auto-start-api-node" v-model="apiNodeMode"/>
							<label for="auto-start-api-node">自动启动新API节点</label>
						</div>
						<div class="ui radio checkbox">
							<input type="radio" name="mode" value="old" id="use-old-api-node" v-model="apiNodeMode"/>
							<label for="use-old-api-node">使用已安装节点</label>
						</div>
					</td>
				</tr>

				<tbody v-show="apiNodeMode == 'new'">
					<tr>
						<td>节点端口 *</td>
						<td>
							<input type="text" name="newPort" style="width:6em" maxlength="5" v-model="newAPINodePort"/>
							<p class="comment">选一个在1024-65535之间并且没有正在使用的端口作为要启动的节点端口。如果你的服务器上有防火墙或者其他安全策略，请记得设置这个端口为通过。<strong>如果你是一名Linux新手，请不要轻易修改此端口。</strong></p>
						</td>
					</tr>
					<tr>
						<td>节点主机地址 *</td>
						<td>
							<div class="ui fields inline">
								<div class="ui field">
                                    <input type="text" name="newHost" value="" ref="newHostRef" placeholder="x.x.x.x" v-model="currentHost"/>
								</div>
							</div>
							<p class="comment">API节点IP地址或者域名。其他节点访问此API节点的主机地址，可以是IP或者域名，第一次安装时通常是<strong>当前服务器</strong>的公网IP地址。后期可以修改这个地址。</p>
						</td>
					</tr>
				</tbody>

				<tbody v-show="apiNodeMode == 'old'">
					<tr>
						<td>节点协议 *</td>
						<td>
							<b-select
								name="oldProtocol"
								v-model="oldProtocol"
								auto-width
								:options="[
									{label: 'HTTP', value: 'http'},
									{label: 'HTTPS', value: 'https'},
								]"
							></b-select>

							<!-- <select class="ui dropdown auto-width" name="oldProtocol">
								<option value="http">HTTP</option>
								<option value="https">HTTPS</option>
							</select> -->
							<p class="comment">API节点使用的协议。</p>
						</td>
					</tr>
					<tr>
						<td>主机地址 *</td>
						<td>
							<input type="text" name="oldHost" maxlength="100" style="width:20em"/>
							<p class="comment">API节点所在主机地址。</p>
						</td>
					</tr>
					<tr>
						<td>服务端口 *</td>
						<td>
							<input type="text" name="oldPort" style="width:6em" maxlength="5"/>
							<p class="comment">API节点启动的端口。</p>
						</td>
					</tr>
					<tr>
						<td>节点nodeId *</td>
						<td>
							<input type="text" name="oldNodeId" maxlength="100"/>
							<p class="comment">在节点的配置文件中<code-label>configs/api.yaml</code-label>中获取，不需要带双引号。</p>
						</td>
					</tr>
					<tr>
						<td>节点secret *</td>
						<td>
							<input type="password" name="oldNodeSecret" maxlength="100"/>
							<p class="comment">在节点的配置文件中<code-label>configs/api.yaml</code-label>中获取，不需要带双引号。</p>
						</td>
					</tr>
				</tbody>
			</table>
			<button class="ui button" type="button" @click.prevent="goBackIntro"><i class="icon long arrow left"></i>上一步</button> &nbsp;
			<button class="ui button primary" type="submit" v-if="!apiRequesting">下一步<i class="icon long arrow right"></i></button>
			<button class="ui button primary" type="button" v-if="apiRequesting">提交中</button>
		</form>
	</div>

	<!-- 设置数据库 -->
	<div class="step-container step-3" v-show="step == STEP_DB">
		<div v-show="apiNodeMode == 'new'">
			<form method="post" class="ui form" data-tea-action=".validateDb" data-tea-success="dbSuccess" data-tea-before="dbSubmit" data-tea-done="dbDone">
				<table class="ui table definition selectable">
					<tr>
						<td class="title">MySQL主机地址 *</td>
						<td>
							<input type="text" name="host" maxlength="100" placeholder="比如 192.168.1.100" style="width:16em" ref="dbHost" v-model="localDB.host" @change="checkDBIP" @input="localDB.isLocal = true"/>
                            <p class="comment" v-if="localDBHost.length > 0 && localDBHost == localDB.host"><span class="blue">已经自动填入从当前服务器发现的MySQL数据库信息。</span></p>
                            <p class="comment" v-if="!localDB.isLocal"><span class="red">当前地址不是局域网IP，可能会严重影响系统运行性能，请优先选择局域网IP。</span></p>
                            <p class="comment" v-if="localDB.host.length == 0 && localDB.canInstall">如果你还没有安装MySQL，可以 <a href="" @click.prevent="installMySQL">尝试自动安装</a> 。</p>
						</td>
					</tr>
					<tr>
						<td>数据库连接端口 *</td>
						<td>
							<input type="text" name="port" maxlength="5" placeholder="比如 3306" style="width:7em" v-model="localDB.port"/>
                            <p class="comment">MySQL默认端口为3306。</p>
						</td>
					</tr>
					<tr>
						<td>数据库名称 *</td>
						<td>
							<input type="text" name="database" value="edges" style="width:16em"/>
							<p class="comment">请事先创建好此数据库，如果不存在，则会尝试自动创建。手动创建数据库语句<code-label>CREATE DATABASE `数据库名称` CHARSET utf8mb4;</code-label>。</p>
						</td>
					</tr>
					<tr>
						<td>连接用户名 *</td>
						<td>
							<input type="text" name="username" style="width:16em" maxlength="100" v-model="localDB.username"/>
							<p class="comment">此用户需要可以在数据库中有操作数据和创建数据表的权限。</p>
						</td>
					</tr>
					<tr>
						<td>连接密码</td>
						<td>
							<input type="password" name="password" style="width:16em" maxlength="100" v-model="localDB.password"/>
							<p class="comment">连接数据库所需密码，没有密码的话就不需要填写。</p>
						</td>
					</tr>
                    <tr>
                        <td>访问日志保留天数</td>
                        <td>
                            <div class="ui input right labeled">
                                <input type="number" name="accessLogKeepDays" style="width: 5em" maxlength="4" value="7"/>
                                <span class="ui label">天</span>
                            </div>
                            <p class="comment">网站等服务记录的访问日志保留天数，防止无限制地占用数据库空间，如果你的数据库空间比较小，请适当调小此值。</p>
                        </td>
                    </tr>
				</table>

				<button class="ui button" type="button" @click.prevent="goBackAPI"><i class="icon long arrow left"></i>上一步</button> &nbsp;
				<button class="ui button primary" v-if="!dbRequesting" type="submit">下一步<i class="icon long arrow right"></i></button>
				<button class="ui button primary" v-if="dbRequesting" type="button">提交中...</button>
			</form>
		</div>

		<div v-show="apiNodeMode == 'old'">
			<div style="margin-bottom: 2em">你选择使用了已安装节点，无需重新配置数据库。</div>
			<button class="ui button margin" type="button" @click.prevent="goBackAPI"><i class="icon long arrow left"></i>上一步</button> &nbsp;
			<button class="ui button primary margin" type="button" @click.prevent="goDBNext()">下一步<i class="icon long arrow right"></i></button>
		</div>
	</div>

	<!-- 设置管理员账号 -->
	<div class="step-container step-4" v-show="step == STEP_ADMIN">
		<form method="post" class="ui form" data-tea-action=".validateAdmin" data-tea-success="adminSuccess">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">登录用户名 *</td>
					<td>
						<input type="text" name="adminUsername" style="width:16em" maxlength="100" value="admin" tabindex="1"/>
						<p class="comment">只能是英文、数字和下划线的组合。</p>
					</td>
				</tr>
				<tr>
					<td>登录密码 *</td>
					<td>
						<input type="password" name="adminPassword" maxlength="100" style="width:16em" v-model="adminPassword" v-show="!adminPasswordVisible" tabindex="2" ref="adminPasswordInput"/>
						<input type="text" value="" v-model="adminPassword" style="width:16em" v-show="adminPasswordVisible"/>
						<p class="comment">只能是英文、数字和下划线的组合 <a href="" title="显示明文密码" @click.prevent="showAdminPassword"><i class="icon eye grey"></i></a>。</p>
					</td>
				</tr>
				<tr>
					<td>确认密码 *</td>
					<td>
						<input type="password" name="adminPassword2" maxlength="100" style="width:16em" v-model="adminPassword2" v-show="!adminPasswordVisible" tabindex="3"/>
						<input type="text" value="" v-model="adminPassword2" style="width:16em" v-show="adminPasswordVisible"/>
						<p class="comment">再次输入密码以便于确认  <a href="" title="显示明文密码" @click.prevent="showAdminPassword"><i class="icon eye grey"></i></a>。</p>
					</td>
				</tr>
			</table>

			<button class="ui button margin" type="button" @click.prevent="goBackDB"><i class="icon long arrow left"></i>上一步</button> &nbsp;
			<button class="ui button primary margin" type="submit">下一步<i class="icon long arrow right"></i></button>
		</form>
	</div>

	<!-- 完成安装 -->
	<div class="step-container step-5" v-show="step == STEP_FINISH">
		<form method="post" class="ui form" data-tea-action=".install" data-tea-success="finishSuccess" data-tea-before="finishSubmit" data-tea-done="finishDone" data-tea-timeout="1200">
			<input type="hidden" name="apiNodeJSON" :value="JSON.stringify(apiNodeInfo)"/>
			<input type="hidden" name="dbJSON" :value="JSON.stringify(dbInfo)"/>
			<input type="hidden" name="adminJSON" :value="JSON.stringify(adminInfo)"/>

			<div class="content-box">
				<b-settings-header>API节点信息</b-settings-header>
				<!-- <h3>API节点信息</h3> -->
				<table class="ui table definition selectable">
					<tr>
						<td class="title">API节点类型</td>
						<td>
							<span v-if="apiNodeInfo.mode == 'new'">自动启动新API节点</span>
							<span v-if="apiNodeInfo.mode == 'old'">使用已安装节点</span>
						</td>
					</tr>

					<tbody v-show="apiNodeInfo.mode == 'new'">
					<tr>
						<td>节点端口 *</td>
						<td>
							{{apiNodeInfo.newPort}}
						</td>
					</tr>
					<tr>
						<td>节点主机地址 *</td>
						<td>
							{{apiNodeInfo.newHost}}
						</td>
					</tr>
					</tbody>

					<tbody v-show="apiNodeInfo.mode == 'old'">
					<tr>
						<td>节点协议 *</td>
						<td>
							{{apiNodeInfo.oldProtocol}}
						</td>
					</tr>
					<tr>
						<td>主机地址 *</td>
						<td>
							{{apiNodeInfo.oldHost}}
						</td>
					</tr>
					<tr>
						<td>服务端口 *</td>
						<td>
							{{apiNodeInfo.oldPort}}
						</td>
					</tr>
					</tbody>
				</table>

				<b-settings-header v-if="apiNodeMode == 'new'">数据库信息</b-settings-header>
				<!-- <h3 v-if="apiNodeMode == 'new'">数据库信息</h3> -->
				<table class="ui table definition selectable" v-if="apiNodeMode == 'new'">
					<tr>
						<td class="title">MySQL主机地址 *</td>
						<td>
							{{dbInfo.host}}
						</td>
					</tr>
					<tr>
						<td>数据库连接端口 *</td>
						<td>
							{{dbInfo.port}}
						</td>
					</tr>
					<tr>
						<td>数据库名称 *</td>
						<td>
							{{dbInfo.database}}
						</td>
					</tr>
					<tr>
						<td>连接用户名 *</td>
						<td>
							{{dbInfo.username}}
						</td>
					</tr>
					<tr>
						<td>连接密码</td>
						<td>
							<span v-if="dbInfo.passwordMask != null && dbInfo.passwordMask.length > 0">{{dbInfo.passwordMask}}</span>
							<span v-else class="disabled">未填入密码</span>
						</td>
					</tr>
                    <tr>
                        <td>访问日志保留天数</td>
                        <td>
                            {{dbInfo.accessLogKeepDays}}天
                        </td>
                    </tr>
				</table>

				<b-settings-header>管理员信息</b-settings-header>
				<!-- <h3>管理员信息</h3> -->
				<table class="ui table definition selectable">
					<tr>
						<td class="title">登录用户名</td>
						<td>{{adminInfo.username}}</td>
					</tr>
					<tr>
						<td>登录密码</td>
						<td>{{adminInfo.passwordMask}}</td>
					</tr>
				</table>
			</div>

			<div class="button-group">
				<div class="ui divider"></div>
                <div class="status-box" v-show="statusText != null && statusText.length > 0"><span class="blue">{{statusText}}</span></div>

				<button class="ui button" type="button" @click.prevent="goBackAdmin"><i class="icon long arrow left"></i>上一步</button>
				<button class="ui button primary" type="submit" v-if="!isInstalling">确认并开始安装</button>
				<button class="ui button disabled" type="button" v-if="isInstalling">安装中...</button>
			</div>
		</form>
	</div>
</div>

</body>
</html>