<%--
  Class Name : AssetExcelUploadPopup.jsp
  Description : 파일 첨부 팝업  화면
  Modification Information
 
      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2018.06.11   ITN              최초 생성
 
    author   : ITN
    since    : 2018.06.11
--%>
<%@ 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 uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="<c:url value='/'/>css/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<title>업체관리</title>
<link rel="stylesheet" href="/direct/css/font.css">
<link rel="stylesheet" href="/direct/css/reset.css">
<link rel="stylesheet" href="/direct/css/enroll_popup.css">
<link rel="stylesheet" href="/direct/css/index.css">
<script src="<c:url value='/js/jquery-1.12.4.min.js' />"></script>
<script src="<c:url value='/js/jstree.min.assetlocshow.js' />"></script>
<script type="text/javascript" src="/js/audit/audit.common.js"></script> 
<script type="text/javaScript" language="javascript">
$( document ).ready(function(){
	{
	    var w = $('.enroll_popup').width();
	    var h = $('.enroll_popup').height();
	    window.resizeTo(w+25, h+50);
	}

	var objDragAndDrop = $(".upload_area");
	$(document).on("dragenter",".upload_area",function(e){
	    e.stopPropagation();
	    e.preventDefault();
	    $(this).css('border', '2px solid #0B85A1');
	});
	$(document).on("dragover",".upload_area",function(e){
	    e.stopPropagation();
	    e.preventDefault();
	});
	$(document).on("drop",".upload_area",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(){  //단일 파일업로드
		$('#file_temp').change(function(e){
	   	   var objUpload = $(".upload_area");
	   	   var files = $('#file_temp')[0].files;
	   	   if(!fileCheck(files[0])){
	   		   return;
	   	   }
	   	
	   	   if($('#tbody_fiielist').find('tr').length > 0 ){
	   		  alert("하나의 파일만 업로드 가능합니다");
	   		  return;
	   	   }
	   	   handleFileUpload(files,objUpload);  //파일업로드 
	   	});
	 });

	 $.ajaxSetup({
	    beforeSend : function () { showLodingBar() },
	    complete   : function () { deleteLodingBar() }
	});
});

function showLodingBar(){
	var width = 0;
    var height = 0;
    var left = 0;
    var top = 0;

    width = 30;
    height = 30;
    top = ( $(window).height() - height ) / 2 + $(window).scrollTop();
    left = ( $(window).width() - width ) / 2 + $(window).scrollLeft();

    if($("#div_ajax_load_image").length != 0) {
           $("#div_ajax_load_image").css({
                  "top": top+"px",
                  "left": left+"px"
           });
           $("#div_ajax_load_image").show();
    }else{
    	  $('body').append('<div id="div_ajax_load_image" style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + width + 'px; height:' + height + 'px; z-index:9999; background:#f0f0f0; filter:alpha(opacity=0); opacity:alpha*0.5; margin:auto; padding:0; "><img src="/direct/img/lodingBar.gif"></div>');
    }
}

function deleteLodingBar(){
    if($("#div_ajax_load_image").length != 0) {
    	$("#div_ajax_load_image").remove() ;
    }    
}

/* 파일등록 */
var _fileIdx = 0;
var _fileForm2 = new Array();
function handleFileUpload(files,obj)  //업로드 function
{
	if(files.length > 1){
		alert("하나의 파일만 업로드 가능합니다.");
		return;
	}
	if($('#tbody_fiielist').find('tr').length > 0 ){
	   alert("하나의 파일만 업로드 가능합니다.");
	   return false;
	}
	
	if(!fileCheck(files[0])){
	 	return;   
  	}
	
   	var limitsize = 50*1024*1024;  //파일 제한 체크(50개, 50MB)
   	var limitcount = 50;
   
   	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]);
        var tmpObj = new Object();
        tmpObj.name = "file_" + _fileIdx;
        tmpObj.fileObj = files[i];
        
        _fileForm2.push(tmpObj);
        sendFileToServer(fd, obj, files[i], _fileIdx);
        _fileIdx++;
        
        var totalfileSize = 0;
       	$('.totalfileCount').text($('.item_file_size').length) ;
       	$('.item_file_size').each(function(){
       		totalfileSize += $(this).val()*1 ;
       	});
       	$('.totalfileSize').text(getStrFileSize(totalfileSize)); 
   	}
}

