@extends('mobile.module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/members.css') }}" rel="stylesheet">
@endpush

@push('js')
    <script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
@endpush

@section('content')
    <div class="split-block"></div>
    <div class="bind-top-box qs-center">
        @if('wechat' == $type)
            <img src="{{session('wechatUser.headimgurl')}}" class="b-img">
            <div class="b-nickname">{{session('wechatUser.nickname')}}</div>
        @else
            <img src="{{session('qqUser.figureurl_qq_1')}}" class="b-img">
            <div class="b-nickname">{{session('qqUser.nickname')}}</div>
        @endif
        <div class="font12 txt-color-9">您已登录{{$type_name}}账号</div>
    </div>
    <div class="split-block"></div>
    <div class="b-list-group-tip">
        <div class="txt-color-3">注册并绑定新账号</div>
        <div class="link_blue font12 txt-color-9">如果您已有{{subsite_config('aix.system.site.site.site_name')}}账号，请<a href="{{route($sub_site.'mobile.auth.thirdlogin.bind', ['login_type'=>$type])}}">立即绑定</a></div>
    </div>
    <div class="qs-top-nav x2 list_height">
        <div class="n-cell active">注册个人账号<div class="b-line"></div></div>
        <div class="n-cell" onclick="javascript:location.href='{{route($sub_site.'mobile.auth.thirdlogin.bind.new.company', ['login_type'=>$type])}}'">注册企业账号<div class="b-line"></div></div>
        <div class="clear"></div>
    </div>
    <div class="split-block"></div>
    <form action="{{route($sub_site.'mobile.auth.thirdlogin.bind.new.post', ['login_type'=>$type, 'utype'=>2])}}" method="post" id="regMobileForm">
        {{csrf_field()}}
        <div class="loging-input-group">
            <div class="group-list id_card">
                <input id="id_card" name="id_card" type="text" class="l-input font14" placeholder="请输入身份证号码" autocomplete="off">
            </div>
            <div class="group-list had-remind-box1 qs-center link_blue" style="display: none;background-image:none;padding: 0px;background: rgba(255,214,0,0.14);font-weight: 400;"></div>
            <div class="group-list mobile">
                <input id="mobile" name="mobile" type="text" class="l-input font14" placeholder="请输入手机号码" autocomplete="off" value="">
                <a href="javascript:;" id="getVerfyCode" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-border-gray font14">获取验证码</a>
            </div>
            <div class="group-list had-remind-box qs-center link_blue" onclick="javascript:location.href='{{route($sub_site.'mobile.login')}}'"><a href="javascript:;"><span class="mal"></span><span class="txt-o-red">点击立即登录</span></a></div>
            <div class="group-list verfy">
                <input id="mobile_vcode" name="mobile_vcode" type="text" class="l-input font14" placeholder="请输入手机验证码" autocomplete="off">
            </div>
            <div class="group-list pwd">
                <input id="password" name="password" type="password" class="l-input font14" placeholder="请输入账户密码" autocomplete="off">
            </div>
            <div class="group-list pwd">
                <input id="password_confirmation" name="password_confirmation" type="password" class="l-input font14" placeholder="请确认账户密码" autocomplete="off">
            </div>
        </div>
        <div class="l-tool-bar list_height">
            <div class="read-agreement">
                <div class="for-checkbox active" id="for-checkbox">我已阅读并同意
                </div>
            </div>
            <div class="agreement link_gray6"><a href="#userAgreenment" id="reg_agreement">《用户服务协议》</a></div>
            <div class="clear"></div>
        </div>
        <div class="split-block"></div>
        <div class="btn-spacing btn-spacing-nmb"><a id="btnRegPersonal" href="javascript:;" class="qs-btn qs-btn-blue font18">注册并绑定</a></div>
        <input type="hidden" name="reg_type" value="1" />
        <input type="hidden" name="utype" value="2" />
        <input type="hidden" name="reg_source" value="2" />
        <input type="hidden" name="agreement" value="1" />
    </form>
    <input type="hidden" id="J_config_varify_reg" value="1"/>
    <!--用户服务协议-->
    <script type="text/html" id="agreementTxt">
        <div class="headernavfixed">
            <div class="headernav font18"><div class="title">用户服务协议<div class="return js-back"></div><div class="rbtn"></div></div></div>
        </div>
        <div class="agreement-content">{!! str_replace(["\r\n","\n"], ["",""], config('aix.system.register_agreement.register_agreement.reg_agreement')) !!}</div>
    </script>
