<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{admin/layout/layout}" th:with="title='',active='home'">
<th:block layout:fragment="html_head">
	<script>
		$(document).ready(function () {
			$('ul.tabs li').click(function () {
				var tab_id = $(this).attr('data-tab');
				$('ul.tabs li').removeClass('current');
				$('.tab-content').removeClass('current');
				$(this).addClass('current');
				$("#" + tab_id).addClass('current');
			})
		})
	</script>
	<style>
		.table .body .table-responsive {
			padding: 20px;
		}

		.table .head {
			display: block;
		}

		.apisetBox p {
			padding: 5px 0;
			position: relative;
			text-indent: 10px;
		}

		.apisetBox p::before {
			content: "";
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: #80caff;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 0;
			display: inline-block;
		}

		ul.tabs {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		ul.fixTab {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		ul.tabs li {
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
			font-size: 14px;
		}

		ul.fixTab li {
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 14px;
		}

		ul.tabs li.current {
			background: #e8f2ff;
			color: #222;
			border-radius: 10px 10px 0 0;
			font-size: 14px;
		}

		ul.fixTab li {
			background: #e8f2ff;
			color: #222;
			border-radius: 10px 10px 0 0;
			font-size: 14px;
		}

		.tab-content {
			display: none;
			background: #e8f2ff;
			padding: 15px;
			font-size: 14px;
		}

		.fix-content {
			background: #e8f2ff;
			padding: 15px 20px;
			font-size: 14px;
		}

		.tab-content.current {
			display: inherit;
		}

.table-responsive select {
			width: 100%;
			font-size: 14px;
		}

		select option[value=""][disabled] {
			display: none;
		}

		.table .saveBtnArea {
			padding: 0;
		}

		.table-responsive a.blBtn {
			display: block;
			text-align: center;
		}
	</style>
	<script>
		function apiRun(){
			
			
	        	 $.ajax({
	     			type : "post",
	     			url : "/manual/apiTest",	     		
	     			data : {
	     				apiUrl:"http://lz.akrra.cc//api/play",
	     				token:$('#token').val(),
	     				userId:$('#userId').val(),
	     				vendorKey:$('#vendorKey').val(),
	     				gameKey:$('#gameKey').val(),	 
	     				isMobile:$('#isMobile').val(),	 
	     				language:$('#language').val(),	 
	     				balance:$('#balance').val()    				
	     				
	     			},
	     			async : false,
	     			dataType : "json",
	     			success : function(data) {
	     				if(data.RES=="SUCCESS"){
	     					var d = data.DATA;
	     					console.log(d.data);
	     					$('#rData').html(JSON.stringify(d.data));
	     				}else{
	     					
	     				}
	     				
	     			}
	     		});
			
			
			
		}
		
	</script>
</th:block>
<th:block layout:fragment="content">
	<div class="container-fluid">
		<div class="page-name">
			<h1>게임런칭</h1>
		</div>
		<div class="table">
			<div class="head">
				<h6>https://oprvender.com/api/play</h6>
				<div class="apisetBox">
					<p게임 런칭을 하기위한 URL 발급 API</p>
				</div>
			</div>
			<div class="body bodyflex">
				<div class="table-responsive">
					<ul class="fixTab">
						<li>전송테스트</li>
					</ul>
					<div class="fix-content">
						<div class="inputTxt">
							<label> API KEY (Header Authorization)
							<input type="text" placeholder="API key" onfocus="this.placeholder=''"
								onblur="this.placeholder='API key'" th:value="${loginSite.siteKey}" readonly>
							</label>
						</div>
						<div class="inputTxt">
							<label> Auth Api 에서 발행한 토큰 (Header token)
							<input type="text" placeholder="token" id="token" onfocus="this.placeholder=''"
								onblur="this.placeholder='token'" >
							</label>
						</div>
						<div class="inputTxt">
							<label> 하부회원 아이디
								<input type="text" id="userId" placeholder="회원아이디(필수)" >
							</label>
						</div>
						<div class="inputTxt">
							<label> vendorKey
								<input type="text" id="vendorKey" placeholder="vendorKey(필수)" >
							</label>			
 					
						</div>
						<div class="inputTxt">
							<label> gameKey (슬롯 전용)
								<input type="text" id="gameKey" placeholder="gameKey" >
							</label>			
 					
						</div>
						<div class="inputTxt">
							<label> 하부회원 보유금액
								<input type="text" id="balance" placeholder="하부회원 보유금액" >
							</label>			
 					
						</div>		
						<div class="inputTxt">
							<label> 모바일 페이지 여부
								<input type="text" id="isMobile" placeholder="모바일 페이지 여부" >
							</label>			
 					
						</div>		
							<div class="inputTxt">
							<label> 언어
								<input type="text" id="language" placeholder="언어" >
							</label>			
 						</div>
						
						<div class="saveBtnArea">
							<a class="blBtn" href="javascript:apiRun()">실행</a>
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<ul class="tabs">
						<li class="tab-link current" data-tab="data-1">CURL</li>
						<li class="tab-link" data-tab="data-2">JAVA</li>
						<!--<li class="tab-link" data-tab="data-3">PHP</li>
						<li class="tab-link" data-tab="data-4">ASP</li>					
						<li class="tab-link" data-tab="data-5">Node.js</li>-->
					</ul>
					<div class="tab-content current" id="data-1">
						<div class="apiCodeArea">
							<code>
								<p>curl -X POST "https://oprvender.com/api/play" -H  "accept: */*" -H  "token: {{token}}" -H  "Authorization:  {{API key}}" -H  "Content-Type: application/json" -d "{\"userId\":\"{{하부회원 아이디}}\",\"vendorKey\":\"C01\",\"gameKey\":\"\",\"balance\":{{하부회원 보유금액}},\"isMobile\":\"Y\",\"userIp\":\"{{하부회원 아이피}}\",\"language\":\"{{사용언어}}\",\"decYn\":\"N\"}"</p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-2">
						<div class="apiCodeArea">
							<code>
								<p>
									// WebClient 선언 (Bean 주입 권장)<br>
									WebClient webClient = WebClient.builder().build();<br><br>
									
									String apiUrl = "https://oprvender.com/api/play";<br><br>

									// 요청 파라미터 구성<br>
									JSONObject paraJson = new JSONObject();<br>
									paraJson.put("userId", "{{하부회원 아이디}}");<br>
									paraJson.put("vendorKey", "{{vendorKey}}");<br>
									paraJson.put("gameKey", "{{gameKey}}");<br>
									paraJson.put("userIp", "{{하부회원 아이피}}");<br>
									paraJson.put("isMobile", "{{모바일페이지여부}}");<br>
									paraJson.put("language", "{{사용언어}}");<br>
									paraJson.put("balance", "{{하부회원 보유금액}}");<br><br>

									// API 호출<br>
									ResponseEntity&lt;String&gt; responseEntity = webClient.post()<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.uri(apiUrl)<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.header("Content-Type", "application/json")<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.header("Accept", "*/*")<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.header("Authorization", "{{API key}}")<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.header("token", "{{token}}")<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.bodyValue(paraJson.toString())<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.retrieve()<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.toEntity(String.class)<br>
									&nbsp;&nbsp;&nbsp;&nbsp;.block(); // 동기 처리가 필요한 경우<br><br>

									JSONObject resJson = JSONObject.fromObject(responseEntity.getBody());
								</p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-3">
						<div class="apiCodeArea">
							<code>
								<p> "code": 3, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-4">
						<div class="apiCodeArea">
							<code>
								<p> "code": 4, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-5">
						<div class="apiCodeArea">
							<code>
								<p> "code": 5, </p>
							</code>
						</div>
					</div>
				</div>
			</div>
			<div class="body topline">
				<div class="table-responsive" style="width:auto;">
					<ul class="fixTab">
						<li>수신 데이터</li>
					</ul>
					<div class="fix-content">
						<div class="apiCodeArea">
							<code>
								<p id="rData">실행을 누르시면 실제 데이터가 수신 후 표시됩니다.</p>
							</code>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- container-fluid -->
</th:block>