function fileCheck(fileObj){
	 var ext = fileObj.name.split('.').pop().toLowerCase();
	 if($.inArray(ext, ['xls','xlsx']) == -1) {
  	     alert('엑셀 파일만 등록가능합니다.');
  	     return false;
	 }
	 return true;
}

function sendFileToServer(formData, obj , fileObj, _fileIdx)
{
	$('.no_img_box').hide();  //list 박스 형식 변경
    $('.asset_no_use_pro_table').show();
    var list_html = "";
    var tt = "";
    list_html += '<tr class="tr_upload_'+tt+'">';
    list_html += '<td class="file_name"><img src="'+getfile_img(fileObj.name)+'" alt=""><span class="file_name_text">'+fileObj.name+'</span></td>';
	list_html += '<td class="file_date">'+getDate()+'</td>';
	list_html += '<td class="file_size"><span class="file_size_text">'+getStrFileSize(fileObj.size)+'</span></td>';
	list_html += '<td class="file_del"><img src="/direct/img/upload_delect_img.png" alt="" onclick="delete_item(this, '+_fileIdx+')" ></td>';
	list_html += '<input type="hidden" class="item_file_size" value="'+fileObj.size+'">';
	list_html += '<input type="hidden" name="atchFileIds" class="imsi" value="'+tt+'">';
	list_html += '</tr>';
	$('#tbody_fiielist').append(list_html);
}

/* 임시파일 삭제버튼 클릭시 */
function delete_item(obj, fileIdx){
	$(obj).closest("tr").remove();
	_fileForm2.forEach(function(fobj, idx) {
		if (fobj.name == ("file_" + fileIdx)) _fileForm2[idx] = "";
	});
	if($('.item_file_size').length == 0){
		$('.file_upload_box ').show();
        $('.upload_box_text').show();
        $('.asset_no_use_pro_table').hide();
	}else{
		var totalfileSize = 0;
	   	$('.totalfileCount').text($('.item_file_size').length) ;
	   	$('.item_file_size').each(function(){
	   		totalfileSize += $(this).val()*1 ;
	   	});
	   	$('.totalfileSize').text(getStrFileSize(totalfileSize)) ; 	
	}
	$('#file_temp').val(""); //파일초기화
}

/* 등록버튼 클릭시 임시파일들 N으로 업데이트 */
function insert_confirm(){
	if($('#tbody_fiielist').find('tr').length == 0){
		alert("등록된 첨부파일이 없습니다.");
		return;
	}
	if(!confirm("등록하시겠습니까?")){
		return false;
	}
	
	$('input[name=atchFileIds]').each(function(index, item){ //화면에 있는 파일들 모두 임시없애기
		$(this).removeAttr("class", "imsi") ;
	});

	var data = new FormData(document.fileListSendForm);
	
	_fileForm2.forEach(function(obj, idx) {
		if (obj) data.append("file"+idx, obj.fileObj);
	});
	event.preventDefault();
	setButtonDisableEvent("T") ;
	$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/uss/itsm/company/companyExcelUpload.do",
        data: data,
        dataType:'jsonp',
        processData: false,
        contentType: false,
        cache: false,
        timeout: 6000000000,
        success: function (returnData, status) {
			if(status == 'success'){ // status 확인 필요한가. 석세스 안뜨면 에러 가지 않나
				if(returnData.result == 'fail'){
					alert("등록이 되지 않았습니다.");
					setButtonDisableEvent("F") ;
					return;
				}
				alert("등록 되었습니다.");
				setButtonDisableEvent("F") ;
				opener.linkPage(1);
				window.self.close();
			} else if(status== 'fail'){
				alert("저장에 실패하였습니다.");
				setButtonDisableEvent("F") ;
			}
		},
        error: function (e) { alert("저장에 실패하였습니다."); console.log("ERROR : ", e); }
    });
}

/* 버튼 이벤트 설정 */ 
function setButtonDisableEvent(flag){
	if(flag == 'T'){
		$(".asset_no_use_file_upload").prop("disabled", true);
		$(".save_btn").prop("disabled", true);
	}else{
		$(".asset_no_use_file_upload").prop("disabled", false);
	    $(".save_btn").prop("disabled", false);
	}
}
/* ********************************************************
* PROTOTYPE JS FUNCTION
******************************************************** */
String.prototype.trim = function(){
	return this.replace(/^\s+|\s+$/g, "");
}

