<%@ 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">
<%@include file="/views/common.jsp"%>
<style type="text/css">
/* 数据表格样式 */
.layui-table td, .layui-table th,.layui-table-header, .layui-table-page,.layui-table-tool, .layui-table-total, .layui-table-view{
	border-color:#6666;
	font-size:14px;
}
.layui-table-cell{
	height:30px;
	line-height:34px;
}
.layui-input-inline,.layui-form-label{
	margin-top:10px;
}
.layui-input{
 	width:100%;
}
.layui-form-select .layui-edge{
	right:0px;
}
.layui-form-select .layui-input {
	padding-right: 0px;
}
/* 数据渲染完的回调。
由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单 */
.laytable-cell-1-0-2,.layui-table-box,.layui-table-body{
	overflow: visible;
}
/* 数据表格中的下拉框和表格相同高度 */
td .layui-form-select {
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}
</style>
</head>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container demoTable">
	<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export"><i class="layui-icon"></i>导出数据</button>
  </div>
</script>
<script type="text/html" id="isBuyToDayTpl">
  <input type="checkbox" name="isBuyToDay" value="{{d.id}}+{{d.username}}+{{d.price}}" lay-skin="switch" lay-text="已成交|未成交" lay-filter="isBuyToDayDemo" {{ d.isBuyToDay == '1'? 'checked' : '' }}>
</script>
<script type="text/html" id="isBuyTpl">
  <input type="checkbox" name="isBuy" value="{{d.id}}+{{d.buyPrice}}" lay-skin="switch" lay-text="已成交|未成交" lay-filter="isBuyDemo" {{ d.isBuy == '1'? 'checked' : '' }}>
</script>
<script type="text/html" id="selectEducation">
    <select name="shopname" id="shopname" lay-filter="shopname" data.value="{{d.username}}+{{d.id}}+{{d.wangwang}}">
        <option value="">--请选择--</option>
    </select>
</script>
<body>
	<br>
	<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">操作人</label>
			<div class="layui-input-inline">
				<input type="text" id="realname" name="realname"
					placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">店铺</label>
			<div class="layui-input-inline edge">
				<select name="roleSearch" id="roleSearch" lay-search></select>
			</div>
			<input type="hidden" id="role" name="role" value="${sessionScope.USER_SESSION.role}" >
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">当天成交</label>
			<div class="layui-input-inline edge">
				<select name="isBuyToDay" id="isBuyToDay">
					<option value=""></option>
					<option value="0">未成交</option>
					<option value="1">已成交</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">跟单后成交</label>
			<div class="layui-input-inline edge">
				<select name="isBuy" id="isBuy">
					<option value=""></option>
					<option value="0">未成交</option>
					<option value="1">已成交</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">操作时间</label>
			<div class="layui-input-inline edge">
                <select name="type" id="selectedOption" lay-filter="college">
                    <option value="day" selected="selected">按日统计</option>
                    <option value="dayRound">按日期范围统计</option>
                    <option value="week">按周统计</option>
                    <option value="month">按月统计</option>
                    <option value="quarter">按季度统计</option>
                    <option value="year">按年统计</option>
                </select>
            </div>
            <div class="layui-input-inline">
	            <label class="layui-inline" id="worldlable" style="width: 190px;">
	                <input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
	            </label>
            </div>
        </div>
		<div class="layui-inline">
			<div class="layui-inline">
				<label class="layui-form-label">所属店铺</label>
				<div class="layui-input-inline edge">
					<select name="isSelect" id="isSelect">
						<option value=""></option>
						<option value="0">未选择</option>
						<option value="1">已选择</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">填写旺旺</label>
				<div class="layui-input-inline edge">
					<select name="isFillIn" id="isFillIn">
						<option value=""></option>
						<option value="0">未填写</option>
						<option value="1">已填写</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户旺旺</label>
				<div class="layui-input-inline">
					<input type="text" id="wangwang" name="wangwang"
						placeholder="请输入客户旺旺搜索" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">金额</label>
				<div class="layui-input-inline">
					<input type="text" id="price" name="price"
						placeholder="金额" autocomplete="off" class="layui-input">
				</div>
			</div>
         	<div class="layui-inline">
				<label class="layui-form-label">操作</label>
				<div class="layui-input-inline">
					<input type="text" id="remark" name="remark"
						placeholder="搜索操作" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">产品</label>
				<div class="layui-input-inline edge">
					<select name="proTypeLabel" id="proTypeLabel" lay-search></select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">订单号</label>
				<div class="layui-input-inline">
					<input type="text" id="orderNumber" name="orderNumber"
						placeholder="订单号" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">跟踪情况</label>
				<div class="layui-input-inline">
					<input type="text" id="commentManager" name="commentManager"
						placeholder="跟踪情况" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit
					lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
					<i class="layui-icon layui-icon-search"></i> 查询
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<br>
	<table class="layui-hide" id="quoteDataTable" lay-filter="quoteDataTable"></table>
