<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + path+"/";
	request.setAttribute("contextPath", basePath);
	
	String redirectUrl= request.getParameter("redirectUrl");
	request.setAttribute("redirectUrl", redirectUrl);
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>推荐客户</title>
    <script src="<%=basePath %>app/lib/flexible.js"></script>
    <link rel="stylesheet" href="<%=basePath %>app/lib/flexible.css">
	<link rel="stylesheet" href="<%=basePath %>app/css/basem.css">
	<link rel="stylesheet" href="<%=basePath %>app/css/logome.css">
	<link rel="stylesheet" href="<%=basePath %>app/css/index.css">
	<style>
		/* .slist {
		    overflow: hidden;
		}
		.slist .merecli {
		    width: 146%;
		    color: #232323;
    		border-bottom:  0.025rem solid #f3f3f3;
		    overflow: hidden;
		    height: 1.2rem;
		    line-height: 1.2rem;
		    font-size: 0.4rem;
		    padding: 0;
		}
		.slist li i {
		    float: right;
		    width: 15%;
		    text-align: center;
		    background: #dd1e25;
		    color: #fff;
		    font-size: 0.3rem;
		    padding-right: 0.15rem;
		    margin-left:0.15rem;
		    
		}
		.slist li div.left {
		    overflow: hidden;
		    -webkit-transition: all 0.3s linear;
		    transition: all 0.3s linear;
		    display: inline-block;
		    width: 80%;
		}
		
		.slist li div.divleft {
		    overflow: hidden;
		    -webkit-transition: all 0.3s linear;
		    transition: all 0.3s linear;
		    display: inline-block;
		    width: 66%;
		}
		
		.swipeleft {
		    transform: translateX(-15%);
		    -webkit-transform: translateX(-30%);
		} */

	</style>
</head>
<body>
	<div class="show" id="tj_client">
		<div class="titbox blubg">
			<a class="titreturn left" href="javascript:void(0)" onclick="back()"><img src="<%=basePath %>app/img/fanhui16@2x.png" alt=""></a>
			<h1>推荐客户</h1>
			 <script type="text/javascript">
			function back(){
				window.history.go(-1);
			}
			</script>
		</div>
		<div class="whbg top50">
			<div class="safe">
				<ul>
					<%-- <li>
						<!-- me-peo.html -->
						<a class="merecli" href="#me-client" title="me-client" id="clientMore">
						<div class="left">
							<img class="logicon" src="<%=basePath %>app/img/tuanjia@2x.png" alt=""><span class="meaddle">我的客户</span>
						</div>
						<img class="right tuijiejian" src="<%=basePath %>app/img/fanh3@2x.png" alt="">
						</a>
					</li> --%>
					<li class="merecli">
						<p class="meaddle left">客户姓名：</p>
						<input id="name" class="meaddinpu left" type="text">
						<a href="#me-client" title="me-client" id="clientMore">
						<img class="right tuijiejian" src="<%=basePath %>app/img/dhb.png" alt="">
						</a>
						<input id="customerid" type="hidden">
					</li>
					<li class="merecli">
						<p class="meaddle left">联系电话：</p>
						<input id="phone" oninput='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' onkeyup="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')"  onafterpaste="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" class="meaddinpu left blutxt" type="number">
					</li>
					<li class="merecli">
						<p class="meaddle left">工作单位：</p>
						<input id="company" class="meaddinpu left" type="text">
					</li>
					<li class="merecli">
						<p class="meaddle left">所在区域：</p>
						<input id="pcarea" class="meaddinpu left" readonly="readonly" type="text">
						<input id="province" class="meaddinpu left" type="hidden">
						<input id="city" class="meaddinpu left" type="hidden">
						<input id="area" class="meaddinpu left" type="hidden">
					</li>
					<li class="merecli meaddlila meaddlik">
						<p class="meaddle">详细地址：</p>
						<textarea id="address" class="meaddinpu" name="" id=""></textarea>
					</li>
					<li class="merecli meaddlila meaddlik">
						<p class="meaddle">客户备注：</p>
						<textarea class="meaddinpu" name="" id="remarks"></textarea>
					</li>
					<li class="merecli meaddlila meaddlik">
						<p class="meaddle">订单备注：</p>
						<textarea class="meaddinpu" name="" id="remark"></textarea>
					</li>
				</ul> 
			</div> 
		</div>
		
		
		
		<div class="whbg top10">
			<div class="safe">
				<ul>
				<c:forEach items="${mlist }" var="m" varStatus="status">
					<li class="merecli">
						<p class="left graytxt">${m.name }</p>
						<input type="hidden" name="productids" value="${m.id }">
						<input type="hidden" class="meaddinpu left graytxt" type="text">
					</li>
					<li class="merecli">
						<p class="meaddle left">意向数量</p>
						<input oninput='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' onkeyup="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')"  onafterpaste="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" class="meaddinpu left" name="numbers" type="number">
					</li>
				</c:forEach>
					
				</ul>
			</div>
		</div>
		<a class="redbtn" href="javascript:void(0);" onclick="tjnow()">马上推介</a>	
	</div>
