<div class="container-fluid edit-form-padding">
    <form id="importForm" class="form-horizontal" action="/excelData/importToDomain" method="post" style="font-size:0.12rem;">
		<input type="hidden" th:value="${moduleName}" name="moduleName"/>
		<input type="hidden" th:value="${template}" id="templateData">
	    <div class="form-group" id="downloadDiv">
	    		<div class="col-xs-3">首先下载导入模版：</div>
	    		<a type="button" class="col-xs-9" th:href="@{/excelData/downloadDataTemplate(moduleName=${moduleName})}">点击下载</a> 
	    </div>
	    	<div id="uploader_file" class="form-group uploader">
	    		<div class="col-xs-12">上传填写好的模版：</div>
	    		<div class="col-xs-3">
	    			<button type="button" class="btn btn-white btn-info colorbtn import_chooseFile">选择</button>
					<input class="uploaderFile_hidden" type="file" name="file"/>
	    		</div>
	    		<div class="col-xs-9 filelist">
					<div class="content">
						<div class="file-size small text-muted"></div>
						<div class="file-name"></div>
						
					</div>
	    		</div>
		</div>
		<div class="form-group" id="sign_loaderFile">
			<span class="download_sign"><label></label>当前没有可选的Excel模版,请选择点击下载模版,填写完整后并保存即可导入</span>
			<span class="uploader_sign"><label></label>选择填写好的Excel模版导入,每次选择一个,选错可重新选择,模版需是xls或xlsx格式的文件</span>
		</div>
    </form>
</div>
<style>
	#importForm .form-group {
		margin-top:0.2rem;
		padding:0 0.2rem;
	}
	.import_chooseFile {
		border:none;color:#fff;background-color:#52AEDC;text-shadow:none;width:90%
	}
	#downloadDiv>div,#uploader_file .col-xs-3 {
	    line-height: 0.32rem;
	    /* text-align: center; */
	    white-space: nowrap
	} 
	.import_chooseFile:hover {
		color: #fff;
	    background-color: #52AEDC;
	    border-color: none;
	    -webkit-box-shadow: 0 2px 1px rgba(0,0,0,.1);
	    box-shadow: 0 2px 1px rgba(0,0,0,.1);
	}
	#downloadDiv>a {
		position: relative;
	    min-height: 0.32rem;
	    margin-bottom: 0.1rem;
	    border: 1px solid #ddd;
	    text-align:center;
	    line-height:0.32rem;
	    color:#ddd;
	}
	.uploaderFile_hidden {
		position: absolute;
	  	left:0.1rem;
	  	top:0px;
	  	width:70%;
	    height: 0.3rem;
	    opacity:0 
	}
	#uploader_file .filelist> .content {
		margin-top: 0.07rem;
    	margin-bottom: 0.07rem;
	}
	#uploader_file .filelist> .content > .file-size {
		float:right;
	}
	#uploader_file .filelist{
		height: auto;
    	border: 1px solid #ddd;
    	min-height: 0.34rem;
	}
	#sign_loaderFile span {
		display:block
	}
	#sign_loaderFile span label:after{
		content:"*";
		color:red;
		display:inline-block;
		margin-right:0.1rem;
		margin-left:0.1rem;
	}
</style>
<script type="text/javascript">
    $(document).ready(function () {
    	var templateData=$("#templateData").val();
        var moduleName = $('#moduleName').val();
        //当不需要模版的时候，隐藏下载模版的部分
        if(templateData!=null && templateData!=''){
        		$("#downloadDiv").hide();
        		$("#sign_loaderFile .download_sign").hide();
        }
        $("#uploader_file").delegate(".uploaderFile_hidden","change",function(){
        	var file = $(this).get(0).files[0];
        	if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                $("#uploader_file .file-name").empty().text(file.name);
                $("#uploader_file .file-size").empty().text(fileSize);
            }
        })
        $("#uploader_file").delegate(".filelist","click",function(){
        	$(".uploaderFile_hidden").click();
        })
        $("#importForm").validate({
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    success: function (e) {
                        if (e && e.success == true) {
    						new $.zui.Messager('导入成功', {
    							type : 'success',
    							time : 1500
    						}).show();
    						$("#myModal-importExcel").modal('hide');
    						$("#refresh").click();
                        } else {
                        	new $.zui.Messager(e.msg, {
    							type : 'danger',
    							time : 1500
    						}).show();
                        }
                    }
                });
            }
        });
    });
</script>
