<%@ page 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="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%   
	response.setHeader("Cache-Control","no-store");   
	response.setHeader("Pragma","no-cache");   
	response.setDateHeader("Expires",0);   
	if (request.getProtocol().equals("HTTP/1.1")) response.setHeader("Cache-Control", "no-cache"); 
%> 
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/direct/css/font.css">
<link rel="stylesheet" href="/direct/css/reset.css">
<!-- <link rel="stylesheet" href="/direct/css/file_upload.css"> -->
<link rel="stylesheet" href="/direct/css/file_upload_2.css">
<script src="/direct/js/jquery-1.11.3.min.js"></script>
<script src="/direct/js/jquery-ui.min.js"></script>
<script src="/direct/js/popup_open_2.js"></script>
<script type="text/javascript" src="<c:url value='/js/EgovMultiFile.js'/>"></script>   
<script type="text/javascript" src="/js/audit/audit.common.js"></script>   
<script type="text/javaScript" language="javascript">
$( document ).ready(function() {
	
	//상단 selectbox change 이벤트 
	$("#upload_list").on( "change", function() {  
		$('#upload_list_detail').html($('#span_option_'+this.value).html().trim())
	});
	
	
	var objDragAndDrop = $(".file_upload_box");
    $(document).on("dragenter",".file_upload_box",function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    $(document).on("dragover",".file_upload_box",function(e){
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on("drop",".file_upload_box",function(e){
        $(this).css('border', '2px dotted #0B85A1');
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        handleFileUpload(files,objDragAndDrop);  //파일업로드
    });
     
    $(document).on('dragenter', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function (e){
      e.stopPropagation();
      e.preventDefault();
      objDragAndDrop.css('border', '2px dotted #0B85A1');
    });
    $(document).on('drop', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
     
    function handleFileUpload(files,obj)  //업로드 function
    {
       var limitsize = 50*1024*1024;  //파일 제한 체크(50개, 50MB)
       var limitcount = 50;
       if($('#tbody_fiielist').find('tr').length + files.length > limitcount ){
    	   alert("업로드 파일은 최대 50개 입니다.");
    	   return ;
       } 
       for (var i = 0; i < files.length; i++){ 
    	   if(files[i].size > limitsize){
    		   alert(files[i].name+"파일 사이즈가"+getStrFileSize(files[i].size)+"로 50MB이하만 업로드 가능합니다.");
    		   return ;
    	   }
       }
    	
       for (var i = 0; i < files.length; i++)
       {
            var fd = new FormData();
            fd.append('file', files[i]);
            sendFileToServer(fd, obj, files[i]);
            var totalfileSize = 0;
	       	$('.totalfileCount').text($('.item_file_size').length) ;
	       	$('.item_file_size').each(function(){
	       		totalfileSize += $(this).val()*1 ;
	       	});
	       	$('.totalfileSize').text(getStrFileSize(totalfileSize)) ; 
       }
    }
     
    function sendFileToServer(formData, obj , fileObj)
    {
    	formData.append('autId', '${auditItemVO.autId}'); //데이터 추가
    	formData.append('autKinds', '${auditItemVO.autKinds}');
    	formData.append('autFlag', '${auditItemVO.autFlag}');
    	formData.append('evitId', '${evalVO.evitId}');
    	
    	var uploadURL = "/uss/itsm/sla/EvalItemFileUploadExe.do"; //Upload URL
        var extraData ={}; //Extra Data.
        var jqXHR=$.ajax({
                xhr: function() {
                var xhrobj = $.ajaxSettings.xhr();
                if (xhrobj.upload) {
                        xhrobj.upload.addEventListener('progress', function(event) {
                            var percent = 0;
                            var position = event.loaded || event.position;
                            var total = event.total;
                            if (event.lengthComputable) {
                                percent = Math.ceil(position / total * 100);
                            }
                        }, false);
                    }
                return xhrobj;
            },
            url: uploadURL,
            type: "POST",
            dataType:'jsonp',
            contentType:false,
            processData: false,
            cache: false,
            data: formData,
            async: false,
            success: function(returnData , status){
                if(returnData.result == 'auth_fail'){
                	alert("세션이 종료되었습니다.");
                }else if(returnData.result == 'success'){
        			 $('.upload_box_img').hide();  //list 박스 형식 변경
			         $('.upload_box_text').hide();
			         $('.uploaded_obj').show();
			         var list_html = "";
			         list_html += '<tr class="tr_upload_'+returnData.auditItemVO.autItemId+'">';
		        	 list_html += '<td><img src="'+getfile_img(fileObj.name)+'" alt="">'+fileObj.name+'</td>';
		        	 list_html += '<td>'+getDate()+'</td>';
		        	 list_html += '<td>'+getStrFileSize(fileObj.size)+'</td>';
		        	 list_html += '<td><img src="/direct/img/upload_delect_img.png" alt="" onclick="delete_item(\''+returnData.auditItemVO.autItemId+'\' , \'tr_upload_\'); return false;"></td>';
		        	 list_html += '<input type="hidden" class="item_file_size" value="'+fileObj.size+'">';
		        	 list_html += '<input type="hidden" name="autItemIds" value="'+returnData.auditItemVO.autItemId+'">';
		        	 list_html += '</tr>';
		        	 $('#tbody_fiielist').append(list_html);
        		}
            }
        }); 
    }
});

/* 삭제버튼 클릭시 */
function delete_item(itemId , delObject){
	if(!confirm("삭제하시겠습니까?")){
		return false;
	}
	event.preventDefault();
	$.ajax({
	    type: "POST",
	    url: "/uss/itsm/audit/SciTecAuditItemDeleteAjax.do",
	    data:{ "autItemId" : itemId},
	    dataType:'jsonp',
	    cache: false,
	    async: false,
	    timeout: 600000,
	    success: function (returnData, status) {
	    	if(status == 'success'){
	        	if(returnData.result == 'fail'){
	        		alert("삭제에 실패하였습니다.");
	        	}else if(returnData.result == 'auth_fail'){
	        		alert("세션이 종료되었습니다.");
	        		window.self.close() ;
	        	}else if(returnData.result =='success'){
	        		$('.'+delObject+itemId).remove();
	        		opener.self_reload();
	        	}
	        }else{
	        	alert("삭제에 실패하였습니다.");
	        }
	    },
	    error: function (e) {
	        alert("삭제에 실패하였습니다.");
	        setButtonDisableEvent("F") ;
	    }
	});
	
	if($('.item_file_size').length == 0){
		 $('.upload_box_img').show();
         $('.upload_box_text').show();
         $('.uploaded_obj').hide();
	}else{
		var totalfileSize = 0;
	   	$('.totalfileCount').text($('.item_file_size').length) ;
	   	$('.item_file_size').each(function(){
	   		totalfileSize += $(this).val()*1 ;
	   	});
	   	$('.totalfileSize').text(getStrFileSize(totalfileSize)) ; 	
	}
}

/* 등록버튼 클릭시 임시파일들 N으로 업데이트 */
function insert_confirm(){
	if($('#tbody_fiielist').find('tr').length == 0){
		alert("등록된 첨부파일이 없습니다.");
		return;
	}
	if(!confirm("등록하시겠습니까?")){
		return false;
	}
	event.preventDefault();
	var frm = document.fileListForm;
	var data = new FormData(frm);
	$.ajax({
	    type: "POST",
	    url: "/uss/itsm/audit/SciTecAuditItemInsertComfirmAjax.do",
	    data: data,
	    dataType:'jsonp',
	    async: false,
	    processData: false,
	    contentType: false,
	    cache: false,
	    timeout: 600000,
	    success: function (returnData, status) {
	    	if(status == 'success'){
	        	if(returnData.result == 'fail'){
	        		alert("등록에 실패하였습니다.");
	        	}else if(returnData.result == 'auth_fail'){
	        		alert("세션이 종료되었습니다.");
	        		if(opener !=null){
	        			opener.location.reload();
	        		}
	        		window.self.close() ;
	        	}else if(returnData.result =='success'){
	        		alert("등록되었습니다.");
	        		if(opener != null){
	        			opener.self_reload();
	        		}
	        	}
	        }else{
	        	alert("등록에 실패하였습니다.");
	        }
	    },
	    error: function (e) {
	        alert("등록에 실패하였습니다.");
	    }
	});
}

/* 취소버튼 클릭 */
function click_cancel(){
	$('#tbody_fiielist').find('tr').remove(); ;
	$('.upload_box_img').show();
    $('.upload_box_text').show();
    $('.uploaded_obj').hide();
}	

</script>
</head>
<body>
<form name="fileListForm" method="post">
<input type="hidden" name="autId" value="${auditVO.autId}"/>
<input type="hidden" name="autCd" value="${auditVO.autCd}" />
<input type="hidden" name="autFlag" value="${auditItemVO.autFlag}" />
<input type="hidden" name="autKinds" value="${auditItemVO.autKinds}" />		
<input type="hidden" name="evitId" value="${evalVO.evitId}" />
    <div class="file_upload_popup">
        <div class="file_upload_title">첨부파일등록
        </div>
        <div class="file_upload_box">
            <img class="upload_box_img" src="/direct/img/upload_img.png" alt="" style="margin-top: 60px;">
            <div class="upload_box_text">
                <span class="file_upload_text_1">첨부파일 올리기</span>
                <span class="file_upload_text_2">(파일을 끌어다 놓으세요)</span>
            </div>
             
             <table class="uploaded_obj" style="display:none;">
                 <thead>
                     <tr>
                         <th>파일명</th>
                         <th>등록일시</th>
                         <th>크기</th>
                         <th>삭제</th>
                     </tr>
                 </thead>
             </table>
             <div class="file_list uploaded_obj" style="display:none;">
                 <table>
                     <tbody id="tbody_fiielist">
                     </tbody>
                 </table>
             </div>
             <table class="uploaded_obj" style="display:none;">
                 <tfoot>
                     <tr>
                         <td>최대 <span class="upload_number">50</span>개 ｜ <span class="upload_number">50MB(개당)</span> 제한</td>
                         <td><span class="upload_number totalfileCount">3</span>개 ｜ <span class="upload_number totalfileSize">3.75</span></td>
                     </tr>
                 </tfoot>
             </table>
            
        </div>
        <div class="upload_btns">
            <input type="button" value="등록" onclick="insert_confirm(); return false;">
            <input type="button" value="취소" onclick="click_cancel(); return false;">
        </div>
    </div>
    
    <!-- selectbox 미리만들기 -->
    <c:forEach var="codeResult" items="${cmmCodeList}" varStatus="status">
    	<span id="span_option_${codeResult.codeId}" style="display:none;">	
    	<c:forEach var="detailResult" items="${cmmDetailCodeList}" varStatus="status"><c:if test="${codeResult.codeId eq detailResult.codeId}"><option value="${detailResult.code}">${detailResult.codeNm}</option></c:if></c:forEach>
     	</span>
     </c:forEach>
</form>     
</body>
</html>