<%
/**
 * <pre>
 * @Class Name : insertQnaForm.jsp
 * 
 * @Description : 묻고답하기 등록화면을 표출한다. 
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 13.    KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 7. 13.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<c:set var="pageTitle">Q&amp;A</c:set>

<c:if test='${searchArticle.articleId != null and searchArticle.articleId != ""}'>
    <c:set var="pageTitleSub">수정</c:set>
</c:if>
<c:if test='${searchArticle.articleId == null or searchArticle.articleId == ""}'>
    <c:set var="pageTitleSub">등록</c:set>
</c:if>

<!-- File Upload : 시작-->
<script src="${pageContext.request.contextPath}/js/fileupload/dropzone.js"></script>
<!-- File Upload : 종료 -->

<!-- SmartEditor : 시작 -->
<script src="${pageContext.request.contextPath}/js/smartEditor/js/service/HuskyEZCreator.js"></script>
<!-- SmartEditor : 종료 -->


<script>
var myDropzone = null;      <% // 파일드롭다운 객체 %>
var fileList = new Array(); <% // 업로드된 파일 정보 %>
var delFileList = new Array(); <% // 삭제된 파일 정보 %>
var IN_PROC = false;        <% // 현재 상태가 업로드처리중에 있는지 여부 %>
var isModified = false; 

var oEditors = [];


$(window.document).ready(function() {

    if(!fn_isEmpty('${message}')) {
        alert("${message}");
    } 
    
    /**
     * 스마트 에디터
     */
    nhn.husky.EZCreator.createInIFrame({
     oAppRef: oEditors,
     elPlaceHolder: "content",
     sSkinURI: "${pageContext.request.contextPath}/js/smartEditor/SmartEditor2Skin.html",
     fCreator: "createSEditor2"
    });
    
	//--------------------------------------------------------------------
	// 파일 업로드 처리 : 시작 
    //--------------------------------------------------------------------
    // 파일업로드 객체 생성 
    myDropzone = new Dropzone("form#myDropzone", { 
    	url: "${pageContext.request.contextPath}/fileupload/uploadFilesAjax.do?subPathKey=fileupload.bbs.qna.subpath&attachFileId=${searchArticle.bdAttachFileId}"
    	});

    // 기존 첨부파일 출력
    <c:if test="${searchArticle.attachFileCnt > 0}">
    var re = /(?:\.([^.]+))?$/;
    <c:forEach var="attachFile" items="${searchArticle.attachFiles }" varStatus="status">
    myDropzone.addFile({
    	name: '${attachFile.orignlFileNm}', 
    	size:${attachFile.fileSize}, 
    	type:re.exec('${attachFile.orignlFileNm}')[1],
    	attachFileId: '${attachFile.attachFileId}',
    	streFileNm: '${attachFile.streFileNm}',
    	fileSn: '${attachFile.fileSn}',
    	fileUploadType: 'uploaded'
    });
    </c:forEach>
    </c:if>
    
    // 각 파일별 업로드 성공시 호출됨 (1th called)
    myDropzone.on("success", function(file, responseText) {
    	var jobj = JSON.parse(responseText);
    	console.log("file upload success : responseText = " + responseText);
    	console.log("fileUpDone count : " + fileList.length);
    	var idx = fileList.length;
    	fileList[idx++] = {
    			"attachFileId" : jobj[0].attachFileId,
                "streFileNm"   : jobj[0].streFileNm,
                "orignlFileNm" : jobj[0].orignlFileNm,
                "fileExt"      : jobj[0].fileExt,
                "fileSn"       : jobj[0].fileSn,
    			"fileSize"     : jobj[0].fileSize
    	};
        console.log("success : " + file.name + " -> " + "data > " + jobj[0].streFileNm);
      });
    
    /*
    myDropzone.on("error", function(file, message) {
    	myDropzone.removeFile(file);
        alert(message);
      });
    */
    
    myDropzone.on("removedfile", function(file) {
        var idx = delFileList.length;
        if(!fn_isEmpty(file.streFileNm) && !fn_isEmpty(file.fileSn)) {
            delFileList[idx++] = {
                    "attachFileId" : file.attachFileId,
                    "streFileNm"   : file.streFileNm,
                    "fileSn"       : file.fileSn
            };
        }
    });

    // 각 파일별 업로드 처리 완료 시 호출됨 (2th called)
    myDropzone.on("complete", function(file) {
         console.log("개별 파일 처리 완료 > file = " + JSON.stringify(file));
    });
	
    // 모든 업로드 처리 완료 시 호출됨 
    myDropzone.on("queuecomplete", function() {
        var targetCnt = this.getAcceptedFiles().length;
        var uploadCnt = fileList.length;
        var queuedCnt = this.getQueuedFiles();
        
        if(uploadCnt > 0) {
        	$("#fileList").val(JSON.stringify(JSON.stringify(fileList)));	
        }
        if(IN_PROC) {
            if(queuedCnt > 0 && targetCnt > 0 && targetCnt != uploadCnt) {
                alert("일부 첨부파일 등록이 실패하였습니다.\n총 " + targetCnt + "건의 첨부파일 중 " + uploadCnt + "건이 정상적으로 업로드 되었습니다.\n글 등록을 계속 진행합니다.");
            }
            
            fn_saveSubmit();
        }
    });
    
    //--------------------------------------------------------------------
    // 파일 업로드 처리 : 종료  
    //--------------------------------------------------------------------
    
    

});

