@extends('muc_front.app.index')
@section('lang', 'Zh-CN')
@section('title')
	注册
@endsection

@section('firstStyle')

@endsection

@section('style')
	<link rel="stylesheet" href="{{ asset('front/muc/css/style/login.css') }}" />
@endsection

@section('headerScript')
	<script type="text/javascript" src="{{ asset('front/muc/js/layer_mobile/layer.js') }}" ></script>
	<script type="text/javascript" src="{{ asset('front/muc/js/script/login.js?time='.time()) }}" ></script>
	<script src="https://www.yunpian.com/static/official/js/libs/riddler-sdk-0.2.2.js"></script>
@endsection

@section('footer-nav')

@endsection

@section('content')
	<div id="app">
		<header class="mui-bar mui-bar-nav">
{{--			<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>--}}
			<h1 class="mui-title">注册</h1>
		</header>

		<div class="mui-content">
			<div class="lg-form">
				<ul class="lg-list">
					<li>
						<i class="wk-icon icon-phone"></i>
						<input type="tel" id="phone" name="phone" placeholder="请输入绑定手机号码" />
					</li>
					<li>
						<i class="wk-icon icon-unlock"></i>
						<input type="password" id="password" name="password" placeholder="请设置登录密码" />
					</li>
					<li>
						<i class="wk-icon icon-unlock"></i>
						<input type="password" id="password_confirmation" name="password_confirmation" placeholder="请重复登录密码" />
					</li>
					<li>
						<i class="wk-icon icon-lock"></i>
						<input type="password" id="pay_password" name="pay_password" placeholder="请设置交易密码" />
					</li>
					<li>
						<i class="wk-icon icon-lock"></i>
						<input type="password" id="pay_password_confirmation" name="pay_password_confirmation" placeholder="请重复交易密码" />
					</li>
					<li id="yzmParent" class="lg-list-yzm">
						<i class="wk-icon icon-msg-o"></i>
						<input type="text" id="sms" name="sms" placeholder="请输入短信验证码" />
						<button data-url="{{ route('send.sms', ['type' => 'register_web']) }}" onclick="indentifying(this)" class="lg-list-btn">获取验证码</button>
					</li>
					<li>
						<i class="wk-icon icon-key"></i>
						<input type="text" id="referee_code" disabled="disabled" name="referee_code" value="{{ $code }}"  placeholder="请输入邀请码（必填）" />
					</li>
				</ul>
				<input type="hidden" name="authenticate" id="authenticate">
				<input type="hidden" name="send_token_str" id="send_token_str">
				<div class="container" id="cbox">

			</div>
				<button class="lg-btn" id="btn-submit" type="button">注 册</button>
				<div class="lg-ft">
					已有账户，<a href="{{ route('front.m.down') }}">下载APP</a>
				</div>
			</div>
		</div>
@endsection

@section('bodyScript')
	<script>
		var slider1 = null;
		function postajax(apiurl, datastr, successfun) {
			$.ajax({
				type: "post",
				url: apiurl,
				dataType: 'json',
				data: datastr,
				success: function(data) {
					//							alert(JSON.stringify(data));
					if(data.code === 1) {
						successfun(data);
					} else {
						$("#btn-submit").attr('disabled', false);
						layer.open({
							content: data.msg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
					}
				}
			});
		}


		$(function () {
			new YpRiddler({
				expired: 10,
				mode: 'dialog',
				winWidth: '100%',
				lang: 'zh-cn', // 界面语言, 目前支持: 中文简体 zh-cn, 英语 en
				// langPack: LANG_OTHER, // 你可以通过该参数自定义语言包, 其优先级高于lang
				container: document.getElementById('cbox'),
				appId: 'bbc2a879ad3a49ab85a32af808d3f687',
				version: 'v1',
				// noButton: true,
				onError: function(param) {
					if (param.code === 429) {
						utils.alert('请求过于频繁，请稍后再试！');
					}
				},
				onSuccess: function(validInfo, close) {
					// 成功回调
					is_captcha_verified = true;
					// console.log(validInfo.token);
					// console.log(validInfo.authenticate);
					// $('#smsBtn').trigger('click');
					 $('#send_token_str').val(validInfo.token);
					 $('#authenticate').val(validInfo.authenticate);
					close()
				},
				onFail: function(code, msg, retry) {
					// 失败回调
					retry()
				},
				beforeStart: function(next) {
					next()
				},
				afterStart: function() {
					$('.yp-riddler-mark').remove();
				}
			});
			$(document).on('click', '#btn-submit', function () {
				if($("#phone").val() == ""){
					layer.open({
						content: '请输手机账号！'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
				}else{
					$("#btn-submit").attr('disabled', true);
					apiurl = "{{ route('front.auth.register.post') }}";
					datastr = {
						phone: $("#phone").val(),
						password: $("#password").val(),
						password_confirmation: $("#password_confirmation").val(),
						pay_password: $("#pay_password").val(),
						pay_password_confirmation: $("#pay_password_confirmation").val(),
						referee_code: $("#referee_code").val(),
						sms: $("#sms").val(),
						pc: "pc",
						type: "register_web",
						mac: "",
						_token: "{{ csrf_token() }}"
					};
					function successfun(data) {
						// var date = new Date();
						// var y = date.getTime();
						// var gqtk = y + (data.expires_in * 500);
						if( data.code <= 0 ){
							$("#btn-submit").attr('disabled', false);
							layer.open({
								content: data.msg
								,skin: 'msg'
								,time: 2 //2秒后自动关闭
							});
							return false;
						}
						layer.open({
							content: data.msg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						setTimeout(function(){
							$("#btn-submit").attr('disabled', false);
							window.location.href = data.data.redirect;
						},2000);
					}
					postajax(apiurl, datastr, successfun);//提交方法
				}
				// window.location.href = 'index.html';
			});
		});
	</script>
@endsection