<extend name="Public/manage" />
<block name="head">
	<link href="__CSS__/user_zxy.css" rel="stylesheet">
	<script src="__JS__/bootstrap-select.min.js"></script><style>		.mrc_colum_ml {margin-left: 122px;}	</style>
</block>
<block name="location">
	<a class="z_nav" href="{:U('Apply/apply')}">账号中心</a>
	<a class="z_nav curt_nav" href="{:U('Apply/bank')}">银行账号</a>
</block>
<block name="body" >
        <div class="matter_right_content bank_content">
            <div class="title">
				<i class="usebase_icon"></i> 
				<span>银行账号</span>
			</div>
            <form id="editForm" class="form-horizontal" method="post" novalidate="novalidate">
                <div class="form-group">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 银行</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <select class="form-control" name="bank" id="bank" >
                            <option value="" selected="selected">请选择银行</option>
                            <volist name=":bank_lists()" id="vo">
                                <option value="{$key}">{$vo}</option>
                            </volist>
                        </select>
                    </div>
                    <div id="show_bank" class="show-form-info"></div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 开户行名称</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " name="bank_name" placeholder="请填写银行开户行名称" value="{$data.bank_name}" >

                    </div>
                    <div class="show-form-info">{$data.bank_name}</div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 开户名</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " name="account_name" placeholder="请填写银行开户名" value="{$data.account_name}" >

                    </div>
                    <div class="show-form-info">{$data.account_name}</div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 银行帐号</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " id="bank_account" name="bank_account" placeholder="请填写银行账号" value="{$data.bank_account}" >

                    </div>
                    <div class="show-form-info">{$data.bank_account}</div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group" id="re_dever_bank_account">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 确认银行账号</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " name="confirm_account" placeholder="请再次填写银行账号" value="{$data.bank_account}" >

                    </div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <label class="mrc_left mrc control-label">对账人</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " name="bank_link_man" placeholder="请填写对账人" value="{$data.bank_link_man}" >

                    </div>
                    <div class="show-form-info">{$data.bank_link_man}</div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <label class="mrc_left mrc control-label">对账人电话</label>
                    <div class="mrc_right4_3_3 mrc input-format">
                        <input type="text" class="form-control " name="bank_link_phone" placeholder="请填写对账人电话" value="{$data.bank_link_phone}" >

                    </div>
                    <div class="show-form-info">{$data.bank_link_phone}</div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml input-status"></div>
                </div>
                <div class="form-group">
                    <div class="mrc_colum_ml mrc_colum4_1_6 mrc">
                        <input type="button" class="btn btn_primary user_btn " id="saveButton" value="保存" >
                        <input type="button" class="btn btn_primary user_btn hidden" id="editButton" value="编辑" >
                        &nbsp;&nbsp;<a id="cancelEdit" href="#cancel" class="btn btn_default ">取消</a>
                    </div>
                </div>
            </form>

        </div>
        <script>

            $(document).ready(function(){
                Think.setValue("bank","{$data.bank}");
                $.validator.addMethod("checkMobile", function(value, element) {
                    var mobile = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    var tel = /^\d{3,4}-?\d{7,9}$/;
                    return mobile.test(value)||tel.test(value)||value.length==0?true:false;
                }, '联系电话不正确');
                $.validator.addMethod("checkBank", function(value, element) {
                    var bank = /^\d{19}$/g; // 以19位数字开头，以19位数字结尾
                    return bank.test(value);
                }, '银行卡号错误');
                var show_bank = $("#bank>option:selected").text();
                $("#show_bank").text(show_bank);
                
                $("#editButton").click(function(){
                    $("input").prop("readonly", false);
                    $("select").prop("disabled", false);
                    $(".form-control").removeClass("hide");
                    $(".show-form-info").addClass("hide");
                    $("#cancelEdit").removeClass("hidden").show();
                    
                    $("#saveButton").removeClass("hidden").show();
                    $("#editButton").addClass("hidden").hide();
                    $("#re_dever_bank_account").removeClass("hide");

                    $("#saveButton").click(function(){
                        $("#editForm").submit();
                    });
                });

                // 取消修改
                $("#cancelEdit").click(function(event){
                    $("input").prop("readonly", true);
                    $("select").prop("disabled", true);
                    $(".form-control").addClass("hide");
                    $(".show-form-info").removeClass("hide");
                    $("#re_dever_bank_account").addClass("hide");
                    //$("#editButton").val("修改信息");
                    $("#editButton").removeClass("hidden").show();
                    $("#saveButton").addClass("hidden").hide();
                    $(this).hide();
                    $("small").remove();
                    event.preventDefault();
                });
								
								$('#editForm select').change(function() {$(this).valid();});

                $("#editForm").validate({
                    //定义规则
										ignore:":hidden:not(select)",
                    rules:{
                        bank : {
                            required: true,
                        },
                        bank_name : {
                            required: true,
                        },
                        account_name : {
                            required: true,
                        },
                        bank_account : {
                            required: true,
                            
                        },
                        confirm_account : {
                            required: true,
                            equalTo: "#bank_account"
                        },
                        agreesubmit: {
                            required: true,
                        },
                        bank_link_phone:{
                            checkMobile:true,
                        }
                    },
                    messages:{
                        bank : {
                            required: "请选择银行",
                        },
                        bank_name : {
                            required: "银行开户行名称不能为空",
                        },
                        account_name : {
                            required: "请填写银行开户名",
                        },
                        bank_account : {
                            required: "请填写银行账号",
                            checkBank:'银行卡号错误'
                        },
                        confirm_account: {
                            required: "银行账号不能为空",
                            equalTo : "两次银行账号不一致"
                        },
                        agreesubmit: {
                            required: "您没有同意将银行信息提交到开放平台"
                        }
                    },
                    submitHandler: function (form) {
                        
                            $.post("{:U('Apply/bank')}", $("#editForm").serializeArray(), function(result){
                                layer.msg(result.info);
                                if(result.status == 1){
																	setTimeout(function(){
																			location.reload();
																	},2000);
                                }
                            })
                        return false;
                    }
                });
				
				
				$('#bank').selectpicker({
				    size: 15
			    });
			
				
                <empty name="data">
                    $("#editButton").click();
                <else />
                $("#cancelEdit").click();
                </empty>
            });
            $.VMenu.show('#menu');
            $.VMenu.open('m1.2');
			
			
			
        </script>
</block>