<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="表单导向插件" bodyClass="white-bg" libs=["wizard","bootstrapSelect"]>
</@header>
<div class="wrapper wrapper-content ibox-content">
    <div class="form-horizontal">
        <h4 class="form-header h4">表单导向示例</h4>
        <div class="row">
            <div class="col-sm-12">
                <@f.wizard id="smartwizard" theme="arrows">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#step-1">第一步</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-2">第二步</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-3">第三步</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-4">第四步</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                            <h2>J2eeFAST 开源平台</h2>
                            <p class="pt5">
                                J2eeFAST 是一个 Java EE 企业级快速开发平台，<strong><mark>致力于打造中小企业最好用的开源免费的后台框架平台。</mark></strong>
                                系统基于（Spring Boot、Spring MVC、Apache Shiro、MyBatis-Plus、Freemarker、Bootstrap、AdminLTE）经典技术开发，
                                系统内置核心模块包含众多常用基础功能(在线代码生成功能、组织机构、角色用户、菜单及按钮授权、数据权限、系统参数、license认证、BPM工作流等)，
                                <mark><strong>让你用最低的成本、最高的效率，开发项目，她也适合新手朋友练手</strong></mark>。同时具备，<mark><strong>界面简洁美观、高效、安全、源码可控、版本迭代快、免费技术交流群</strong></mark>等特点。她适用于所有Web应用，她会成为你快速开发项目的好帮手。
                            </p>
                        </div>
                        <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                            <span style="color: red;"><strong>本项目代码全部开源，无需任何费用。如果有人向你贩卖本系统都是骗子!</strong></span>
                        </div>
                        <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                            不得将 J2eeFAST于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为,否则后果自负
                        </div>
                        <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                            J2eeFAST前身主要用于银行项目,本身很注重安全因素,可以从项目登陆可以看出。再者本身项目100%开源，但是您任需了解是软件皆有漏洞，任何人都无法保证软件100%没有漏洞。所以由本软件漏洞造成损失不予赔偿，同时也不承担任何因使用本软件而产生的相关法律责任。也请在软件上线前进行必要的安全检测，避免安全问题发生.
                        </div>
                    </div>
                </@f.wizard>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <h4 class="form-header h4">导向基本设置</h4>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label">样式设置：</label>
                    <div class="col-sm-8">
                        <@f.select name="theme" value="arrows" items=themeLists  itemLabel="value" itemValue="key"/>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label">样式设置：</label>
                    <div class="col-sm-8">
                        <@f.select name="animation" value="slide-horizontal" items=animationLists  itemLabel="value" itemValue="key"/>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label">设置跳转：</label>
                    <div class="col-sm-8">
                        <@f.select name="got_to_step" value="0" items=stepLists  itemLabel="value" itemValue="key"/>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-sm btn-primary" onclick="refresh()"><i class="fa fa-refresh"></i> <@ctx.i18n text = "重置"/></button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="prev()"><i class="fa fa-mail-reply"></i> <@ctx.i18n text = "上一步"/></button>&nbsp;
                <button type="button" class="btn btn-sm btn-warning" onclick="next()"><i class="fa fa-share"></i> <@ctx.i18n text = "下一步"/></button>&nbsp;
            </div>
        </div>
        <!--转账例子 start //-->
        <h4 class="form-header h4">转账例子</h4>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <@f.wizard id="transfer" theme="arrows"  refresh = "再转一笔">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#step-1">填写转账信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-2">核对转账信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#step-3">完成</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                            <div style="margin-top: 50px">
                                <@f.form id="form-transfer-1" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>付款账号：</label>
                                        <div class="col-sm-8">
                                            <@f.select name="outcardNO" items=cardLists  itemLabel="value" itemValue="key" required=true/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>收款账号：</label>
                                        <div class="col-sm-8">
                                            <@f.input name="incardNo" required=true/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>收款人：</label>
                                        <div class="col-sm-8">
                                            <@f.input name="name" required=true/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>金额：</label>
                                        <div class="col-sm-8">
                                            <@f.input name="money" required=true/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>密码：</label>
                                        <div class="col-sm-8">
                                            <@f.input name="pass" type="password" required=true/>
                                        </div>
                                    </div>
                                </@f.form>
                            </div>
                        </div>
                        <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                            <div style="margin-top: 50px">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>付款账号：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-plaintext" id="outcardNO2"></p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>收款账号：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-plaintext" id="incardNo2"></p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>收款人：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-plaintext" id="name2"></p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>金额：</label>
                                        <div class="col-sm-8">
                                            <p class="form-control-plaintext" id="money2"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                            <div style="margin-top: 50px">
                                    <div style="text-align: center;">
                                        <div style="font-size: 70px;font-weight: 300;color: #52C41A;">
                                            <i class="fa icon-check"></i>
                                        </div>
                                        <div style="font-size: 24px;color: #333;margin-top: 30px;">操作成功</div>
                                        <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </@f.wizard>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <!--转账例子 end //-->
    </div>
