<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>

	<link type="text/css" rel="stylesheet" href="<c:url value='/resources/version_new/css/public.css' />" />
	<link type="text/css" rel="stylesheet" href="<c:url value='/resources/version_new/css/basic.css' />" />
	<style>
		.go-to-register {
			cursor: pointer;
			height: 70px;
			width: 70px;
			background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg);
			position: absolute;
			top: 0px;
			right: 0px;
			text-align: right;
		}
		.go-to-register span {
			font-size: 14px;
			color: rgb(255, 255, 255);
			font-weight: 500;
			position: relative;
			top: 10px;
			right: 7px;
		}
	</style>
</head>
<body id="login-regis">
<div class="head-more">
	<div class="more-content clearfix">
		<div class="logo fl">
			<a href="<c:url value='/' />">
				<img src="<c:url value='/resources/version_new/images/bai-logo.png' />" alt="百联保logo">
				<span>用户登录</span>
			</a>
		</div>
	</div>
</div>
<div class="s-login">
	<div class="go-to-register"><span onclick="loginChange(1)">企业</span></div>
	<form action="<c:url value='/user/clientUserLogin'/>" method="post">
		<div class="login-content">
			<h2>个人登录</h2>
			<div class="login-select">
				<ul class="clearfix">
					<li id="person_name" class="active fl">
						<span>账号密码</span>
						<p class="li-bottom"></p>
					</li>
					<li id="company_name" class="fl">
						<span>手机短信</span>
						<p class="li-bottom"></p>
					</li>
				</ul>
			</div>
			<div class="select-content">
				<div class="content-describe">
					<div class="dec-inp">
						<div class="tooltip-more">
							<input type="text" placeholder="请输入用户名/手机号码"  name="j_username_1" id="j_username_1" class="s1 s-tooltip">
							<div class="tooltip s-none">
								<h3>填写提示</h3>
								<p>个人用户支持手机、邮箱、用户名登录</p>
							</div>
							<p class="error s-phone-error"></p>
						</div>
						<input type="password" placeholder="请输入登录密码(密码为6-20位数字和字母组合)" name="j_password_1" id="j_password_1" class="s2">
						<p class="error pwd-error"></p>
					</div>
				</div>
				<div class="content-describe s-none">
					<div class="dec-inp">
						<div class="tooltip-more">
							<input type="text" placeholder="请输入手机号"  name="j_username_2"  id="j_username_2" class="s1 s-tooltip">
							<p class="error phone-error"></p>
						</div>
					</div>
					<div class="sdf clearfix">
						<p class="fl">
							<input type="hidden" id="check_code">
							<input type="text" placeholder="请输入验证码" class="s7" id="code">
						</p>
						<a href="javascript:;" class="fr phone-code">获取验证码</a>
						<p class="error code-error"></p>
					</div>
				</div>
			</div>
			<div class="dec-pic clearfix">
				<p class="fl"><input type="text" placeholder="请输入右侧验证码" value="" class="s3" id="right-code"></p>
				<div class="fr" id="v_container"></div>
				<p class="error error-code"></p>
			</div>
			<div class="login-foot">
				<div class="forget-password">
					<a href="<c:url value="/user/pwd/rest/init" />">忘记密码？</a>
				</div>
				<div class="login">
					<a href="javascript:;" class="ert" onclick="tijiaoLogin()">登录</a>
				</div>
				<div class="sign-up">
					<p>还没账号？<a href="<c:url value="/user/register/init" />">立即注册>></a></p>
				</div>
			</div>
		</div>
	</form>
</div>
<script src="<c:url value='/resources/version_new/js/jquery-1.8.3.min.js' />"></script>
<script src="<c:url value='/resources/version_new/js/gVerify.js' />"></script>
<script src="<c:url value='/resources/version_new/js/login.js?5' />"></script>
<script type="text/javascript" src="<c:url value='/resources/js/layer/layer.js'/>"></script>
<script src="<c:url value='/resources/version_new/js/placeholder.js' />"></script>