<script type="text/javascript">
var cstate = "0";
function tjnow(){
	if(cstate == "0"){
		cstate = "1";
		var productId = "";
		var numbers = "";
		$("input[name='productids']").each(function(k){
			
			if(k == 0){
				productId += $(this).val();
			}else{
				productId += "," + $(this).val();
			}
		});
		
		if($("#phone").val() == '' || $("#phone").val().trim()==''){
			layer.msg("请填写手机号");
			cstate = "0";
			return false;
		}
		if($("#phone").val().trim().length > 11){
			layer.msg("请填写11位手机号");
			cstate = "0";
			return false;
		}
		if($("#company").val() == ""){
			layer.msg("请完善公司信息");
			cstate = "0";
			return false;
		}
		if($("#company").val() == "" || $("#pcarea").val() == "" || $("#province").val() == "" || $("#city").val() == "" || $("#area").val() == ""){
			layer.msg("请完善区域信息");
			cstate = "0";
			return false;
		}
		if($("#address").val() == ""){
			layer.msg("请完善地址信息");
			cstate = "0";
			return false;
		}
		/* 克为空if($("#customerid").val() == ""){
			layer.msg("请选择客户信息");
			cstate = "0";
			return false;
		} */
		if($("#remarks").val() == ""){
			layer.msg("请完善客户备注");
			cstate = "0";
			return false;
		}
		if($("#remark").val() == ""){
			layer.msg("请完善订单备注");
			cstate = "0";
			return false;
		}
		var bool = true;
		$("input[name='numbers']").each(function(k){
			if($(this).val() == ""){
				layer.msg("请完善产品的意向数量");
				cstate = "0";
				bool = false;
				return false;
			}
			if($(this).val().length > 7){
				layer.msg("请输入7位以下的数字");
				cstate = "0";
				bool = false;
				return false;
			}
			if(k == 0){
				numbers += $(this).val();
			}else{
				numbers += "," + $(this).val();
			}
		});
		if(productId == '' || productId.trim()==''){
			layer.msg("未获取到产品信息");
			cstate = "0";
			return false;
		}
		if(!bool){
			return false;
		}
		
		var data = new Object();
		data.customerId = $("#customerid").val(); 
		data.productId = productId; 
		data.numbers = numbers; 
		data.userId = '${userId}'; 
		data.remark = $("#remark").val();
		data.name = $("#name").val();
		data.phone = $("#phone").val();
		data.attributionArea = $("#pcarea").val();
		data.province = $("#province").val(); 
		data.city = $("#city").val(); 
		data.area = $("#area").val(); 
		data.address = $("#address").val(); 
		data.remarks = $("#remarks").val();
		data.company = $("#company").val();
		
		$.ajax({
	        type: "POST",
	        url: "<%=basePath%>rest/mgmOrder/immRecommended.cs",
	        data: {
	        	data:JSON.stringify(data)
	        },
	        dataType: "json",
	        success: function(data){
	        	if(data.ret == 1){
	        		layer.msg(data.msg);
	        		window.location.href = "<%=basePath%>web/mgmOrder/recommendlist.cs?type=1";
	        		/* window.history.go(-2); */
	        	}else if(data.ret == 0){
	        		layer.msg(data.msg);
	        	}
	        	cstate = "0";
	        }
	    });
	}
	
}
</script>
	<!-- 添加客户弹层 -->
	<div id="me-client" class="hide">
		<div class="titbox blubg">
			<a class="titreturn left" href="javascript:void(0);" onclick="$('#tj_client').show();$('#me-client').hide();"><img src="<%=basePath %>app/img/fanhui16@2x.png" alt=""></a>
			<div class="safe">	
				<a class="right" href="<%=basePath %>web/mgmProduct/me_people_add.cs?pids=${pids}">
					<img class="addimg" src="<%=basePath %>app/img/tianjkh@2x.png" alt="">
					<span class="smtxt">添加客户</span>
				</a>
			</div>
			<h1>我的客户</h1>
		</div> 
		<div style="margin-top:1.25rem;">
		<input id="page" value="${custom.page }" type="hidden">
		<input id="pageTotal" value="${custom.pageTotal }" type="hidden">
			<div class="slist">
				<ul id="cul">
				<c:forEach items="${custom.results }" var="c" varStatus="status">
					<li class="merecli merecli67">
						<div class="sclient">
							<div class="overFlow" onclick="merclick(this)">
							    <input type="hidden" value="${c.id }" class="cid">
							    <input type="hidden" value="${c.company }" class="company">
							    <input type="hidden" value="${c.area }" class="area">
							    <input type="hidden" value="${c.attributionArea }" class="attributionArea">
							    <input type="hidden" value="${c.province }" class="province">
							    <input type="hidden" value="${c.city }" class="city">
							    <input type="hidden" value="${c.address }" class="address">
							    <input type="hidden" value="${c.remarks }" class="remarks">
								<a class="left mepeoname name" href="javascript:void(0);" >${c.name }</a>
								<p class="right blutxt phone" >${c.phone }</p>
							</div>
							<%-- <i onclick="delrow(this, '${c.id }')">删除</i>
							<i onclick="delrow(this, '${c.id }')">编辑</i> --%>
							<div class="gai67">
							
							<div class="right" onclick="delrow(this, '${c.id }')">
								<img src="<%=basePath %>app/img/2@2x.png"  alt="">
								删除
							</div>
							<div class="right" onclick="edit('${c.id }')">
								<img src="<%=basePath %>app/img/1@2x.png"  alt="">
								编辑
							</div>
						</div>

						</div>
					</li>
				</c:forEach>
				</ul> 
				<div class="nomore" id="moreno">
                      	没有更多了。。。
                </div>
			</div>
		</div>	
	</div>
	
	
	
	<!-- 城市弹窗 -->
        <div class="cityMask hide">
            <div class="titbox blubg">
                <a class="titreturn left" href="javascript:void(0)" onclick="backper()"><img src="<%=basePath %>app/img/fanhui16@2x.png" alt=""></a>
                <h1>选择城市</h1>
            </div>
            <div class="top50">
                <ul class="cityul">
                    <li>
                        <a href="#">
                            北京
                            <img src="<%=basePath %>app/img/fanh3@2x.png" alt="">
                        </a>
                    </li>
                   
                </ul>
                
            </div>

        </div>
