<%@ 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
<link rel="stylesheet" href="/direct/css/nice-select.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 src="/direct/js/jquery.nice-select.js"></script>   
<script type="text/javascript" src="/js/audit/audit.common.js"></script>   
<script type="text/javaScript" language="javascript">
var delAutItemId = new Array();
$(window).bind("beforeunload", function (e){
	$('.imsi').each(function(index, item){
		delAutItemId.push($(this).attr('value')) ;
	});
	
	if(delAutItemId.length !=0){
		$.ajax({
		    type: "POST",
		    url: "/uss/itsm/audit/SciTecAuditItemClsDeleteAjax.do",
		    data:{  "del": delAutItemId.toString()},
		    dataType:'jsonp',
		    cache: false,
		    async: false,
		    success: function (returnData, status) {
		    	if(status == 'success'){
		        	if(returnData.result == 'fail'){
		        	}else if(returnData.result == 'auth_fail'){
		        	}else if(returnData.result =='success'){
		        	}
		        }else{
		        }
		    },
		    error: function (e) {
		    } 
		});
	}
});

$( document ).ready(function() {
	
	//상단 selectbox change 이벤트 
	$("#upload_list").on( "change", function() {  
		
		$('#upload_list_detail').html($('#span_option_'+this.value).html().trim());
		$("#upload_list_detail").niceSelect('update');
	});
	
	
	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('autAttfile1dep', $('#upload_list').val());
    	formData.append('autAttfile2dep', $('#upload_list_detail').val());
    	
    	var uploadURL = "/uss/itsm/audit/SciTecAuditFileUploadExe.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" class="imsi" value="'+returnData.auditItemVO.autItemId+'">';
		        	 list_html += '</tr>';
		        	 $('#tbody_fiielist').append(list_html);
        		}
            }
        }); 
    }
    
    $('select').niceSelect();


    $(function(){  //단일 파일업로드
		$('#file_temp').change(function(e){
	   	   var objUpload = $(".file_upload_box");
	   	   var files = $('#file_temp')[0].files;
	   	   handleFileUpload(files,objUpload);  //파일업로드 
	   	});
	 });
});


/* 파일등록 */
var _fileIdx = 0;
var _fileForm2 = new Array();

/* 삭제버튼 클릭시 */
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();
	        		if(opener.close_del!=undefined){
	        			opener.close_del = false;
	        		}
	        		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){
	        			if(opener.close_del!=undefined){
		        			opener.close_del = false;
		        		}
	        			
	        			$('input[name=autItemIds]').each(function(index, item){
	        				$(this).removeAttr("class", "imsi") ;
	        			});
	        			opener.self_reload();
	        			window.self.close();
	        		}
	        	}
	        }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();
    self.close();
}	

</script>
</head>
<body>
<form name="fileListForm" method="post">
<input type="hidden" name="autId" value="<c:out value='${auditVO.autId}'/>"/>
<input type="hidden" name="autCd" value="<c:out value='${auditVO.autCd}'/>" />
<input type="hidden" name="autFlag" value="<c:out value='${auditItemVO.autFlag}'/>" />
<input type="hidden" name="autKinds" value="<c:out value='${auditItemVO.autKinds}'/>" />		
    <div class="file_upload_popup">
        <div class="file_upload_title">첨부파일등록
            <select name="upload_list" id="upload_list">
             	<c:forEach var="result" items="${cmmCodeList}" varStatus="status">
             		<option value="<c:out value='${result.codeId}'/>"><c:out value='${result.codeIdNm}'/></option>
             	</c:forEach>
            </select>
            
            <select name="upload_list_detail" id="upload_list_detail">
             	<c:forEach var="codeResult" items="${cmmCodeList}" varStatus="status" end="0">
             		<c:forEach var="detailResult" items="${cmmDetailCodeList}" varStatus="status">
             			<c:if test="${codeResult.codeId eq detailResult.codeId}">
             				<option value="<c:out value='${detailResult.code}'/>"><c:out value='${detailResult.codeNm}'/></option>
             			</c:if>
             		</c:forEach>
             	</c:forEach>
            </select>
            <input type="button" value="파일추가" class="asset_no_use_file_upload" onclick="document.all.file_temp.click();">
           	<input type="file" name="file_temp" id="file_temp" style="display:none" class="file">
        </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="<c:out value='${detailResult.code}'/>"><c:out value='${detailResult.codeNm}'/></option></c:if></c:forEach>
     	</span>
     </c:forEach>
</form>     
</body>
</html>