@extends('web.layouts.base')
@section('content')
    <!-- 分区 -->
    <div class="sectionwrap">
        <div class="section" id="login">
            <div class="colormask">
                <div class="loginwrap">
                    <div class="viewbox">
                        <div class="username">
                            <span class="text_hint" id="username_hint">用户名</span>
                            <input type="text" class="inputbox" name="username" value="" onpropertychange="checkUser(this)" oninput="checkUser(this)">
                            <span class="icon_circle">
                                <i class="fa fa-user"></i>
                                </span>
                        </div>
                        <div class="password">
                            <span class="text_hint" id="password_hint">密码</span>
                            <input type="password" class="inputbox" name="password" value="">
                            <span class="icon_circle">
                                    <i class="fa fa-lock"></i>
                                </span>
                        </div>
                        <span class="next_btn transition" data="0">
                                <i class="fa fa-chevron-right" change="fa fa-chevron-right"></i>
                            </span>
                    </div>
                    <div class="welcome" style="display:none">
                        <p><i class="fa fa-coffee fa-2x"></i> 欢迎回来, 请稍后...</p>
                    </div>
                    <div class="login-prompt">错误提示!</div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('foot_js')
    <script type="text/javascript">
        var partner = "/partner/index.html";
        var client = "/client/index.html";
        var loginurl='{{ route('web.regist.post') }}';

        function checkUser() {
            checkStatus = true;
        }

        var checkStatus = false;



        $(document).ready(function() {


            $('.gwc-celan').hide();
            /*设置首页Warp高度*/
            $("div.wraper, div.sectionwrap, div.section, div.colormask").height('100%');



            /*用户名输入框获取焦点效果*/
            $("input[name=username]").focus(function() {
                $(this).css({ 'margin-top': '9px' });
                $("#username_hint").animate({
                    top: "12px",
                    fontSize: "14px"
                }, 200);
            });
            $("input[name=username]").blur(function() {
                var userName = $(this).val();
                if (userName == "") {
                    $(this).css({ 'margin-top': '0' });
                    $("#username_hint").animate({
                        top: "24px",
                        fontSize: "16px"
                    }, 200);
                }
            });


            /*密码输入框获取焦点效果*/
            $("input[name=password]").focus(function() {
                $(this).css({ 'margin-top': '9px' });
                $("#password_hint").animate({
                    top: "12px",
                    fontSize: "14px"
                }, 200);
            });
            $("input[name=password]").blur(function() {
                var userName = $(this).val();
                if (userName == "") {
                    $(this).css({ 'margin-top': '0' });
                    $("#password_hint").animate({
                        top: "24px",
                        fontSize: "16px"
                    }, 200);
                }
            });
            $('input[type=password],input[name=username]').keydown(function(e) {
                if (e.keyCode == 13) {
                    $("span.next_btn").click();
                }
            });



            function focusinput(name) {
                $("div.viewbox").animate({ left: "-20px" }, 150, function() {
                    $(this).animate({ left: "20px" }, 150, function() {
                        $(this).animate({ left: "-10px" }, 100, function() {
                            $(this).animate({ left: "10px" }, 100, function() {
                                $(this).animate({ left: "0px" }, 100, function() {
                                    $("input[name=" + name + "]").focus();
                                });
                            });
                        });
                    });
                });
            }


            if ($("input[name=username]").val() != '') {
                $("input[name=username]").focus();
                $("input[name=username]").css({ 'margin-top': '9px' });
                $("#username_hint").animate({
                    top: "12px",
                    fontSize: "14px"
                }, 200);
            };

            /*点击下一步为空效果*/
            $("span.next_btn").click(function() {
                var _this = $(this);
                var _class = _this.find('i.fa').attr('class');
                var _change = _this.find('i.fa').attr('change');
                var data = _this.attr("data") * 1;
                var userName = $("input[name=username]").val();
                var passWord = $("input[name=password]").val();
                if (data == 0) {
                    if (userName == '') {
                        focusinput('username');
                    } else {
                        _this.find('i.fa').attr('class', _change).attr('change', _class);
                        _this.find('i.fa').attr('class', _change).attr('change', _class);
                        $("span.next_btn").attr("data", 1);
                        $("div.username").animate({ left: "400px" });
                        $("div.password").animate({ left: "0px" }, function() {
                            $("input[name=password]").focus();

                            if ($("input[name=password]").val() != '') {
                                $("input[name=password]").focus();
                                $("input[name=password]").css({ 'margin-top': '9px' });
                                $("#password_hint").animate({
                                    top: "12px",
                                    fontSize: "14px"
                                }, 200);
                            };

                        });

                    }
                }
                if (data == 1) {
                    if (passWord == '') {
                        focusinput('password');
                    } else {
                        _this.find('i.fa').attr('class', _change).attr('change', _class);
                        //_this.animate({ right: "-100px" }, 100);
                        _this.find('i.fa').attr('class', _change).attr('change', _class);
                        $("div.password").animate({ left: "400px" }, function() {

                        });
                         $.post(loginurl, {
                             password: passWord,
                             nickname:userName,
                             _token:"{{ csrf_token() }}"
                         }, function (data) {
                             var _class = _this.find('i.fa').attr('class');
                             var _change = _this.find('i.fa').attr('change');
                             if (data.error==0) {
                                 _this.animate({right: "-100px"},100);
                                 _this.find('i.fa').attr('class', _change).attr('change', _class);
                                 $("div.password").animate({left: "400px"}, function(){
                                     $("div.viewbox").animate({
                                         width: "360px",
                                         height: "90px",
                                         opacity: "0",
                                         left: '-20px'
                                     }, function(){
                                         if(data.error==0)
                                         {
                                             $("div.welcome").fadeIn();
                                             $("input[name=username]").val('');
                                             $("input[name=password]").val('');
                                             setTimeout(function(){
                                                window.location.href = "{{ route('web.user.index') }}";
                                             }, 2000);
                                         }


                                     });
                                 });
                             } else {
                                // _this.find('i.fa').attr('class', _change).attr('change', _class);
                                 $("input[name=password]").val('');
                                 $('.login-prompt').text(data.msg).stop(false).fadeIn().delay(2000).fadeOut();
                                 $("div.password").animate({ left: "-400px" }, function() {

                                 });

                                 //focusinput('password');
                                 focusinput('username');
                             };
                         });
                    }
                }
            });



        });
    </script>
@endsection