</body>
 <script type="text/javascript" src="<%=basePath %>app/lib/jquery.min.js"></script>
 <script type="text/javascript" src="<%=basePath %>res/js/layer/layer.min.js"></script>
 <script type="text/javascript" src="<%=basePath %>app/js/public.js"></script>
 <script>
   
    function merclick(obj){
 		$("#customerid").val($(obj).children(".cid").val());
 		$("#name").val($(obj).children(".name").text());
 		$("#phone").val($(obj).children(".phone").text());
 		$("#company").val($(obj).children(".company").val());
 		$("#area").val($(obj).children(".area").val());
 		$("#pcarea").val($(obj).children(".attributionArea").val());
 		$("#province").val($(obj).children(".province").val());
 		$("#city").val($(obj).children(".city").val());
 		$("#address").val($(obj).children(".address").val());
 		$("#remarks").val($(obj).children(".remarks").val());
 		//alert($("#customerid").val() + $("#name").val() + $("#phone").val() +$("#company").val());
 		//alert($("#area").val() + $("#pcarea").val() + $("#province").val() +$("#city").val());
 		//alert($("#address").val() + $("#remarks").val());
    	$("#tj_client").show();
 		$("#me-client").hide();
    }
    
 	$("#clientMore").click(function(){
 		$("#tj_client").hide();
 		$("#me-client").show();
	})
	
	 $(function(){
		 
		window.loaction.reload();//重新加载，这个需要在上一个页面写 
		 
       		// 滚动刷新
               // 页数，每页展示10个，请求的地址
               var url = '<%=basePath%>web/mgmProduct/getCustomerList.cs';
            var page = $("#page").val();
            var pageTotal = $("#pageTotal").val();
            if(parseInt(page)>0 && parseInt(page) < parseInt(pageTotal)){
	      		$("#moreno").text("下拉加载更多");
      		}else{
      			$("#moreno").text("没有更多了。。。");
      		}
            
            if(typeof(kindul) == "undefined"){
	       		var totalheight=0 ;
	       		var totalheight2=0 ;
	           	$(window).unbind('scroll').scroll(function(){  
	       		   	totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
	       		 	totalheight2=parseInt($(document).height());
	       	      	if( totalheight2 == parseInt(totalheight)){
	       	      		if(parseInt(page)>0 && parseInt(page) < parseInt(pageTotal)){
	       	      			$("#moreno").text("下拉加载更多");
	       		      		page = parseInt(page) + 1;
	       	      		}else{
	       	      			$("#moreno").text("没有更多了。。。");
	       	      			return false;
	       	      		}
	       	      	   $.ajax({
	                          type: 'POST',
	                          url: url + '?pageNo=' + page ,
	                          dataType: 'json',
	                          success: function (data) {
	                        	  var html="";
	                        	  data.results.forEach(function(value,index,array){
 	                        		 html += "<li class='merecli' onclick='merclick(this)'>";
 	                        		html += "<input type='hidden' value='"+value.id+"' class='cid'>";
 	                        		html += "<input type='hidden' value='"+value.company+"' class='company'>";
 	                        		html += "<input type='hidden' value='"+value.attributionArea+"' class='area'>";
 	                        		html += "<a class='left mepeoname name' href='javascript:void(0);' >"+value.name+"</a>";
 	                        		html += "<p class='right blutxt phone' >"+value.phone+"</p>";
 	                        		html += "</li>";
	                        	  });
	                        	  $('#cul').html($('#cul').html() + html);
	                          }
	                      });
	       	 		}
	       		});
            }
        });
 </script>
 
 <script type="text/javascript">
		$("#pcarea").click(function(){
        	$(".cityul").html('');
        	$.get('<%=basePath%>area/getProvice.cs',function(data){
        		var html = "";
        		for(var i in data){
        			html += "<li onclick='proclick(\""+data[i].code+"\",\""+data[i].name+"\")'>";
        			html += "<a href='javascript:void(0)'>";
        			html += data[i].name;
        			html += " <img src='<%=basePath %>app/img/fanh3@2x.png' alt=''>";
        			html += "</a>";    
        			html += "</li>";    
        		}
        		$(".cityul").html(html);
        	}); 
            $("#tj_client").hide();
            $(".cityMask").show();
        })
        
        function proclick(code, name){
        	var html = "";
        	$.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
        		for(var i in data){
        			html += "<li onclick='cityclick(\""+data[i].code+"\",\""+data[i].name+"\")'>";
        			html += "<a href='javascript:void(0)'>";
        			html += data[i].name;
        			html += " <img src='<%=basePath %>app/img/fanh3@2x.png' alt=''>";
        			html += "</a>";    
        			html += "</li>"; 
        		}
        		$(".cityul").html(html);
        	}); 
        	$('#province').val(name);
        }
        
		function cityclick(code, name){
        	var html = "";
        	$.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
        		for(var i in data){
        			html += "<li onclick='countyclick(\""+data[i].code+"\",\""+data[i].name+"\")'>";
        			html += "<a href='javascript:void(0)'>";
        			html += data[i].name;
        			html += " <img src='<%=basePath %>app/img/fanh3@2x.png' alt=''>";
        			html += "</a>";    
        			html += "</li>"; 
        		}
        		$(".cityul").html(html);
        	}); 
        	$('#city').val(name);
        }
		
        function countyclick(code, name){
        	$("#tj_client").show();
            $(".cityMask").hide();
            
            $('#area').val(name);
            $('#pcarea').val($('#province').val() + " " + $('#city').val() + " " + $('#area').val());

        }
        
        function backper(){
        	$("#tj_client").show();
            $(".cityMask").hide();
        }
		</script>
		<script>
