<%
/**
 * <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:if test='${searchArticle.articleId != null and searchArticle.articleId != ""}'>
    <c:set var="pageTitle">Q&A - 수정</c:set>
</c:if>
<c:if test='${searchArticle.articleId == null or searchArticle.articleId == ""}'>
    <c:set var="pageTitle">Q&A - 등록</c:set>
</c:if>

<!DOCTYPE html>
<html>
<head>
<title>${pageTitle}</title>

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

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


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

var oEditors = [];


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

	//--------------------------------------------------------------------
	// 파일 업로드 처리 : 시작 
    //--------------------------------------------------------------------
    // 파일업로드 객체 생성 
    myDropzone = new Dropzone("form#myDropzone", { url: "${pageContext.request.contextPath}/fileupload/uploadFilesAjax.do?subPathKey=fileupload.bbs.qna.subpath"});
    
    // 각 파일별 업로드 성공시 호출됨 (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] = {
    			"fileMask" : jobj[0].fileMask,
                "fileId" : jobj[0].fileId,
                "fileSeq" : (idx+1),
    			"fileName" : jobj[0].fileName,
    			"fileSize" : jobj[0].fileSize,
    			"atchTypeCd" : jobj[0].atchTypeCd,
    	};
        console.log("success : " + file.name + " -> " + "data > " + jobj[0].streFileNm);
      });

    // 각 파일별 업로드 처리 완료 시 호출됨 (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;

        if(uploadCnt > 0) {
        	$("#fileList").val(JSON.stringify(JSON.stringify(fileList)));	
        }
        if(IN_PROC) {
            if(targetCnt > 0 && targetCnt != uploadCnt) {
                alert("일부 첨부파일 등록이 실패하였습니다.\n총 " + targetCnt + "건의 첨부파일 중 " + uploadCnt + "건이 정상적으로 업로드 되었습니다.\n글 등록을 계속 진행합니다.");
            }
            
            fn_saveSubmit();
        }
    });
    
    //--------------------------------------------------------------------
    // 파일 업로드 처리 : 종료  
    //--------------------------------------------------------------------
    
    
    
    /**
     * 스마트 에디터
     */
    nhn.husky.EZCreator.createInIFrame({
     oAppRef: oEditors,
     elPlaceHolder: "content",
     sSkinURI: "${pageContext.request.contextPath}/js/smartEditor/SmartEditor2Skin.html",
     fCreator: "createSEditor2"
    });

});

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_save() {

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

    // 내용 작성 유무 
    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;
    
    // 파일 업로드 처리
    if(myDropzone.getAcceptedFiles().length > 0) {
        myDropzone.processQueue();
        return false;
    } 
    
    return true;
}

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

</script>
</head>

<body>

<h1>${pageTitle }</h1>

메시지 : <span style="color:red;">${message }</span>
<br />

<form name="articleForm" id="articleForm"  
      method="post"
      onsubmit="return fn_save();"> 
    
    <!-- HIDDEN 영역 : 시작 -->
    <input type="text" name="pageIndex"       id="pageIndex"       title="페이지번호"        value="${searchArticle.pageIndex}"     readonly />
    <input type="text" name="pageSize"        id="pageSize"        title="목록에 보여줄 글개수" value="${searchArticle.pageSize}"      readonly />
    <input type="text" name="searchType"      id="searchType"      title="검색구분"         value="${searchArticle.searchType}"    readonly />
    <input type="text" name="searchKeyword"   id="searchKeyword"   title="검색어"           value="${searchArticle.searchKeyword}" readonly />
    <input type="text" name="articleId"       id="articleId"       title="선택글번호"        value="${searchArticle.articleId}"     readonly />
    <!-- HIDDEN 영역 : 종료 -->
    
	&nbsp;<br/>
	&nbsp;<br/>

    <table class="table_content" style="width:100% !important;">
        <tr>
            <th>제목</th>
            <td><input type="text" name="title" id="title" title="제목" value="${searchArticle.title}" size="100" maxlength="200" required />
            <br>
            ${title}
            </td>
        </tr>
        <tr>
            <th>작성자</th>
            <td>
                <input type="text" name="regId" id="regId" title="작성자" value="${searchArticle.loginedMbInfoId}" size="100" maxlength="200" readonly />
                <input type="text" name="regName" id="regName" title="작성자" value="${searchArticle.loginedName}" size="100" maxlength="200" readonly />
            </td>
        </tr>
        <tr>
            <th>비밀글</th>
            <td><input type="checkbox" name="searchArticle.secretYn" id="searchArticle.secretYn" title="비밀글" value="Y"
                <c:if test='${searchArticle.secretYn == "Y" }'> checked </c:if>
                /><br/>
            </td>
        </tr>
        <tr>
            <th>답변메일 수신여부</th>
            
            <td><input type="checkbox" name="searchArticle.emailRecvYn" id="searchArticle.emailRecvYn" title="답변메일 수신여부" value="Y"
                <c:if test='${searchArticle.emailRecvYn == "Y" }'> checked </c:if>
                />
            ${searchArticle.email}
            (답변 수신메일 주소는 내 정보에서 수정하실 수 있습니다.) 
            <br/>
            </td>
        </tr>
        <tr>
            <th>질문내용</th>
            <td><textarea name="content" id="content" cols="80" rows="10">${searchArticle.content}</textarea> <br/>
            </td>
        </tr>
    </table>        
    
    <br/>
    <input type="input" name="fileList" id="fileList" title="첨부파일정보" />
    <input type="button" name="btnCancel" id="btnCancel" title="취소버튼" class="float" value="취소"
        onclick="fn_list()" />
    <input type="submit" name="btnSave" id="btnSave" title="저장버튼" class="float" value="저장" />

</form>

&nbsp;<br/>
&nbsp;<br/>
&nbsp;<br/>

<div id="dropzone">
    <form id="myDropzone" name="myDropzone" 
        action="${pageContext.request.contextPath}/fileupload/uploadFile.do" 
        class="dropzone needsclick" >
      <div class="dz-message needsclick">
        <button type="button" class="dz-button">Drop files here or click to select files.</button><br />
        <span class="note needsclick">이곳에 파일을 끌어다 놓거나, 클릭하여 올릴 파일을 선택하세요.</span>
      </div>
    </form>
</div>

</body>
</html>
