<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	response.setHeader("Pragma","No-cache");    
	response.setHeader("Cache-Control","no-cache");    
	response.setDateHeader("Expires", -10);  
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="/WEB-INF/views/base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>用户导入</title>
	<%@include file="/WEB-INF/views/common_base_css.jsp"%>
</head>

<body>
	<input type="hidden" id="basePath" value="<%=basePath %>"  >
    <div id="wrapper">
    	<jsp:include page="../menu.jsp"></jsp:include>
        <div id="page-wrapper" class="gray-bg">
        	<jsp:include page="../head.jsp"></jsp:include>
        	<jsp:include page="../pageNav.jsp"></jsp:include>
            <!-- 页面 主题内容  开始-->
	        <div class="wrapper wrapper-content animated fadeInRight">
	        <div class="row">
	        	<!-- row开始 -->
	           <div class="row">
                	<div class="col-lg-12">
	                    <div class="ibox float-e-margins">
	                        <div class="ibox-title">
	                            <h5>用户导入</h5>
	                            <div class="ibox-tools">
				                	<a href="sendSmsList" >
				                     	<i class="fa fa-mail-forward"></i>&nbsp;&nbsp;返回
				                 	</a>
				           		</div>
	                        </div>
	                        <div class="ibox-content">
	                        	<form method="post" action="parse.json" enctype="multipart/form-data"  class="form-horizontal">
	                        		
	                        		<div class="form-group"><label class="col-sm-2 control-label">模板下载</label>
	                                    <div class="col-sm-10" style="line-height: 28px;">
	                      					<a href="<%=basePath %>resources/muban.xls">模板格式.xls</a>              	 
	                                  	</div>
	                                </div>
	                        		
	                        		<div class="form-group"><label class="col-sm-2 control-label">所属部门(分组)</label>
	                                    <div class="col-sm-10" style="line-height: 28px;">
	                                    	<select class="form-control" id="classify" name="classify">
	                                    		<option value="" selected="selected">请选择</option>
												<c:forEach items="${constList}" var="c">
													<option value="${c.dictvalue }">${c.dictname }</option>
												</c:forEach>
										    </select> 
	                                  	</div>
	                                </div>
		                            <div class="form-group">
		                    			<input id="file-1"  type="file" data-overwrite-initial="false" data-min-file-count="1">
		                			</div>
		                        </form>
								<div id="result" style="font-size: 2rem;">
										
								</div>
	                        </div>
	                    </div>
                	</div>
            	</div>
	            <!-- row结束 -->	
	        </div>    
	        </div>
	        <!-- 页面主题内容 结束 -->

        </div>
    </div>
    <!-- Mainly scripts -->
    <%@include file="/WEB-INF/views/common_base_script.jsp"%>
	<script>
			
			$(function(){
				$("#file-1").fileinput({
					language : "zh",
			        uploadUrl: "upload",
			        allowedFileExtensions : ["xls", "xlsx"],
			        showCaption: true,//是否显示标题
			        maxFileSize: 1000,//单位为kb，如果为0表示不限制文件大小
			        overwriteInitial: false,//是否覆盖已存在的图片  
			        dropZoneEnabled: true,//是否显示拖拽区域
			        showPreview :true,//是否显示预览
			        maxFilesNum: 1,//表示允许同时上传的最大文件个数
			        uploadAsync: true,//默认异步上传
			        previewFileIcon: '<i class="fa fa-file"></i>',
			        allowedPreviewTypes: null, //取消预览
			        previewFileIconSettings: {
			            'doc': '<i class="fa fa-file-word-o text-primary"></i>',
			            'xls': '<i class="fa fa-file-excel-o text-success"></i>',
			            'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
			            'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
			            'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
			            'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
			        },
			        uploadExtraData: function() {
			     	   var out = {}, key;
			            key = 'classify';
			            out[key] = $("#classify").val();
			            return out;
			        },
			        slugCallback: function(filename) {
			            return filename.replace('(', '_').replace(']', '_');
			        }
			        
				}).on("filepreupload", function(event, data, previewId, index, jqXHR) {
					var cf = $("#classify").val();
					if(cf == ""){
						return {
				            message: "请选择部门！", 
				            data:{} 
				        };
					}
					
			    }).on("fileuploaded", function(event, data, previewId, index) {
			    	var obj = data.response;
			    	if(obj.status == 'success'){
			    		var msg = obj.message;
			    		var html = '<p >'+msg+'<p>';
						$("#result").append(html);
			    	} else {
			    		var msg = obj.message;
			    		$("#file-1").fileinput('_showUploadError', msg);
			    	}
				});
			})
			
	</script>       
</body>
</html>