<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<%@include file="/views/common.jsp"%>
<link href="${path}/static/css/jquery-ui.min.css"  rel="stylesheet"/>
<script src="${path}/static/js/jquery-ui.min.js"></script>
<style>
.layui-input,.layui-input-inline{
	width:600px
}
.ui-helper-hidden-accessible{
	display:none
}
.edge .layui-edge{
		left:560px;
	}
.ui-menu {
	z-index: 999;
}
</style>
</head>
<body>
	<div class="layui-input-block layui-form" style="margin-top: 30px">
		<form class="layui-form " action="">
			<div class="layui-form-item">
				<label class="layui-form-label">客户旺旺</label>
				<div class="layui-input-inline">
					<input type="text" name="wangwang" placeholder="请输入客户的旺旺名" class="layui-input"
					autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属店铺</label>
				<div class="layui-input-inline edge">
					<select name="role" id="role"></select>
				</div>	
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">产品说明</label>
				<div class="layui-input-inline">
					<input type="text" name="productExplain" id="pExplain" placeholder="请输入产品说明" class="layui-input"
					autocomplete="on" lay-verify="required">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">金额</label>
					<div class="layui-input-inline">
						<input type="text" name="price" placeholder="请输入报价金额" class="layui-input"
						autocomplete="off" lay-verify="number">
					</div>
				</div>
				<!-- <div class="layui-form-item">
					<label class="layui-form-label">是否成交</label>
					<div class="layui-input-block">
						<input type="radio" name="isBuy" value="1" title="是" checked="">
						<input type="radio" name="isBuy" value="0" title="否">
					</div>
				</div> -->
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">未成交原因</label>
					<div class="layui-input-inline">
						<input type="text" name="commentSelf" placeholder="请输入未成交原因" class="layui-input"
						autocomplete="off">
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="enadd">确认添加</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
<script>
	$("#pExplain").autocomplete({
		// 通过函数自定义处理数据源
		source: function(request, response){
			// request对象只有一个term属性，对应用户输入的文本
			// response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
			$.ajax( {
				url: '${path}/getProductExplain',
				dataType: 'json',
				data:{
					'productExplain'  : $("#pExplain").val()
				},
				success: function(dataObj){
					response(dataObj); //将数据交给autocomplete去展示
				}
			} );		
		}
	});
	
	layui.use([ 'form', 'layer'],function() {
		var $ = layui.$,
		form = layui.form, 
		layer = layui.layer;
		
		//获取用户的角色
		$.ajax({
			url : '${path}/getUserRoles',
			dataType : 'json',
			data : {}, 
			type : 'get',
			success : function(data) {
				var datas = data.data.userRoleList
				$.each(datas, function(index, item) {
					$('#role').append(
							new Option(item.roleName, item.roleId));// 下拉菜单里添加元素
					});
				form.render("select");
			}
		});
		
		//监听提交
		form.on('submit(enadd)', function(data) {
			$.ajax({
				url : '${path}/addCustomerData',
				dataType : 'json',
				data : $(data.form).serialize(),
				type : 'post',
				success : function(data) {
					if (data.code == 200) {
						layer.msg('录入成功！', {
							icon : 6,
							offset : "auto",
							time : 2000
						});//提示框
					} else {
						layer.msg('录入失败！', {
							icon : 5,
							offset : "auto",
							time : 2000
						});//提示框
					}
					setTimeout(function(){
						var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
						parent.layer.close(index);//关闭弹出层
						parent.layui.table.reload("dataTableAll"); //重新加载页面表格
					}, 1100);
				}
			})
			return false;
		});
	})
</script>
</body>
</html>