String.prototype.replaceAll = function(src, repl){
	 var str = this;
	 if(src == repl){return str;}
	 while(str.indexOf(src) != -1) {
	 	str = str.replace(src, repl);
	 }
	 return str;
}
/* 취소버튼 클릭 */
function click_cancel(){
	self.close();
}

function companyCodeDown(){
    document.fileListForm.method = "post"; 
    document.fileListForm.action = "<c:url value='/uss/itsm/company/companyExceCodeDown.do'/>";
    document.fileListForm.submit(); 
}

function companyDataDown(){
    document.fileListForm.method = "post"; 
    document.fileListForm.action = "<c:url value='/uss/itsm/company/companyExceEXDown.do'/>";
    document.fileListForm.submit(); 
}


function companyExcelUpload(){
	
    document.fileListForm.method = "post"; 
    document.fileListForm.action = "<c:url value='/uss/itsm/company/companyExcelUpload.do'/>";
    document.fileListForm.submit(); 
}
</script>
</head>
<body>
<form name="fileListForm" id="fileListForm" method="post">
	<div class="enroll_popup edu_popup_detail asset_popup_no_use_pro">
		<div class="enroll_popup_title asset_popup_title">
			<img src="/direct/img/enroll_popup_title_bg.png" alt=""> 업체관리 엑셀 업로드
		</div>
		<div class="enroll_input_left asset_no_use_pro upload_area">
			<ul>
				<li>
					<input type="button" value="코드다운" class="asset_no_use_file_upload codeDown" onclick="companyCodeDown();" style="margin-left: 395px;">
					<input type="button" value="예제다운" class="asset_no_use_file_upload exDown" onclick="companyDataDown();" style="margin-left: 0px;">
					<input type="button" value="파일추가" class="asset_no_use_file_upload" onclick="document.all.file_temp.click();" style="margin-left: 0px;">
             		<input type="file" name="file_temp" id="file_temp" style="display:none" class="file">
				</li>
				<li>
					<div class="file_upload_box no_img_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_1"><br/>하나의 엑셀 파일만 업로드 할수 있습니다.</span><br>
							<span class="file_upload_text_2">(파일을 끌어다 놓으세요)</span>
						</div>
					</div>
				</li>
			</ul>
			<div class="asset_no_use_pro_table" style="display:none">
				<table class="uploaded_obj">
						<thead>
							<tr>
								<th class="file_name">파일명</th>
								<th class="file_date">등록일시</th>
								<th class="file_size">크기</th>
								<th class="file_del">삭제</th>
							</tr>
						</thead>
							<tbody id="tbody_fiielist">
							 	<c:forEach var="fileList" items="${fileList}" varStatus="status">
                        			<tr class="tr_upload_${fileList.atchFileId}">
										<td class="file_name">
											<img src="/direct/img/upload_hwp_img.png" alt="" />
											<span class="file_name_text">${fileList.orignlFileNm}</span>
										</td>
										<td class="file_date">${fileList.frstRegistPnttm}</td>
										<td class="file_size"><span class="file_size_text">${fileList.fileSize}</span></td>
										<td class="file_del">
											<img src="/direct/img/upload_delect_img.png" alt="" onclick="delete_upload_item('${fileList.atchFileId}' , 'tr_upload_'); return false;" >
										</td>
										<input type="hidden" class="item_file_size" value="${fileList.fileSize}">
									</tr>
                        		</c:forEach>
							</tbody>
						<tfoot>
							<tr>
								<td>최대 <span class="upload_number">50</span>개 ｜ <span class="upload_number">50MB(개당)</span> 제한</td>
								<td><span class="upload_number totalfileCount">0</span>개 ｜ <span class="upload_number totalfileSize">0MB</span></td>
							</tr>
						</tfoot>
				</table>
			</div>
		</div>

		<div class="main1_btn_div">
			<input type="button" class="save_btn" value="등록" onclick="insert_confirm(); return false;">
			<input type="button" class="close_btn" value="닫기" onclick="click_cancel(); return false;">
		</div>
	</div>
</form>

</body>
</html>