</div>
<@footer>
<script type="text/javascript">


    opt.domReady( function () {
        console.log('123');
    });

    $(function () {
        console.log('456');
    })

    //表单导向验证
    $("#form-transfer-1").validate({
        onkeyup: false,
        focusCleanup: true,
        rules:{
            money:{
                decimalsValue: "#money"
            }
        }
    });

    /**
     * 对应回调不理解可以 点击测试按钮 下一步 上一步 重置.试一试 F12 浏览器控制回打印日志看看
     * 表单导回调事件 通过此回调方法处理相应业务
     * @param id 表单导向控件ID
     * @param event 事件名称
     * @param e
     * @param anchorObject
     * @param stepNumber
     * @param stepDirection
     * @param stepPosition
     */
    function wizardCallback(id,event, e, anchorObject, stepNumber, stepDirection, stepPosition ){
        console.log("id:" + id + " event:" + event + " e:" +e + " anchorObject:" + anchorObject +
            " stepNumber:" + stepNumber + " stepDirection:" + stepDirection + " stepPosition:" + stepPosition);
        //
        if(id == 'transfer'){
            if( event == 'leaveStep' && stepPosition == 'forward'){  // 跳转下一页前处理业务
                var $step = $('#transfer').find("#step-" + (stepNumber + 1)); //获取当前对象
                if((stepNumber + 1) == 1){ //填写转账信息
                    //校验填入信息
                    if($step.find('form').length > 0){
                        if($step.find('form').validate().form()){
                            $('#outcardNO2').html($("#outcardNO").select2("data")[0].text);
                            $('#incardNo2').html($("#incardNo").val());
                            $('#name2').html($("#name").val());
                            $('#money2').html($("#money").val());
                            return true;
                        }else{
                            return false;
                        }
                    }else{
                        return false;
                    }
                }
            }

            // 重置业务处理
            if(event == 'showStep' && stepPosition == 'first' && stepDirection != 'backward'){
                var inpt = $("#form-transfer-1").find('input');
                $.each(inpt, function() {
                    if(this.tagName == "INPUT"){
                            this.value = "";
                    }
                });
            }
        }
    }


    /**
     * 主动设置事件
     * @param id
     * @param event
     * @param data
     */
    function selectCallback(id,event,data){
        if(id == "theme"){
            console.log("下拉单选回调: 控件名称:"+id + " 选中:"+data[0].text);
            $('#smartwizard').smartWizard("setOptions", {"theme":data[0].text});
            return;
        }
        if(id == "animation"){
            $('#smartwizard').smartWizard("setOptions", {"animation":data[0].text});
        }
        if(id == "got_to_step"){
            $('#smartwizard').smartWizard("goToStep", data[0].text - 1);
        }
    }

    function refresh(){
        $('#smartwizard').smartWizard("reset");
        return true;
    }

    /**
     * 下一步
     */
    function next(){
        $('#smartwizard').smartWizard("next");
        return true;
    }

    /**
     * 上一步
     * @returns
     */
    function prev(){
        $('#smartwizard').smartWizard("prev");
        return true;
    }



</script>
</@footer>
</@pageTheme>