<%@ page language="java" import="java.util.*"  contentType="text/html;charset=UTF-8"%> 
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<title>客户添加</title>
<link href="<%=basePath %>plugins/bootstrap.css" rel="stylesheet">
<link href="<%=basePath %>plugins/bootstrap-dashen.css" rel="stylesheet">
<link href="<%=basePath %>plugins/font-awesome.css" rel="stylesheet">
<link href="<%=basePath %>plugins/animate.css" rel="stylesheet">
<link href="<%=basePath %>plugins/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body style="margin-top:70px;">
<jsp:include page="../header.jsp"></jsp:include>
<div class="container">
	<div class="row">
		<div class="col-md-12 wow fadeInUp" data-wow-duration="0.5s">
			<div>
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
			    	<li role="presentation" ><a href="<%=basePath %>Customer/frontlist">客户列表</a></li>
			    	<li role="presentation" class="active"><a href="#customerAdd" aria-controls="customerAdd" role="tab" data-toggle="tab">添加客户</a></li>
				</ul>
				<!-- Tab panes -->
				<div class="tab-content">
				    <div role="tabpanel" class="tab-pane" id="customerList">
				    </div>
				    <div role="tabpanel" class="tab-pane active" id="customerAdd"> 
				      	<form class="form-horizontal" name="customerAddForm" id="customerAddForm" enctype="multipart/form-data" method="post"  class="mar_t15">
						  <div class="form-group">
						  	 <label for="customer_customerName" class="col-md-2 text-right">客户名称:</label>
						  	 <div class="col-md-8">
							    <input type="text" id="customer_customerName" name="customer.customerName" class="form-control" placeholder="请输入客户名称">
							 </div>
						  </div>
						  <div class="form-group">
						  	 <label for="customer_customerType" class="col-md-2 text-right">客户类型:</label>
						  	 <div class="col-md-8">
							    <input type="text" id="customer_customerType" name="customer.customerType" class="form-control" placeholder="请输入客户类型">
							 </div>
						  </div>
						  <div class="form-group">
						  	 <label for="customer_telephone" class="col-md-2 text-right">客户电话:</label>
						  	 <div class="col-md-8">
							    <input type="text" id="customer_telephone" name="customer.telephone" class="form-control" placeholder="请输入客户电话">
							 </div>
						  </div>
						  <div class="form-group">
						  	 <label for="customer_customerAddress" class="col-md-2 text-right">客户地址:</label>
						  	 <div class="col-md-8">
							    <input type="text" id="customer_customerAddress" name="customer.customerAddress" class="form-control" placeholder="请输入客户地址">
							 </div>
						  </div>
						  <div class="form-group">
						  	 <label for="customer_memo" class="col-md-2 text-right">客户备注:</label>
						  	 <div class="col-md-8">
							    <textarea name="customer.memo" id="customer_memo" style="width:100%;height:500px;"></textarea>
							 </div>
						  </div>
				          <div class="form-group">
				             <span class="col-md-2""></span>
				             <span onclick="ajaxCustomerAdd();" class="btn btn-primary bottom5 top5">添加</span>
				          </div>
						</form> 
				        <style>#customerAddForm .form-group {margin:10px;}  </style>
					</div>
				</div>
			</div>
		</div>
	</div> 
</div>

<jsp:include page="../footer.jsp"></jsp:include> 
<script src="<%=basePath %>plugins/jquery.min.js"></script>
<script src="<%=basePath %>plugins/bootstrap.js"></script>
<script src="<%=basePath %>plugins/wow.min.js"></script>
<script src="<%=basePath %>plugins/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="<%=basePath %>plugins/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath %>plugins/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor1_4_3/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
<script>
//实例化编辑器
var customer_memo_editor = UE.getEditor('customer_memo'); //客户备注编辑器
var basePath = "<%=basePath%>";
	//提交添加客户信息
	function ajaxCustomerAdd() { 
		//提交之前先验证表单
		$("#customerAddForm").data('bootstrapValidator').validate();
		if(!$("#customerAddForm").data('bootstrapValidator').isValid()){
			return;
		}
		jQuery.ajax({
			type : "post",
			url : basePath + "Customer/add",
			dataType : "json" , 
			data: new FormData($("#customerAddForm")[0]),
			success : function(obj) {
				if(obj.success){ 
					alert("保存成功！");
					$("#customerAddForm").find("input").val("");
					$("#customerAddForm").find("textarea").val("");
					customer_memo_editor.setContent("");
				} else {
					alert(obj.message);
				}
			},
			processData: false, 
			contentType: false, 
		});
	} 
$(function(){
	/*小屏幕导航点击关闭菜单*/
    $('.navbar-collapse a').click(function(){
        $('.navbar-collapse').collapse('hide');
    });
    new WOW().init();
	//验证客户添加表单字段
	$('#customerAddForm').bootstrapValidator({
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			"customer.customerName": {
				validators: {
					notEmpty: {
						message: "客户名称不能为空",
					}
				}
			},
			"customer.customerType": {
				validators: {
					notEmpty: {
						message: "客户类型不能为空",
					}
				}
			},
			"customer.telephone": {
				validators: {
					notEmpty: {
						message: "客户电话不能为空",
					}
				}
			},
			"customer.customerAddress": {
				validators: {
					notEmpty: {
						message: "客户地址不能为空",
					}
				}
			},
		}
	}); 
})
</script>
</body>
</html>
