<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<head>
<script type="text/javascript">
$(document).ready(function () {
	/* 상세보기 팝업 스크롤 생성 */
	$(".customVeiw01 .layer_in").mCustomScrollbar({
		axis: 'y',
		scrollbarPosition: "inside",
		theme: "dark",
		autoHideScrollbar: false,
		mouseWheelPixels: 300,
		scrollInertia: 600
	});	
	
	//첫 번 째 msgCtmViewCont만 보이고 나머지는 닫아두기
	$(".body_cont").find(".msgCtmViewCont").first().addClass("active");
	$(".body_cont").find(".msgCtmViewCont").not(".active").find(".msgCtmViewCont_body").css("display","none");
})



/* 상세보기 팝업 내용 보기 버튼 */
function msgCtmViewPop(obj){
	var targetHead=$(obj).closest(".msgCtmViewCont");
	var targetBody=targetHead.find(".msgCtmViewCont_body");
	
	if(targetHead.hasClass("active")){
		targetBody.stop().slideUp(450);
		targetHead.removeClass("active");
	
	}else{
		targetBody.stop().slideDown(450);
		targetHead.addClass("active");
		targetHead.siblings("div.msgCtmViewCont").removeClass("active");
		targetHead.siblings("div.msgCtmViewCont").find(".msgCtmViewCont_body").stop().slideUp(450);
	
	}
}

