{% template "common/header" . %}

<div class="ui grid">
    {% template "install/menu" . %}
    <div class="ten wide column">
        <form class="ui form">
            <div class="ui blue center aligned segment">
                <p>数据库配置</p>
            </div>
            <br>
            <div class="three fields">
                <div class="field">
                    <label>数据库(目前只支持MySQL)</label>
                    <div class="ui dropdown selection">
                        <input type="hidden" name="db_type" value="mysql">
                        <div class="default text">MySQL</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item active" data-value="mysql">MySQL</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>主机名</label>
                    <input type="text"  name="db_host" value="127.0.0.1">
                </div>
                <div class="field">
                    <label>端口</label>
                    <input type="text"  name="db_port" value="3306">
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>用户名</label>
                    <input type="text" name="db_username">
                </div>
                <div class="field">
                    <label>密码</label>
                    <input type="password"  name="db_password">
                </div>
            </div>
            <div class="three fields">
                    <div class="field">
                        <label>数据库名称</label>
                        <input type="text" name="db_name">
                    </div>
                    <div class="field">
                        <label>表前缀</label>
                        <input type="text" name="db_table_prefix" value="cron_">
                    </div>
            </div>
            <div class="ui divider"></div>
            <div class="ui blue center aligned segment">
                <p>管理员账号配置</p>
            </div>
            <br>
            <div class="three fields">
                <div class="field">
                    <label>管理员账号</label>
                    <input type="text"   name="admin_username">
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>管理员密码</label>
                    <input type="password"   name="admin_password">
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>确认管理员密码</label>
                    <input type="password"   name="confirm_admin_password">
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>管理员邮箱</label>
                    <input type="text" name="admin_email">
                </div>
            </div>
            <div class="ui blue submit button">保存</div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 表单验证规则
    $('.ui.form').form(
            {
                onSuccess: function(event, fields) {
                    util.post('/install/store', fields, function(code, message) {
                        swal('安装成功');
                        setTimeout(function() {
                            location.href = "/";
                        }, 2000)
                    });
                    return false;
                },
                fields: {
                    dbHost: {
                        identifier  : 'db_host',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机名'
                            }
                        ]
                    },
                    dbPort: {
                        identifier  : 'db_port',
                        rules: [
                            {
                                type   : 'integer',
                                prompt : '请输入主机名'
                            }
                        ]
                    },
                    dbUsername: {
                        identifier  : 'db_username',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入数据库账号用户名'
                            }
                        ]
                    },
                    dbPassword: {
                        identifier  : 'db_password',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入数据库账号密码'
                            }
                        ]
                    },
                    dbName: {
                        identifier  : 'db_name',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入数据库名称'
                            }
                        ]
                    },
                    adminUsername: {
                        identifier  : 'admin_username',
                        rules: [
                            {
                                type   : 'minLength[3]',
                                prompt : '管理员账号长度不能少于3位'
                            }
                        ]
                    },
                    adminPassword: {
                        identifier  : 'admin_password',
                        rules: [
                            {
                                type   : 'minLength[6]',
                                prompt : '管理员密码长度不能少于6位'
                            }
                        ]
                    },
                    confirmAdminPassword: {
                        identifier  : 'confirm_admin_password',
                        rules: [
                            {
                                type   : 'match[admin_password]',
                                prompt : '两次输入密码不匹配'
                            }
                        ]
                    },
                    adminEmail: {
                        identifier  : 'admin_email',
                        rules: [
                            {
                                type   : 'email',
                                prompt : '邮箱格式错误'
                            }
                        ]
                    }
                },
                inline : true
            });

</script>

{% template "common/footer" . %}