<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>TTS 테스트</title>
	<%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>
	</head>
	<body>

		<h1>ICOMSYS ADMIN</h1>
		<h1>TTS 테스트</h1>
		<div class="skip_navigation">
			<ul>
				<li>
					<a href="#Content" class="go_content">본문 바로가기</a>
				</li>
				<li>
					<a href="#Gnb">메뉴 바로가기</a>
				</li>
			</ul>
		</div>

	<header id="header">
		<%@ include file="/WEB-INF/jsp/adm/include/header.jsp"%>
	</header>
	<c:import url="/adm/menu/getLnbMenu.do" />

	<section id="Content" class="bot_common">
		<div class="cont_top">
			<div class="location">
				<ul>
					<li class="home"><a href="#">HOME</a></li>
					<li><a href="#">학습및테스트</a></li>
					<li><a href="#">TTS 테스트</a></li>
				</ul>
			</div>
		</div>
		<div class="sub_cont">
			<div class="cont_box">
				<div class="box_title">
					<div class="fl">
						<h2 class="mt12">TTS 테스트</h2>
					</div>
					<div class="fr">
						<dl class="customer fl">
							<dt class="fl">
								<c:if test="${'SYS_ADMIN'==LoginVO.authCode}">
									고객사 :
								</c:if>
							</dt>
							<dd class="fl">
								<div class="sel_box">
									<c:choose>
										<c:when test="${'SYS_ADMIN'==LoginVO.authCode}">
											<select class="top" name="custCode" id="custCode">
												<c:forEach var="siteInfo" items="${siteLists}" varStatus="status">
													<option value="<c:out value="${siteInfo.custCode}"/>">
														<c:out value="${siteInfo.custName}" />
													</option>
												</c:forEach>
											</select>
										</c:when>
										<c:otherwise>
											<input name="custCode" id="custCode" type="hidden" value="${LoginVO.siteCode}" />
										</c:otherwise>
									</c:choose>
								</div>
							</dd>
						</dl>
					</div>
				</div>
				<div class="tbl">
					<table class="search block">
						<colgroup>
							<col width="200px">
							<col width="15%">
							<col width="200px">
							<col width="15%">
							<col width="200px">
							<col width="15%">
						</colgroup>
						<tbody>
						<tr>
							<th class="tl">Model</th>
							<td colspan="5">
								<div class="sel_box">
									<select class="wide" id="ttsProduct" name="ttsProduct">
										<option value="">Model명</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
                            <th class="tl">Pitch <em class="red" id="pitchRange"></em></th>
							<td class="tl">
								<input type="text" id="pitch" value="100">
							</td>
							<th class="tl">Speed <em class="red" id="speedRange"></em></th>
							<td class="tl">
								<input type="text" id="speed" value="100">
							</td>
							<th class="tl">Volume <em class="red" id="volumeRange"></em></th>
							<td class="tl">
								<input type="text" id="volume" value="100">
							</td>
						</tr>
						<tr class="tl" style="height: 247px">
							<th class="tl" style="height: 247px">테스트 Text</th>
							<td class="tl" colspan="5" style="height: 247px">
								<textarea id="talkText" rows="10" maxlength="500" placeholder="TTS 테스트할 문장을 500자 이하로 입력하세요."></textarea>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="cont_box">
<%--				<div>--%>
<%--					<textarea id="talkText" cols="50" rows="10"></textarea>--%>
<%--				</div>--%>
				<div class="btn_wrap fr" style =" margin: 10px 10px 10px 10px;">
					<a href="#" class="btn" id="play" data-role="play">재생</a>
					<a href="#" class="btn" id="pause" data-role="pause">정지</a>
				</div>
			</div>
		</div>

	</section>

	<div class="audio-box">
		<audio src=""></audio>
	</div>
