@extends('module.layouts.empty')

@push('meta')

@endpush

@push('css')
	<style type="text/css">
		body,html {
			margin:0;
			padding:0;
			height:100%
		}
		body {
			background-color: rgb(51, 51, 51) !important; padding: 50px;
		}
		a {
			outline:0
		}
		h1,h2,h3,h4,h5,h6,p {
			margin:0;
			font-weight:400
		}
		a img,fieldset {
			border:0
		}
		body {
			font-family:"Microsoft Yahei";
			color:#fff;
			background:0 0
		}
		.impowerBox,.impowerBox .status_icon,.impowerBox .status_txt,.redesign-style_page .redesign-login__wrp {
			display:inline-block;
			vertical-align:middle
		}
		.impowerBox {
			line-height:1.6;
			position:relative;
			width:100%;
			z-index:1;
			text-align:center
		}
		.impowerBox .title {
			text-align:center;
			font-size:20px
		}
		.impowerBox .qrcode {
			width:280px;
			margin-top:15px;
			border:1px solid #E2E2E2
		}
		.impowerBox .info {
			width:280px;
			margin:0 auto
		}
		.impowerBox .status {
			padding:7px 14px;
			text-align:left
		}
		.impowerBox .status.status_browser,.redesign-msg {
			text-align:center
		}
		.impowerBox .status.normal {
			margin-top:15px;
			background-color:#232323;
			border-radius:100px;
			-moz-border-radius:100px;
			-webkit-border-radius:100px;
			box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444;
			-moz-box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444;
			-webkit-box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444
		}
		.impowerBox .status p {
			font-size:13px
		}
		.impowerBox .status_icon {
			margin-right:5px
		}
		.impowerBox .status_txt p {
			top:-2px;
			position:relative;
			margin:0
		}
		.impowerBox .icon38_msg {
			display:inline-block;
			width:38px;
			height:38px
		}
		.impowerBox .icon38_msg.succ {
			background:url(images/icon_popup3696b4.png)0 -46px no-repeat
		}
		.impowerBox .icon38_msg.warn {
			background:url(images/icon_popup3696b4.png)0 -87px no-repeat
		}
		.new-template {
			height:100%
		}
		.qrcode-image {
			width:272px;
			height:272px;
			margin-top:44px;
			margin-bottom:30px
		}
	</style>
@endpush

@push('js')
@endpush

@section('content')
	<div class="old-template" style="">
		<div class="main impowerBox">
			<div class="loginPanel normalPanel">
				<div class="title">微信登录</div>
				<div class="waiting panelContent">
					<div class="wrp_code" id="thirdlogin-wechat-web"></div>
					<div class="info">
						<div class="status status_browser js_status js_wx_default_tip normal" id="wx_default_tip">
							<p>请使用微信扫描二维码登录</p>
							<p>“扫描后登录成功即可绑定账号”</p>
						</div>
						<div class="status status_succ js_status js_wx_after_scan normal" style="display:none" id="wx_after_scan">
							<i class="status_icon icon38_msg succ"></i>
							<div class="status_txt">
								<h4>扫描成功</h4>
								<p>请在微信中点击确认即可登录</p>
							</div>
						</div>
						<div class="status status_fail js_status js_wx_after_cancel normal" style="display:none" id="wx_after_cancel">
							<i class="status_icon icon38_msg warn"></i>
							<div class="status_txt">
								<h4>您已取消此次登录</h4>
								<p>您可再次扫描登录，或关闭窗口</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection


@section('script')
	@php
		try{
            $wechatService=app('App\Services\Common\WechatService');
            $officil=$wechatService->getOfficialAccount();
            $qrcode=$officil->qrcode->temporary('BindEvent', 30*60);
            $qrcode_url=$officil->qrcode->url($qrcode['ticket']);
        }catch(Exception $e){
            $qrcode_url = "请在公众内添加ip白名单";
            $qrcode['ticket']="please set ip in the official";
        }

	@endphp
	<script>
		$(function () {
			//初始化微信登录
			var official_qrcode='<img class="qrcode lightBorder" src="{!! $qrcode_url !!}">';
			$('#thirdlogin-wechat-web').append(official_qrcode);
			setInterval(function () {
				$.ajax({
					method: 'get',
					url: "{{route('jkq.auth.thirdlogin.official.bindcheck', ['ticket'=>$qrcode['ticket']])}}",
					success: function (data) {
						//console.log(data);
						if (data.data.is_login == 1) {
							location.href="{{route('jkq.auth.thirdlogin.official.bindcheck', ['ticket'=>$qrcode['ticket']])}}";
						}
					}
				});
			}, 1000);
		});
	</script>
@endsection