<script type='text/javascript' src='https://webchat.7moor.com/javascripts/7moorInit.js?accessId=d7359b20-9dec-11ec-a564-cd73c4e7850a&autoShow=true&language=ZHCN' async='async'>
</script>
<script>
	$(function(){
		if (window!=top)
			top.location.href = window.location.href;
		init_public_key();
	});
	var baseUrl = '${pageContext.request.contextPath }';

	var verifyCode = new GVerify("v_container");

	function loginChange(_sign){
		var url = window.location.href;
		if(_sign = 1){
			url = url.replace("/login","/loginc");
		}else{
			url = url.replace("/loginc","/login");
		}
		window.location.href = url;
	}
	// 表单验证
	var phone_reg = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
	var email_reg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/ ;
	var pwd_reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;
	function checkPhone() {
		if ($('#j_username_2').val() == "") {
			$('.phone-error').html("手机号不能为空").addClass('wed');
			$('#j_username_2').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
			return phone_ok = false;
		} else if (!$('#j_username_2').val().match(phone_reg)) {
			$('.phone-error').html("手机号码格式有错").addClass('wed');
			$('#j_username_2').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
			return phone_ok = false;
		} else {
			$('.phone-error').html("").removeClass('wed');
			$('#j_username_2').css({"border":"1px solid #e6e6e6","box-shadow":"none"});
			return phone_ok = true;
		};
	}
	function checkCodes() {
		if ($('#right-code').val() == "") {
			$('.error-code').html("验证码不能为空").addClass('wed');
			$('#right-code').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
			return e_code_ok = false;
		} else if (verifyCode.validate(document.getElementById("right-code").value)) {
			$('.error-code').html("").removeClass('wed');
			$('#right-code').css({"border":"1px solid #e6e6e6","box-shadow":"none"});
			return e_code_ok = true;
		} else{
			$('.error-code').html("验证码输入有错").addClass('wed');
			$('#right-code').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
			return e_code_ok = false;
		};
	}

	function checkCode() {
		if ($('#code').val() == "") {
			$('.code-error').html("验证码不能为空").addClass('wed');
			$('#code').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
			return code_ok = false;
		} else {
			$('.code-error').html("").removeClass('wed');
			$('#code').css({"border":"1px solid #e6e6e6","box-shadow":"none"});
			return code_ok = true;
		};
	}

	function init_public_key() {
		$.ajax({
			type: 'POST',
			url: baseUrl+"/synopsis/get/public_key",
			dataType:"json",
			async: false,
			success: function(json){
				if(json.retType == '0'){
					$('#public_key').val(json.data);
				}
			}
		});
	}

	$('#right-code').blur(function () {
		checkCodes();
	})
	$('#j_username_2').blur(function () {
		checkPhone();
	});
	// 短信验证码
	$('#code').blur(function () {
		checkCode();
	});
	function checkCodeTrue() {
		$.ajax({
			type: 'POST',
			url: baseUrl + "/user/register/checkCode",
			data:{'sign': $('#phone').val(),'captcha': $('#code').val()},
			dataType:"json",
			async: false,
			success: function(json){
				if(json.statusCode == "200") {
					$('.code-error').html("").removeClass('wed');
					$('#code').css({"border":"1px solid #e6e6e6","box-shadow":"none"});
					return phone_code_ok = true;
				}else{
					$('.code-error').html("验证码错误").addClass('wed');
					$('#code').css({"border":"1px solid red","box-shadow":"0 0 5px #fa4c4c"});
					return phone_code_ok = false;
				}
			}
		});
	}

	function tijiaoLogin() {

		var  j_username="";
		var  j_password="";
		var  j_type="";
		var  rurl="${url}";
		if ($("#person_name").hasClass("active")){
			j_username=$("#j_username_1").val();
			j_password=$("#j_password_1").val();
            j_type="1";
			if(j_username==""||j_password==""){
				layer.msg("用户名，和密码不能为空");
				return;
			}
			var  rightCode= $("#right-code").val();
			if(!verifyCode.validate(rightCode)){
				layer.msg("验证码输入错误请重新输入。");
				return;
			}
		}
		if ($("#company_name").hasClass("active")){
			j_username=$("#j_username_2").val();
			j_password=$("#code").val();
            j_type="3";
			checkPhone();
			if(!phone_ok){
				return ;
			}
			/*if(j_username==""){
				layer.msg("请输入手机号！！");
				return;
			}*/
			checkCode();
			if(!code_ok){
				// layer.msg("请输入验证码！！");
				return ;
			}
		}
		var index = layer.load(0, {shade: [0.3,'#808080'],scrollbar: false});
		$.ajax({
			type: 'POST',
			url: baseUrl+"/user/login/clentLogin1",
			data:{j_username:j_username
				,j_password:j_password
				,j_type:j_type
				,rurl:rurl},
			dataType:"json",
			async: false,
			success: function(data){
				layer.close(index);
				if(data.status =="200"){
					layer.msg('登录成功！', {time:2000});
					location.href=data.redirectUrl;
				}else{
					layer.msg(""+data.msg);
				}
			}
		});
	}

	$("body").keydown(function() {

		var theEvent = window.event || arguments.callee.caller.arguments[0];
		if (theEvent.keyCode == "13") {//keyCode=13是回车键
			tijiaoLogin();
		}
	});
	$('.phone-code').click(function () {
		var  phone=$("#j_username_2").val();
		var phoneReg = /^(13|14|15|16|17|18|19)[0-9]{8}[0-9]$/;
		if(phone!=""&&phoneReg.test(phone)){
			sendTruePhone();
		}else{
			layer.msg("请输入11位正确的手机号码！");
		}
	});
	var count=60;
	function sendphone() {


		if (count == 0) {
			$('.phone-code').text("获取短信验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
			count = 60;
			return;
		} else {
			$('.phone-code').text("再次发送(" + count + ")").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
			count--;
		}
		setTimeout(function() {
					sendphone()
				}
				,1000)
	};
	function changeBtn(sign) {
		if(sign == 1){
			$('.phone-code').text("获取短信验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
		}else{
			$('.phone-code').text("获取短信验证码").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
		}
	};
	function sendTruePhone(){
		var phone =$("#j_username_2").val();
		sendphone();
		var index = layer.load(0, {shade: [0.3,'#808080']});
		$.ajax({
			type : 'POST',
			url : baseUrl + "/user/register/loginSendAuthCode",
			async: false,
			data : {
				'tel' : phone
			},
			dataType : "json",
			cache : false,
			success : function(json) {
				layer.close(index);
				if (json.statusCode == '200') {
					layer.msg("验证码获取成功,请查收手机并进行验证！！");
				}else{
					layer.msg(json.message);
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				layer.msg("验证码获取失败！！");
			}
		});
	}


	//	$("input").placeholder();
</script>
<script>

</script>
</body>
</html>