</body>

	<script type="text/javascript">
		$(document).ready(function() {
			// 고객사 목록
			fncRetrieveTtsProduct($("#ttsProduct"));
			$("#ttsProduct").on('change', function () {
				fncRetrieveTtsProduct($(this));
			});

			$("[data-role=play]").click (function () {
				var talkText = $("#talkText").val();
				var	pitch = $("#pitch").val();
				var speed = $("#speed").val();
				var	volume = $("#volume").val();

				const regExp = /^[0-9]{1,}$/;

				var pitchRange = ($("#ttsProduct > option:selected").attr("value1")).split("~");
				var speedRange = ($("#ttsProduct > option:selected").attr("value2")).split("~");
				var volumeRange = ($("#ttsProduct > option:selected").attr("value3")).split("~");

				if (!regExp.test(pitch) || (pitchRange.length > 1 &&
								(parseInt(pitch) < parseInt(pitchRange[0]) || parseInt(pitch) > parseInt(pitchRange[1])))) {
					$.utils.warning("올바른 Pitch값을 입력해주세요");
					return false;
				} else if (!regExp.test(speed) || (speedRange.length > 1 &&
						(parseInt(speed) < parseInt(speedRange[0]) || parseInt(speed) > parseInt(speedRange[1])))) {
					$.utils.warning("올바른 Speed값을 입력해주세요");
					return false;
				} else if (!regExp.test(volume) || (volumeRange.length > 1 &&
						(parseInt(volume) < parseInt(volumeRange[0]) || parseInt(volume) > parseInt(volumeRange[1])))) {
					$.utils.warning("올바른 Volume값을 입력해주세요");
					return false;
				} else if (talkText == "") {
					$.utils.warning("테스트할 텍스트를 입력해주세요");
					return false;
				} else if (talkText.length > 500) {
					$.utils.warning("텍스트를 500자 이하로 입력해주세요");
					return false;
				}

				var data = {
					talkText : talkText,
					speed : speed,
					pitch : pitch,
					volume : volume
				}

				$.ajax({
					url: '<c:url value="/admin/rcp/learningTest/ttstest/play.do"/>',
					type: "POST",
					datatype: "JSON",
					async: false,
					data: JSON.stringify(data),
					contentType: "application/json",
					success: function(d) {
						var audio = $(".audio-box audio")[0];

						if (d.path != "") {
							audio.pause();
							audio.src = d.path;
							audio.play();
						} else {
							$.utils.error("실패하였습니다.");
						}
					}
				});
			});

			$("[data-role=pause]").click (function () {
				var audio = $(".audio-box audio")[0];
				audio.pause();
			});

		});

        function fncInitRange() {
			$("#pitchRange").html('');
			$("#speedRange").html('');
			$("#volumeRange").html('');

			var html1 = '<span> (범위 : ' + $("#ttsProduct > option:selected").attr("value1") + ') </span>';
			var html2 = '<span> (범위 : ' + $("#ttsProduct > option:selected").attr("value2") + ') </span>';
			var html3 = '<span> (범위 : ' + $("#ttsProduct > option:selected").attr("value3") + ') </span>';

            $("#pitchRange").append(html1);
            $("#speedRange").append(html2);
            $("#volumeRange").append(html3);
        }

		function fncRetrieveTtsProduct(e){
			$('#ttsProduct').empty();
			var custCode = $("#custCode").val();
			var serviceGroup = $("#mainOpr").val();

			$.ajax({
				type: "GET",
				contentType: "application/json; charset=utf-8",
				data: {
					custCode : custCode,
					serviceGroup : serviceGroup
				},
				datatype: "JSON",
				async: false,
				url : "<c:url value='/admin/rcp/learningTest/ttstest/ttsproduct.do'/>",
				success : function(data) {
					data.getList.forEach(function (e, f) {
						// $('#ttsProduct').append("<option value=" + e.minorCode + ">" + e.codeName + "</option>");

						$('#ttsProduct').append($("<option></option>").attr("value",e.minorCode)
								.attr("value1",e.attribute1).attr("value2",e.attribute2).attr("value3",e.attribute3).text(e.codeName));

					});
					$('#ttsProduct').niceSelect('update');
				}
			});

            fncInitRange();
		}

	</script>
</html>