<script>
	var roleData = {};
	$.ajax({
		url : '${path}/changeRoleName',
		dataType : 'json',
		data : {
		}, 
		type : 'post',
		success : function(data) {
			roleData = data;
		}
	});
	// 下拉框第一列添加空的option
	$('#roleSearch').append(new Option("",""));
	$('#proTypeLabel').append(new Option("",""));
	layui.use([ 'table', 'form','util','laydate'], function() {
		var $ = layui.jquery,
		table = layui.table,
		form = layui.form,
		util = layui.util,
		laydate = layui.laydate;
		
		//获取用户的角色
		$.ajax({
			url : '${path}/getUserRoles',
			dataType : 'json',
			data : {
				flag:"customerData"
			}, 
			type : 'get',
			success : function(data) {
				var datas = data.data.userRoleList
				$.each(datas, function(index, item) {
					$('#roleSearch').append(
							new Option(item.roleName, item.roleId));// 下拉菜单里添加元素
				});
				form.render("select");
			}
		});
		
		//获取报价过的产品
		$.ajax({
			url : '${path}/getProTypeLabel',
			dataType : 'json',
			data : {}, 
			type : 'get',
			success : function(data) {
				$.each(data, function(index, item) {
					$('#proTypeLabel').append(
							new Option(item, item));// 下拉菜单里添加元素
				});
				form.render("select");
			}
		});
		
		form.on('select(shopname)', function (data) {
			var id = data.elem.getAttribute("data.value");
			// 传过来的数据是  用户名+id+旺旺  拼接的
		 	var shopnameData = id.split("+");
			 $.ajax({
				url : "${path}/updateShopname",
				dataType : 'json',
				data : {
					"username":shopnameData[0],
					"id"	  :shopnameData[1],
					"shopname":data.value,
					/* "wangwang":shopnameData[2] */
				}, 
				type : 'post',
				success : function(data) {
					if (data.code == 200) {
						layer.msg('修改成功！',{icon:6,offset:"auto",time:1000});//提示框
					 }else{
					  	layer.msg(data.msg,{icon:5,offset:"auto",time:2000});//提示框
					  }
				}		
			})
	       });
		
		//生成表格
		table.render({
			elem : '#quoteDataTable',
			url : '${path}/getQuoteData',
			toolbar : '#toolbarDemo',
			page : {
				layout:['count','prev','page','next', 'skip','limit']
			},//开启分页
			limits	: [10,30,50,100,500,999],
			id : 'quoteDataAll',
			totalRow: true,
			where : {
				realname : '',
				remark : '',
				shopname : '',
				price	: '',
				wangwang : '',
				roleSearch :'',
				proTypeLabel:'',
				quoteTimeBegin: '',
				commentManager:'',
				role     : $("#role").val()
			},
			cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			cols : [ [ {
				type : 'numbers',
				width : 50,
				title : '序号',
				fixed : "left",
				totalRowText: '合计'
			},{
				field : 'realname',
				width :  75,
				align : 'center',
				title : '操作人'
			},/* {
				field : 'role',
				width :  120,
				align : 'center',
				title : '拥有的店铺',
				templet:function(d){
					if(d.role != null && d.role != ""){
						var load = d.role.split(",");
						var roleStr = "";
						for (var i = 0; i < load.length; i++) {
							roleStr += roleData[load[i]] + "   ";
						}
						return roleStr
					}
					return ""
				}
			}, */{
				field : 'shopname',
				title : '选择店铺',
				width :  80,
				align : 'center',
				templet: "#selectEducation"
			},{
				field : 'shopname',
				title : '所属店铺',
				width :  100,
				align : 'center',
				templet:function(d){
					if(d.shopname != null && d.shopname != ""){
						return roleData[d.shopname]
					}
					return ""
				}
			},{
				field : 'wangwang',
				width :  120,
				align : 'center',
				title : '客户旺旺',
				edit  : 'text'
			},{
				field : 'remark',
				title : '操作'
			},{
				field : 'price',
				width :  70,
				align : 'center',
				title : '金额',
				edit  : 'text',
				totalRow: true
			},{
				field : 'isBuyToDay',
				title : '当天成交',
				align : 'center',
				width :  105,
				templet : '#isBuyToDayTpl'
			},{
  				field : 'commentSelf',
  				title : '未成交原因',
  				width :  200,
  				edit  : 'text'
  			},{
				field : 'isBuy',
				title : '跟单后成交',
				align : 'center',
				width :  105,
				templet : '#isBuyTpl'
			},{
				field : 'buyPrice',
				title : '成交金额',
				align : 'center',
				width :  100,
				edit  : 'text',
				totalRow: true
			},{
  				field : 'commentManager',
  				title : '店长跟踪情况汇报',
  				width :  260,
  				edit  : 'text',
  			},{
				field : 'quoteTime',
				width :  160,
				align : 'center',
				title : '操作时间',
  				templet:function(d){
  					return util.toDateString(d.quoteTime, "yyyy-MM-dd HH:mm:ss");
  				}
  			}] ],
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" 	: 0, //解析接口状态
					"msg" 	: "", //解析提示文本
					"count"	: res.total,//解析数据长度
					"data" 	: res.list//解析数据列表
				};
			},
			//数据渲染完的回调。
			done: function (res, curr, count) {
				tabData = res.data;
             	//获取用户的角色
    			$.ajax({
    				url : '${path}/getUserRoles',
    				dataType : 'json',
    				data : {
    					flag:"customerData"
    				}, 
    				type : 'get',
    				success : function(data) {
    					var datas = data.data.userRoleList
    					$(datas).each(function (i) {
    						var option = $('<option value="' + datas[i].roleId + '">' + datas[i].roleName + '</option>');
                            // id只能唯一，所以用name赋值
                            $("select[name = 'shopname']").append(option);
						})	
    					form.render("select");
    				}
    			});
                //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
               // $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
            }
		});
		
		//日期范围
		laydate.render({
			elem: '#time'
		    ,range: true
		});
		 
		//点击查询按钮，重载表格
		$('#searchBtn').on('click', function() {
			table.reload('quoteDataAll', {
				method : 'post',
				where : {
					realname 	: $("#realname").val(),
					remark 	 	: $("#remark").val(),
					isBuy	 	: $("#isBuy").val(),
					isBuyToDay	: $("#isBuyToDay").val(),
					isSelect 	: $("#isSelect").val(),
					isFillIn 	: $("#isFillIn").val(),
					price	 	: $("#price").val(),
					wangwang	: $("#wangwang").val(),
					quoteTimeBegin: $("#worldId").val(),
					roleSearch 	: $("#roleSearch").val(),
					proTypeLabel: $("#proTypeLabel").val(),
					orderNumber : $("#orderNumber").val(),
					commentManager: $("#commentManager").val(),
					role 	 	: $("#role").val()
				},
				page : {
					curr : 1
				}
			});
			return false;
		});
		
		// 监听头部工作栏的导出
		table.on('toolbar(quoteDataTable)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'export':
				var realname 	= $("#realname").val(),
					remark 	 	= $("#remark").val(),
					isBuy	 	= $("#isBuy").val(),
					isBuyToDay	= $("#isBuyToDay").val(),
					isSelect 	= $("#isSelect").val(),
					isFillIn 	= $("#isFillIn").val(),
					price	 	= $("#price").val(),
					wangwang	= $("#wangwang").val(),
					quoteTimeBegin= $("#worldId").val(),
					roleSearch 	= $("#roleSearch").val(),
					proTypeLabel= $("#proTypeLabel").val(),
					role 	 	= $("#role").val();
				window.location.href="../../../excel_quoteData" + "?realname=" + realname + "&remark=" + remark+ "&isBuy=" + isBuy
				+ "&isBuyToDay=" + isBuyToDay+ "&isSelect=" + isSelect+ "&isFillIn=" + isFillIn+ "&price=" + price + "&wangwang=" + wangwang
				+ "&quoteTimeBegin=" + quoteTimeBegin+ "&roleSearch=" + roleSearch+ "&proTypeLabel=" + proTypeLabel+ "&role=" + role;
				break;
			};
		});
		
		//监听【是否当天成交】状态按钮(自己修改)
		form.on('switch(isBuyToDayDemo)', function(obj){
			// jsp传过来的数据是  id+用户名+价格  拼接的
			var rowData = obj.value.split("+");
			// 未成交点成已成交，且价格大于300-->需要填写订单号
			if(obj.othis[0].innerText == '已成交' && rowData[2] >= 300){
				layer.open({
					type : 2,
					title : "填写订单号",
					fix: false, //不固定
					shadeClose:true,//点击旁边地方自动关闭
		    		maxmin: true,
					area : [ '40%', '30%' ],
					content : './addOrderNumber.jsp',
					success: function (layero, index) {
	                    //向layer页面传值，传值主要代码
	                    var body = layer.getChildFrame('body', index);
	                        
	                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
	                    //var iframeWin = window[layero.find('iframe')[0]['name']];
	                        
	                    // 页面传参
	                    body.find('#TYPE').val(0);
	                    body.find('#ID').val(rowData[0]);
	                    body.find('#USERNAME').val(rowData[1]);
	               	}
				});
			}else{
				//如果是已经成交的，点掉不需要填订单号
				$.ajax({
					url : "${path}/changeIsBuyToDayStatus",
					dataType : 'json',
					data : {
						'id'		:	rowData[0],
						'username'	:	rowData[1]
					}, 
					type : 'post',
					success : function(data) {
						if (data.code == 200) {
							layer.msg('状态修改成功！',{icon:6,offset:"auto",time:1000});//提示框
					  	}else{
					  		layer.msg(data.msg,{icon:5,offset:"auto",time:2000});//提示框
					  	}
					}		
				})	
			}
		})
		var updatePrice;
		//监听【是否成交】状态按钮(店长修改)
		form.on('switch(isBuyDemo)', function(obj){
			// jsp传过来的数据是  id+价格  拼接的
			var rowData = obj.value.split("+");
			// jsp传过来的数据是  id+价格
			var id = rowData[0];
			var buyPrice = rowData[1];
			if(buyPrice == "null" && updatePrice == null){
				layer.msg('请先填写价格！',{icon:5,offset:"auto",time:2000});//提示框
				return false;
			}
			$.ajax({
				url : "${path}/changeIsBuyStatus",
				dataType : 'json',
				data : {
					'id':id
				}, 
				type : 'post',
				success : function(data) {
					if (data.code == 200) {
						layer.msg('状态修改成功！',{icon:6,offset:"auto",time:1000});//提示框
				  	}else{
				  		layer.msg('只允许店长修改！',{icon:5,offset:"auto",time:2000});//提示框
				  	}
				}		
			})
			/* // 未成交点成已成交，且价格大于300-->需要填写订单号
			if(obj.othis[0].innerText == '已成交' && buyPrice >= 300){
				layer.open({
					type : 2,
					title : "填写订单号",
					fix: false, //不固定
					shadeClose:true,//点击旁边地方自动关闭
		    		maxmin: true,
					area : [ '40%', '30%' ],
					content : './addOrderNumber.jsp',
					success: function (layero, index) {
	                    //向layer页面传值，传值主要代码
	                    var body = layer.getChildFrame('body', index);
	                        
	                    // 页面传参
	                    // TYPE=》0:当天成交 1:跟单成交
	                    body.find('#TYPE').val(1);
	                    body.find('#ID').val(id);
	               	}
				});
			}else{
				//已经成交的，点掉不需要填订单号
				$.ajax({
					url : "${path}/changeIsBuyStatus",
					dataType : 'json',
					data : {
						'id':id
					}, 
					type : 'post',
					success : function(data) {
						if (data.code == 200) {
							layer.msg('状态修改成功！',{icon:6,offset:"auto",time:1000});//提示框
					  	}else{
					  		layer.msg('只允许店长修改！',{icon:5,offset:"auto",time:2000});//提示框
					  	}
					}		
				})
			} */
		})
		
		//监听单元格编辑
		table.on('edit(quoteDataTable)', function(obj){
			var value = obj.value, //得到修改后的值
		    data = obj.data, //得到所在行所有键值
		    field = obj.field; //得到字段
		    if(field == 'buyPrice')
		    	updatePrice = value;
		    $.ajax({
				url:"${path}/updateById",
			  	data:{
			  		id: data.id, 
			  		value: value, 
			  		field: field,
			  		username:data.username,
			  		/* shopname:data.shopname */
			  	},
				type:"post",
			  	success:function (data) {
			  		//	改了跟单的价格，刷新
			  		if(field == "buyPrice" && value >=300){
			  			table.reload('quoteDataAll')
			  		}
				 	if (data.code == 200) {
				 		layer.msg('修改成功！',{icon:6,offset:"auto",time:1000});//提示框
				  	}else{
					    layer.msg(data.msg,{icon:5,offset:"auto",time:1000});//提示框
				  	}
			 	}  
		 	}); 
		});
	})
</script>
<script src="${path}/static/js/dateUtil.js" charset="utf-8"></script>
</body>
</html>