function fn_getContent() {
    oEditors.getById["content"].exec("UPDATE_CONTENTS_FIELD");
}

// 목록으로 이동 
function fn_list() {
	
	if(!fn_isEmpty($("#articleForm #title").val()) || !fn_isEmpty($("#articleForm #content").val())) {
		if(!confirm("작성중인 글이 있습니다. 취소하시겠습니까?")) return;
	}
	
    $('#articleForm').removeAttr('onsubmit');

    $("#articleForm").attr("action", "${pageContext.request.contextPath}/bbs/listQnas.do");
    $("#articleForm").submit();
}

var MAX_LEN_OF_CONTENT = 65000; // 내용 최대 길이 


//등록버튼 클릭 
function fn_pressSaveBtn() {
	$("#articleForm").submit();
}

// 등록 처리 
function fn_save() {

    // 스마트에디터의 내용 적용 
    fn_getContent();

    // 내용 작성 유무 
    if(fn_isEmpty($("#title").val())) {
        alert("제목을 입력하여 주시기 바랍니다.");
        $("#title").focus();
        return false;
    }

    // 내용 작성 유무 
    var ctext = fn_extractContentText($("#content").val());
    if(ctext.trim() == "") {
        alert("내용을 입력하여 주시기 바랍니다.");
        oEditors.getById["content"].exec("FOCUS");
        return false;
    }
    
    // 내용 길이 체크 
    var contentLen = fn_lengthBytes($("#content").val());
    if(contentLen > MAX_LEN_OF_CONTENT) {
        alert("내용의 길이는 " + MAX_LEN_OF_CONTENT + " bytes를 초과할 수 없습니다.");
        oEditors.getById["content"].exec("FOCUS");
        return false;
    }

    
    if(!confirm("저장하시겠습니까?")) return false;

    <c:if test='${searchArticle.articleId != null and searchArticle.articleId != ""}'>
    // 수정 
    $("#articleForm").attr("action", "${pageContext.request.contextPath}/bbs/updateQnaArticle.do");
    </c:if>
    
    <c:if test='${searchArticle.articleId == null or searchArticle.articleId == ""}'>
    // 등록  
    $("#articleForm").attr("action", "${pageContext.request.contextPath}/bbs/insertQnaArticle.do");
    </c:if>
	
    IN_PROC = true;
    
    $("#delFileList").val(JSON.stringify(JSON.stringify(delFileList)));   
    
    // 파일 업로드 처리
    if(myDropzone.getAcceptedFiles().length > 0) {
        myDropzone.processQueue();
        return false;
    } 
    
    return true;
}

//등록 처리 
function fn_saveSubmit() {
	$('#articleForm').removeAttr('onsubmit');
    $("#articleForm").submit();
}