@endsection


@section('script')
    <script type="text/javascript" src="{{ theme_asset('app/js/regular.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('mobile/js/popWin.js') }}"></script>
    <script>
        // 用户服务协议
        $('#for-checkbox').on('click', function() {
            $(this).toggleClass('active');
            if ($(this).hasClass('active')) {
                $('input[name=agreement]').val(1);
            } else {
                $('input[name=agreement]').val(0);
            }
        })
        var agreementTemp = $('#agreementTxt').html();
        $("#reg_agreement").on("click",function(){
            popWin.init({
                from:"right",
                html:agreementTemp,
                handle:function (a) {
                }
            })
        });

        var config_varify_reg = eval($('#J_config_varify_reg').val());
        // 配置极验
        if (config_varify_reg) {
            //手机注册
            var handlerRegMobile = function(captchaObj) {
                captchaObj.bindForm("#regMobileForm");
                captchaObj.onSuccess(function() {
                    regPerByMobileHandler();
                });
                captchaObj.onError(function() {

                });
                $('#btnRegPersonal').on('click', function () {
                    var id_cardValue = $.trim($('input[name=id_card]').val());
                    var mobileValue = $.trim($('input[name=mobile]').val());
                    var verifycodeValue = $.trim($('input[name=mobile_vcode]').val());
                    var passwordValue = $.trim($('input[name=password]').val());
                    var password_confirmation = $.trim($('input[name=password_confirmation]').val());
                    if (id_cardValue == '') {
                        qsToast({type:2,context: '请输入身份证号码'});
                        return false;
                    }
                    if(!validateIdCard(id_cardValue)) {
                        qsToast({type:2,context: '身份证格式不正确'});
                        return false;
                    }
                    if (mobileValue == '') {
                        qsToast({type:2,context: '请输入手机号码'});
                        return false;
                    }
                    if (mobileValue != "" && !regularMobile.test(mobileValue)) {
                        qsToast({type:2,context: '手机号码格式不正确'});
                        return false;
                    }
                    if (verifycodeValue == '') {
                        qsToast({type:2,context: '请输入手机验证码'});
                        return false;
                    }
                    if (passwordValue == '') {
                        qsToast({type:2,context: '请输入密码'});
                        return false;
                    }
                    if(!inputRegValiPassword(passwordValue)){
                        qsToast({type:2,context: '密码长度要求为6-16个字符'});
                        return false;
                    }
                    if (passwordValue != password_confirmation) {
                        qsToast({type:2,context: '两次密码不一致'});
                        return false;
                    }

                    captchaObj.verify();

                });
            };

            //发送短信
            var handler = function(captchaObj) {
                captchaObj.appendTo("#popup-captcha");
                captchaObj.onSuccess(function() {
                    var result = captchaObj.getValidate();
                    toSetSms(result);
                });

                captchaObj.onError(function() {

                });
                $('#getVerfyCode').on('click', function () {
                    if ($('#getVerfyCode').hasClass('qs-btn-border-disabled')) {
                        return false;
                    }
                    var mobileValue = $.trim($('input[name=mobile]').val());
                    if (mobileValue == '') {
                        qsToast({type:2,context: '请输入手机号'});
                        return false;
                    }

                    if (!regularMobile.test(mobileValue)) {
                        qsToast({type:2,context: '手机号码格式不正确'});
                        return false;
                    }
                    captchaObj.verify();

                });
            };

            gt_init(handlerRegMobile);
            gt_init(handler);
        }

        $('input[name=id_card]').keyup(function () {
            var currentValue = $(this).val();
            if (currentValue.length >= 18) {
                if(validateIdCard(currentValue) && !remoteValid('id_card',currentValue)) {
                    $('.had-remind-box1').text('身份证 ' + currentValue + ' 已注册');
                    $('.had-remind-box1').show();
                } else {
                    $('.had-remind-box1').hide();
                }
            } else {
                $('.had-remind-box1').hide();
            }
        });


        $('input[name=mobile]').keyup(function () {
            var currentValue = $(this).val();
            if (currentValue.length >= 11) {
                if(regularMobile.test(currentValue) && !remoteValid('mobile',currentValue)) {
                    $('.had-remind-box .mal').text('手机号 ' + currentValue + ' 已注册，');
                    $('.had-remind-box').show();
                } else {
                    $('.had-remind-box').hide();
                }
            } else {
                $('.had-remind-box').hide();
            }
        });

        // 发送手机验证码
        function toSetSms(geet_result) {
            var mobileValue = $.trim($('input[name=mobile]').val());
            function settime(countdown) {
                if (countdown == 0) {
                    $('#getVerfyCode').removeClass('qs-btn-border-disabled');
                    $('#getVerfyCode').text('获取验证码');
                    countdown = 180;
                    return;
                } else {
                    $('#getVerfyCode').addClass('qs-btn-border-disabled');
                    $('#getVerfyCode').text('重新发送' + countdown + '秒');
                    countdown--;
                }
                setTimeout(function() {
                    settime(countdown)
                },1000)
            }
            $('#getVerfyCode').prop("disabled", !0);
            $('#getVerfyCode').addClass('qs-btn-border-disabled');
            $('#getVerfyCode').text('发送中...');
            geet_result.mobile= mobileValue;
            geet_result.type= "register";
            $.ajax({
                url: "{{route($sub_site.'sms.send')}}",
                type: 'POST',
                dataType: 'json',
                data: geet_result,
                success: function (data) {
                    // console.log(data);
                    setTimeout(function() {
                        qsToast({type:2,context: '验证码已发送，请注意查收'});
                        // 开始倒计时
                        var countdowns = 180;
                        settime(countdowns);
                    },1000)
                },
                error: function (errorData) {
                    // console.log(errorData);
                    var response=$.parseJSON(errorData.response);
                    if (errorData.status==422) {//验证错误
                        $.each(response.errors,function (key,val) {
                            qsToast({type:2,context: val[0]});
                            return false;
                        });
                    }
                    else if(errorData.status==400) {//业务错误
                        qsToast({type:2,context: response.message});
                    }
                    setTimeout(function() {
                        $('#getVerfyCode').prop("disabled", 0);
                        $('#getVerfyCode').removeClass('qs-btn-border-disabled');
                        $('#getVerfyCode').text('获取验证码');
                    },1500)
                }
            });
        }

        // 个人手机注册处理程序
        function regPerByMobileHandler() {
            $('#btnRegPersonal').text('注册中...').addClass('btn_disabled').prop('disabled', !0);
            $.ajax({
                url: "{{route($sub_site.'mobile.auth.thirdlogin.bind.new.post', ['login_type'=>$type, 'utype'=>2])}}",
                type: 'POST',
                dataType: 'json',
                data: $('#regMobileForm').serialize(),
                success: function (data) {
                    qsToast({type:2,context: "注册成功,正在为你跳转.."});
                    setTimeout(function () {
                        window.location.href = data.data.url;
                    },1000)

                },
                error:function(errorData) {
                    $('#btnRegPersonal').text('注册并绑定').removeClass('btn_disabled').prop('disabled', 0);
                    var response=$.parseJSON(errorData.response);
                    if (errorData.status==422) {//验证错误
                        $.each(response.errors,function (key,val) {
                            qsToast({type:2,context: val[0]});
                            return false;
                        });
                    }
                    else if(errorData.status==400) {//业务错误
                        qsToast({type:2,context: response.message});
                    }
                }
            });
        }

        /**
         * 验证用户名等是否重复
         * @param validType 验证类型
         * @param validValue 值
         * @returns {boolean|*}
         */
        function remoteValid(validType, validValue){
            var result = false;
            $.ajax({
                url: "{{route($sub_site.'register.check', ['utype'=>2])}}",
                cache: false,
                async: false,
                type: 'post',
                dataType: 'json',
                data: { type: validType, param: validValue },
                success: function(json) {
                    result= true;
                }
            });
            return result;
        }

        /**
         * 验证密码长度
         * @param value 密码
         * @returns {boolean}
         */
        function inputRegValiPassword(value){
            achoice = true;
            if(value.length>16 || value.length<6){
                achoice = false;
            }
            return achoice;
        }

    </script>

@endsection