//侧滑显示删除按钮
/* var expansion = null; //是否存在展开的list
var container = document.querySelectorAll('.slist li .sclient .divleft');
for(var i = 0; i < container.length; i++){    
    var x, y, X, Y, swipeX, swipeY;
    container[i].addEventListener('touchstart', function(event) {
        x = event.changedTouches[0].pageX;
        y = event.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true ;
        if(expansion){   //判断是否展开，如果展开则收起
            expansion.parentNode.className = "sclient";
        }        
    });
    container[i].addEventListener('touchmove', function(event){     
        X = event.changedTouches[0].pageX;
        Y = event.changedTouches[0].pageY;        
        // 左右滑动
        if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
            // 阻止事件冒泡
            event.stopPropagation();
            if(X - x > 10){   //右滑
                event.preventDefault();
                this.parentNode.className = "sclient";    //右滑收起
            }
            if(x - X > 10){   //左滑
                event.preventDefault();
                this.parentNode.className = "swipeleft";   //左滑展开
                expansion = this;
            }
            swipeY = false;
        }
        // 上下滑动
        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            swipeX = false;
        }        
    });
} */

/* var i = document.querySelectorAll('.slist li i');
i.forEach(function(item, index){
    i[index].onclick = function(){
        this.parentNode.parentNode.remove();
    };
}); */
function delrow(obj, id){
	var data = new Object();
	data.id = id;
	layer.confirm('确认删除客户？', {
		  btn: ['确认','取消'] //按钮
		}, function(){
			 $.ajax({
		         type: 'POST',
		         url: "<%=basePath%>rest/mgmCustomer/deleteCustomer.cs" ,
		         dataType: 'json',
		         data:{
		        	 data:JSON.stringify(data)
		         },
		         success: function (data) {
		       	  if(data.ret == 1){
		       		 layer.msg(data.msg);
					$(obj).parent().parent().parent().remove();
		       	  }else{
		       		 layer.msg(data.msg);
		       	  }
		         }
		     });
		}, function(){
		 
		});
}
function edit(id){
	window.location.href = '${contextPath }web/mgmCustomerWebCtl/me_people_details.cs?type=1&pids=${pids}&id=' + id;
}
</script>
</html>