//파일 다운로드
function fn_downloadFile(attachFileId, fileSn) {
	
	if(attachFileId == null || attachFileId.trim().length < 1) {
	   alert("파일정보를 확인해 주시기 바랍니다.[1]");
	   return;
	}
	
	if(fileSn < 1) {
	    alert("파일정보를 확인해 주시기 바랍니다.[3]");
	    return;
	}
	$("#attachFileId").val(attachFileId);
	$("#fileSn").val(fileSn);
	
	$("#downloadFileForm").submit();
	
}
</script>


    <!-- Q&amp;A 섹션 -->
    <div class="location qna-data">
        <h2 class="blind">Q&amp;A 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="location-box">
                    <ul class="loc">
                        <li>HOME</li>
                        <li>고객지원</li>
                        <li class="on">${pageTitle }</li>
                    </ul>
                    <ul class="tit">
                        <li><span>${pageTitle } ${pageTitleSub }</span></li>
                    </ul>
                </div>
                <div class="arr"><img src="/images/icon/icon-join-arr2.png" alt="화살표 아이콘"></div>
            </div>
            <div class="contents row-bottom">
                
                <div class="community qna">
                    <div class="contents-frame inner-center">
                        <div class="community-write">
                                    <p class="required-text"><span>*</span> 표시는 필수 입력 항목입니다.</p>
                                    <form name="articleForm" id="articleForm" method="post" onsubmit="return fn_save();">
                                    <fieldset>
                                    <legend>Q&amp;A 작성</legend>
                                    <input type="hidden" name="pageIndex"       id="pageIndex"       title="페이지번호"        value="${searchArticle.pageIndex}"      />
                                    <input type="hidden" name="pageSize"        id="pageSize"        title="목록에 보여줄 글개수" value="${searchArticle.pageSize}"       />
                                    <input type="hidden" name="searchType"      id="searchType"      title="검색구분"         value="${searchArticle.searchType}"     />
                                    <input type="hidden" name="searchKeyword"   id="searchKeyword"   title="검색어"           value="${searchArticle.searchKeyword}"  />
                                    <input type="hidden" name="articleId"       id="articleId"       title="선택글번호"        value="${searchArticle.articleId}"      />
                                    <input type="hidden" name="fileList"        id="fileList"        title="첨부파일정보" />
                                    <input type="hidden" name="delFileList"     id="delFileList"     title="삭제첨부파일정보" />
                                    <input type="hidden" name="bdAttachFileId"  id="bdAttachFileId"  value="${searchArticle.bdAttachFileId}" />
                                    <div class="qna-write-table">
                                        <ul>
                                            <li class="wt-title fl">
                                                <div class="w-tit">제목</div>
                                                <div class="w-form">
                                                    <input type="text" name="title" id="title" title="제목" value="${searchArticle.title}" size="100" maxlength="200" class="grid-1" placeholder="제목을 입력하세요." required />
                                                </div>
                                            </li>
                                            <li class="wt-secret fl check">
                                                <div class="w-tit">
                                                    <input type="checkbox" name="secretYn" id="secretYn" value="Y"
                                                            <c:if test='${searchArticle.secretYn == "Y" }'> checked </c:if> />
                                                    <label for="secretYn">비밀글</label>
                                                </div>
                                            </li>
                                            <li class="wt-mail check">
                                                <div class="w-tit">답변메일 수신여부</div>
                                                <div class="w-form">
                                                    <input type="checkbox" name="emailRecvYn" id="emailRecvYn" value="Y" <c:if test='${searchArticle.emailRecvYn == "Y" }'> checked </c:if> />
                                                    <label for="emailRecvYn"> (답변 수신메일 주소는 내 정보에서 수정하실 수 있습니다.)</label>
                                                </div>
                                            </li>
                                            <li class="wt-question">
                                                <div class="w-tit">내용</div>
                                                <div class="w-form">
                                                    <textarea name="content" id="content" cols="80" rows="10" placeholder="질문하실 내용을 입력하세요.">${searchArticle.content}</textarea>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
	                                </fieldset>
	                                </form>
			                                
                                    <div class="qna-write-table">
                                        <ul>
                                            <li class="wt-attachments">
                                                <div class="w-tit">첨부파일</div>
                                                <div id="dropzone" class="w-form">
                                                    <form id="myDropzone" name="myDropzone" 
                                                        action="${pageContext.request.contextPath}/fileupload/uploadFile.do" 
                                                        class="dropzone needsclick" >
                                                      <div class="dz-message needsclick" style="cursor:pointer">
                                                        <button type="button" id="attachFileBtn" name="attachFileBtn" class="attachments-btn">파일첨부</button>
                                                        <label for="attachFileBtn">※ 이곳에 파일을 끌어다 놓거나(Drag&Drop), 클릭하여 파일을 선택하세요.</label>
                                                      </div>
                                                    </form>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="btn-wrap">
                                        <button type="button" name="btnSave" id="btnSave" title="저장버튼" class="btn btn-color" onclick="fn_pressSaveBtn()">저장</button>
                                        <button type="button" name="btnCancel" id="btnCancel" title="취소버튼" class="btn btn-gray" onclick="fn_list()">취소</button>
                                    </div>
                        </div>
                    </div><!-- //contents-frame -->
                </div>
                
            </div>
        </div>
    </div>

<!-- 첨부파일 다운로드용 폼 -->
<form name="downloadFileForm" id="downloadFileForm"
      action="${pageContext.request.contextPath}/fileupload/downloadAttachFile.do"
      method="post">
      <input type="hidden" name="bdType" id="bdType" value="ANCMNT" />
      <input type="hidden" name="attachFileId" id="attachFileId" value=""  />
      <input type="hidden" name="streFileNm" id="streFileNm" value=""  />
      <input type="hidden" name="fileSn" id="fileSn" value=""  />
      <input type="hidden" name="orignlFileNm" id="orignlFileNm" value=""  />
</form>
