<!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;
			max-height: 529px;
		}

		.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/auth",
	     				userId:$('#userId').val(),
	     				nickName:$('#userId').val(),
	     				userIp:$('#userId').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/auth</h6>
				<div class="apisetBox">
					<p>API 사용을 위한 인증 및 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> 하부회원 아이디
								<input type="text" id="userId" placeholder="회원아이디(필수)" >
							</label>
						</div>
						<div class="inputTxt">
							<label> 하부회원 닉네임
								<input type="text" id="nickName" placeholder="회원닉네임(필수)" >
							</label>			
 					
						</div>
						<div class="inputTxt">
							<label> 하부회원아이피
								<input type="text" id="userIp" placeholder="하부회원아이피" >
							</label>			
 					
						</div>
						<div class="inputTxt">
							<label> 하부회원 보유금액
								<input type="text" id="balance" 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/auth" -H  "accept: */*" -H  "Authorization: {{API key}}" -H  "Content-Type: application/json" -d "{\"userId\":\"{{하부회원 아이디}}\",\"nickName\":\"{{하부회원 닉네임}}\",\"userIp\":\"{{하부회원아이피}}\",\"balance\":{{하부회원 보유금액}}}" </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-2">
						<div class="apiCodeArea">
							<code>
								<p>	
                                WebClient webClient = WebClient.builder().build();<br/><br/>
                                
                                String apiUrl = "https://oprvender.com/api/auth";<br/><br/>

                                JSONObject paraJson = new JSONObject();<br/>
                                paraJson.put("userId", "user01");<br/>
                                paraJson.put("nickName", "nickname01");<br/>
                                paraJson.put("userIp", "127.0.0.1");<br/>
                                paraJson.put("balance", 10000);<br/><br/>

                                ResponseEntity&lt;String&gt; responseEntity = webClient.post()<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;.uri(apiUrl)<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;.header("User-Agent", "PostmanRuntime/7.28.4")<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;.header("Content-Type", "application/json")<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;.header("Accept", "*/*")<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;.header("Authorization", "[[${loginSite.siteKey}]]")<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>