function selectMyCustomDetail(customGroupId) {
	if(loginVO == "" || loginVO == null){
		alert("로그인 후 이용이 가능합니다.");
		return false;
	} else {
		$("#customPopupDetailOpen").trigger("click");
	}
	
	$.ajax({
		type : 'POST'
		,url : "<c:url value='/web/mjon/custom/selectMyCustomImgRequestListAjax.do'/>"
		,data : {"customGroupId": customGroupId}
		,dataType:'json'
		,traditional : true
		,success : function(returnData, status){
			
			// 하위요소 제거
			var div = document.getElementById("divAdd");
			while (div.hasChildNodes()) {
				div.removeChild(div.firstChild);
			}
			
			var customList = returnData.customList;
			for(var i =0; i < customList.length; i++){
				
				customList[i].customType
				customList[i].customPaymentYn
				
				var htmlTemp1 = "";
				var htmlTemp2 = "";

				// 타이틀
				if(customList[i].customPaymentYn == "01"){
					htmlTemp1 = "<span class='span_1'>재작대기중</span>";
					//htmlTemp2 = "<span class='span_2_1'>작업대기중</span>";
				}else if(customList[i].customPaymentYn == "02"){
					htmlTemp1 = "<span class='span_2'>재작중</span>";
					//htmlTemp2 = "<span class='span_2_2'>재작중</span>";
				}else if(customList[i].customPaymentYn == "03"){
					htmlTemp1 = "<span class='span_1'>수정요청</span>";
					//htmlTemp2 = "<span class='span_2_1'>수정요청</span>";
				}else if(customList[i].customPaymentYn == "04"){
					htmlTemp1 = "<span class='span_2'>수정중</span>";
					//htmlTemp2 = "<span class='span_2_2'>수정중</span>";
				}else if(customList[i].customPaymentYn == "05"){
					htmlTemp1 = "<span class='span_3'>재작완료</span>";
					//htmlTemp2 = "<span class='span_2_3'>재작완료</span>";
				}
				
				// 제작형태
				if(customList[i].customType == "01"){
					htmlTemp2 = "문자고 샘플 수정(글자, 색상, 폰트 등)";
				}else if(customList[i].customType == "02"){
					htmlTemp2 = "이미지 편집(첨부 이미지 1장)";
				}else if(customList[i].customType == "03"){
					htmlTemp2 = "이미지 편집(첨부 이미지 3장이하)";
				}else if(customList[i].customType == "04"){
					htmlTemp2 = "텍스트 단순수정";
				}				
				
				// 임시 div를 이용한 clone을 생성 하여 동적 추가
				var temp_msgCtmViewCont = $('#temp_msgCtmViewCont').clone();
				temp_msgCtmViewCont = temp_msgCtmViewCont.find('div').first();
				temp_msgCtmViewCont.addClass('item_div_msgCtmViewCont') ;
				$("#divAdd").prepend(temp_msgCtmViewCont);
				
				// 리스트 타이틀 설정
				$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head .msgCtmViewCont_head_left").append(htmlTemp1);
				if(customList[i].customType == "01"){
					$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head .msgCtmViewCont_head_left").append("<p>샘플 수정</p>");
				}else if(customList[i].customType == "02"){
					$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head .msgCtmViewCont_head_left").append("<p>이미지 편집</p>");
				}else if(customList[i].customType == "03"){
					$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head .msgCtmViewCont_head_left").append("<p>이미지 편집</p>");
				}else if(customList[i].customType == "04"){
					$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head .msgCtmViewCont_head_left").append("<p>텍스트 단순수정</p>");
				}
				$('.item_div_msgCtmViewCont').find(".msgCtmViewCont_head").append("<date>"+customList[i].frstRegistPnttm+"</date>");
				
				// 리스트 상세 내역 설정
				$('.item_div_msgCtmViewCont').find("td").each(function(index, item){  //추가한 행에 id 세팅함.
					
					// 제작형태
					if($(this).attr('id') == 'customPayment'){
						$(this).append(htmlTemp2);
					}
					
					// 재공방법
					if($(this).attr('id') == 'customProvision'){
						var customProvisionText = "내보관함"
						if(customList[i].customProvision != ''){
							var provisionList = customList[i].customProvision.split(",");
							for(var j=0; j < provisionList.length; j++){
								if(provisionList[j] == "01"){
									customProvisionText += ", 카카오톡"
								}else if(provisionList[j] == "02"){
									customProvisionText += ", 이메일("+customList[i].customResultEmail+")";
								}
							}
						}
						$(this).text(customProvisionText);
					}
					
					// 연락처
					if($(this).attr('id') == 'customPhoneNo'){
						$(this).text(customList[i].customPhoneNo);
					}
					
					// 요청사항
					if($(this).attr('id') == 'customRequest'){
						$(this).text(customList[i].customRequest);
					}
					// 첨부파일
					if($(this).attr('id') == 'customUploadFlie'){
						$(this).text(customList[i].tempImg1);
					}
					
					// 선택 이미지
					if($(this).attr('id') == 'customChoiceImg'){
						$(this).find("img").attr('src',"/cmm/fms/getImage2.do?atchFileId="+customList[i].customChoiceImg+"&fileSn="+customList[i].customChoiceImgFileSn);
					}
				});
				$('.item_div_msgCtmViewCont').removeClass('item_div_msgCtmViewCont')
			}
			
			//첫 번 째 msgCtmViewCont만 보이고 나머지는 닫아두기
			$(".body_cont").find(".msgCtmViewCont").first().addClass("active").find(".msgCtmViewCont_body").css("display","block");
			$(".body_cont").find(".msgCtmViewCont").not(".active").find(".msgCtmViewCont_body").css("display","none");
		}
		,error : function(request , status, error){
			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}

</script>
</head>
<body>
	<div class="popup-com custom_layer customVeiw01" tabindex="0" data-tooltip-con="customVeiw01" data-focus="customVeiw01" data-focus-prev="customVeiw01-close">
		<div class="popup_heading">
			<p>상세보기</p>
			<button type="button" class="tooltip-close" data-focus="customVeiw01-close">
				<img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기">
			</button>
		</div>
		<div class="layer_in">
			<div class="body_cont">
				<div id="divAdd">
				
					<div class="msgCtmViewCont">
						<div class="msgCtmViewCont_head">
							<div class="msgCtmViewCont_head_left">
								<span class="span_1">수정요청</span>
								<p>텍스트 단순수정</p>
							</div>
							<date>2022-05-01</date>
							<button type="button" class="view_button" onclick="msgCtmViewPop(this)" ><i></i></button>
						</div>
						<div class="msgCtmViewCont_body">
							<table>
								<caption>제작형태, 제공방법, 연락처, 요청사항, 첨부파일, 요청이미지를 제공하는 표</caption>
								<colgroup>
									<col style="width: 105px;">
									<col style="width: auto">
								</colgroup>
								<tbody>
									<tr class="custom_view1">
										<th>제작형태</th>
										<td>
											<span class="span_2_1">작업대기중</span>
											<span class="span_2_2">재작중</span>
											<span class="span_2_3">완료</span>
										</td>
									</tr>
									<tr class="custom_view1">
										<th>제공방법</th>
										<td>내보관함, 카카오톡, 이메일(sdfajghasdk@naver.com)</td>
									</tr>
									<tr class="custom_view1">
										<th>연락처</th>
										<td>01012345678</td>
									</tr>
									<tr class="custom_view1">
										<th>요청사항</th>
										<td>예쁘게 해주세욜~!!</td>
									</tr>
									<tr class="custom_view1">
										<th>첨부파일</th>
										<td class="custom_view1_img">
											<p>123456.jpg</p>
											<p>456sadfsdaklf.jpg</p>
											<p>sdfaklfjasdlkfjasdklghasdklrfg.jpg</p>
										</td>
									</tr>
									<tr class="custom_view2">
										<th>요청이미지</th>
										<td>
											<div style="text-align: center;">
												<img src="/publish/images/content/custom_view_imsi.jpg" alt="요청이미지">
											</div>
										</td>
									</tr>			
								</tbody>
							</table>
						</div>
					</div>
				
					<div class="msgCtmViewCont">
						<div class="msgCtmViewCont_head">
							<div class="msgCtmViewCont_head_left">
								<span class="span_2">수정요청</span>
								<p>텍스트 단순수정</p>
							</div>
							<date>2022-05-01</date>
							<button type="button" class="view_button" onclick="msgCtmViewPop(this)" ><i></i></button>
						</div>
						<div class="msgCtmViewCont_body">
							<table>
								<caption>제작형태, 제공방법, 연락처, 요청사항, 첨부파일, 요청이미지를 제공하는 표</caption>
								<colgroup>
									<col style="width: 105px;">
									<col style="width: auto">
								</colgroup>
								<tbody>
									<tr class="custom_view1">
										<th>제작형태</th>
										<td><span class="span_2_1">작업대기중</span><span class="span_2_2">재작중</span><span class="span_2_3">완료</span></td>
									</tr>
									<tr class="custom_view1">
										<th>제공방법</th>
										<td>내보관함, 카카오톡, 이메일(sdfajghasdk@naver.com)</td>
									</tr>
									<tr class="custom_view1">
										<th>연락처</th>
										<td>01012345678</td>
									</tr>
									<tr class="custom_view1">
										<th>요청사항</th>
										<td>예쁘게 해주세욜~!!</td>
									</tr>
									<tr class="custom_view1">
										<th>첨부파일</th>
										<td class="custom_view1_img">
											<p>123456.jpg</p>
											<p>456sadfsdaklf.jpg</p>
											<p>sdfaklfjasdlkfjasdklghasdklrfg.jpg</p>
										</td>
									</tr>
									<tr class="custom_view2">
										<th>요청이미지</th>
										<td>
											<div style="text-align: center;">
												<img src="/publish/images/content/custom_view_imsi.jpg" alt="요청이미지">
											</div>
										</td>
									</tr>			
								</tbody>
							</table>
						</div>
					</div>
					
					<div class="msgCtmViewCont">
						<div class="msgCtmViewCont_head">
							<div class="msgCtmViewCont_head_left">
								<span class="span_2">수정요청</span>
								<p>텍스트 단순수정</p>
							</div>
							<date>2022-05-01</date>
							<button type="button" class="view_button" onclick="msgCtmViewPop(this)" ><i></i></button>
						</div>
						<div class="msgCtmViewCont_body">
							<table>
								<caption>제작형태, 제공방법, 연락처, 요청사항, 첨부파일, 요청이미지를 제공하는 표</caption>
								<colgroup>
									<col style="width: 105px;">
									<col style="width: auto">
								</colgroup>
								<tbody>
									<tr class="custom_view1">
										<th>제작형태</th>
										<td><span class="span_2_1">작업대기중</span><span class="span_2_2">재작중</span><span class="span_2_3">완료</span></td>
									</tr>
									<tr class="custom_view1">
										<th>제공방법</th>
										<td>내보관함, 카카오톡, 이메일(sdfajghasdk@naver.com)</td>
									</tr>
									<tr class="custom_view1">
										<th>연락처</th>
										<td>01012345678</td>
									</tr>
									<tr class="custom_view1">
										<th>요청사항</th>
										<td>예쁘게 해주세욜~!!</td>
									</tr>
									<tr class="custom_view1">
										<th>첨부파일</th>
										<td class="custom_view1_img">
											<p>123456.jpg</p>
											<p>456sadfsdaklf.jpg</p>
											<p>sdfaklfjasdlkfjasdklghasdklrfg.jpg</p>
										</td>
									</tr>
									<tr class="custom_view2">
										<th>요청이미지</th>
										<td>
											<div style="text-align: center;">
												<img src="/publish/images/content/custom_view_imsi.jpg" alt="요청이미지">
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				
				</div>
				
				<div id="temp_msgCtmViewCont" style="display: none;">
					<div class="msgCtmViewCont">
						<div class="msgCtmViewCont_head">
							<div class="msgCtmViewCont_head_left">
							</div>
							<button type="button" class="view_button" onclick="msgCtmViewPop(this)" ><i></i></button>
						</div>
						<div class="msgCtmViewCont_body">
							<table>
								<caption>제작형태, 제공방법, 연락처, 요청사항, 첨부파일, 요청이미지를 제공하는 표</caption>
								<colgroup>
									<col style="width: 105px;">
									<col style="width: auto">
								</colgroup>
								<tbody>
									<tr class="custom_view1">
										<th>제작형태</th>
										<td id="customPayment"></td>
									</tr>
									<tr class="custom_view1">
										<th>제공방법</th>
										<td id="customProvision">내보관함, 카카오톡, 이메일(sdfajghasdk@naver.com)</td>
									</tr>
									<tr class="custom_view1">
										<th>연락처</th>
										<td id="customPhoneNo"></td>
									</tr>
									<tr class="custom_view1">
										<th>요청사항</th>
										<td id="customRequest"></td>
									</tr>
									<tr class="custom_view1">
										<th>첨부파일</th>
										<td class="custom_view1_img" id="customUploadFlie">
											<p>123456.jpg</p>
											<p>456sadfsdaklf.jpg</p>
											<p>sdfaklfjasdlkfjasdklghasdklrfg.jpg</p>
										</td>
									</tr>
									<tr class="custom_view2">
										<th>요청이미지</th>
										<td id="customChoiceImg">
											<div style="text-align: center;">
												<img src="/publish/images/content/custom_view_imsi.jpg" alt="요청이미지">
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				
				<div class="custom_btn" style="justify-content: center;">
					<button type="button" class="tooltip-close" data-focus="customVeiw01-close" data-focus-next="customVeiw01">닫기</button>
				</div>
			</div>
		</div>
	</div>
</body>
