<%@ 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);
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<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>
    <base href="${contextPath}">
    <script src="app/lib/flexible.js"></script>
    <script type="text/javascript" src="res/js/jquery.min.js"></script>
    <script type="text/javascript" src="res/js/layer/layer.min.js"></script>
    <script type="text/javascript" src="app/js/public.js"></script>
    <script type="text/javascript" src="app/js/imgUp.js"></script>
    <script src="app/lib/swiper-4.3.2.min.js"></script>
    <link rel="stylesheet" href="app/lib/flexible.css">
    <link rel="stylesheet" href="app/lib/swiper-4.3.2.min.css" />
	<link rel="stylesheet" href="app/css/basem.css">
	<link rel="stylesheet" href="app/css/logome.css">
	<link rel="stylesheet" href="app/css/public.css">
	<link rel="stylesheet" href="app/css/index.css">
	<link rel="stylesheet" href="app/css/sc_common.css">
	<link rel="stylesheet" href="app/css/sc_img.css">
	<style type="text/css">
		.terminated {
		    position: absolute;
		    top: 0;
		    right: 0.5rem;
		}
	</style>
</head>
<body>
        <div class="titbox blubg">
            <a class="titreturn left" href="javascript:void(0)" onclick="javascript:history.go(-1)"><img src="app/img/fanhui16@2x.png" alt=""></a>
            <h1>推介进度</h1>
        </a>
        </div>
        <div class="top50 recomDeta">
            <ul class="kindul productul recommUl orderUL">
               <li class="current">
                    <a href="javascript:void(0)" title="odProgress"> 
                        推介进度
                        <i></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" title="odNum"> 
                        客户详情
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" title="odDet"> 
                        产品详情
                    </a>
                </li>
            </ul>    
            
            <div class="orderInfo">
                <div class="processTrace hide show" id="odProgress">
                    <div class="curve">
                        <p>当前状态：<span class='state'>
                        	<c:if test="${orderType=='1'}">
											<c:choose>
											<c:when test="${orderState=='0'}">备案成功</c:when>
											<c:when test="${orderState=='1'}">受理成功</c:when>
											<c:when test="${orderState=='2'}">邀约成功</c:when>
											<c:when test="${orderState=='3'}">到访成功</c:when>
											<c:when test="${orderState=='4'}">认购成功</c:when>
											<c:when test="${orderState=='5'}">签约成功</c:when>
											<c:when test="${orderState=='6'}">确认签约</c:when>
											<c:otherwise>
												交房
											</c:otherwise>
										</c:choose>
									</c:if>
									<c:if test="${orderType=='2' }">
										<c:choose>
											<c:when test="${orderState=='0'}">备案成功</c:when>
											<c:when test="${orderState=='1'}">订单推进中</c:when>
											<c:when test="${orderState=='2'}">签约成功</c:when>
											<c:when test="${orderState=='3'}">确认签约</c:when>
										</c:choose>
									</c:if>
                        
                        
                        </span></p>
                        <p class="curTime">更新日期：<span><fmt:formatDate value="${modifyDate}" pattern="yyyy-MM-dd" /></span></p>
                    </div>
                   <div class="orderUls">
                    <ul class='haveWrite'>
                    
                    	<c:forEach var="list" items="${list}" varStatus="status">
                    		<c:if test="${orderType=='2'}">
                    			<%-- <c:choose>
                    				<c:when test="${status.index=='0'  || status.index=='1'  || status.index=='3' }">
                    					<li class="${status.index==orderState?'currentLi':''}">
			                                <div class="dott">
			                                    <span class="dottImg"></span>
			                                <!--   <span></span>   -->
			                                </div>
			                                <div class="flowpathCont">
			                                    <p class="trackingT">${list.name}</p>
			                                    <p class="trackingTime ">${list.fill_content}</p>
			                                    <p class="trackingTime "><fmt:formatDate value="${list.fill_time}" pattern="yyyy-MM-dd" /></p>
			                                </div>
			                            </li>
                    				</c:when>
                    				<c:otherwise> --%>
                    					<li class="${status.index==orderState?'currentLi':''}">
			                                <div class="dott">
			                                    <span class="dottImg"></span>
			                               		 <span>${list.action}</span>  
			                                </div>
			                                <div class="flowpathCont">
			                                    <p class="trackingT">${list.name}</p>
			                                    
			                                    <c:choose>
			                                    	<c:when test="${list.fillflg == '1'}">
			                                    		 <a href="javascript:void(0)" onclick="fill('${orderState+1}');" class="blubg planWrite">进度填报</a>
			                                    	</c:when>
			                                    	<c:otherwise>
			                                    		 <p class="trackingTime ">${list.fill_content}</p>
			                                   			 <p class="trackingTime "><fmt:formatDate value="${list.fill_time}" pattern="yyyy-MM-dd" /></p>
			                                    		
			                                    	</c:otherwise>
			                                    </c:choose>
			                                    		<c:set value="${ fn:split(list.imge_url1, ',') }" var="imge_url1" />
			                                    		<c:if test="${imge_url1!= null && fn:length(imge_url1) > 0}">
			                                    			  <div class="surePic">
			                                    			  	<c:forEach items="${imge_url1}" var="img">
																	 <c:if test="${not empty img}"> 
																		 <img src="${img}" alt="">		    
																	 </c:if>
																</c:forEach>
			                                    			  </div>
			                                    		</c:if>
			                                    
			                                </div>
			                            </li>
                    			<%-- 	</c:otherwise>
                    			</c:choose> --%>
                    		</c:if>
                    		<c:if test="${orderType=='1'}">
                    		<%-- 	<c:choose>
                    				<c:when test="${status.index=='0' || status.index=='1' || status.index=='6'  }">
                    					<li class="${status.index==orderState?'currentLi':''}">
			                                <div class="dott">
			                                    <span class="dottImg"></span>
			                                <!--   <span></span>   -->
			                                </div>
			                                <div class="flowpathCont">
			                                    <p class="trackingT">${list.name}</p>
			                                    <p class="trackingTime ">${list.fill_content}</p>
			                                    <p class="trackingTime "><fmt:formatDate value="${list.fill_time}" pattern="yyyy-MM-dd" /></p>
			                                </div>
			                            </li>
                    				</c:when>
                    				<c:otherwise> --%>
                    					<li class="${status.index==orderState?'currentLi':''}">
			                                <div class="dott">
			                                    <span class="dottImg"></span>
			                                  <span>${list.action}</span>  
			                                </div>
			                                <div class="flowpathCont">
			                                    <p class="trackingT">${list.name}</p>
			                                    <c:choose>
			                                    	<c:when test="${list.fillflg == '1'}">
			                                   		<%-- 	  <c:choose>
			                                    		 	<c:when test="${status.index=='5'}">
			                                    		 		 <a href="javascript:void(0)" onclick="fill(2);" class="blubg planWrite">进度填报</a>
			                                    	        </c:when>
			                                    		 	<c:otherwise>
			                                    		 	</c:otherwise>
			                                    		 </c:choose> --%>
			                                    		 <a href="javascript:void(0)" onclick="fill('${orderState+1}');" class="blubg planWrite">进度填报</a>
			                                    	</c:when>
			                                    	<c:otherwise>
			                                    		 
			                                    		  <p class="trackingTime ">${list.fill_content}</p>
			                                   			 <p class="trackingTime "><fmt:formatDate value="${list.fill_time}" pattern="yyyy-MM-dd" /></p>
			                                    	</c:otherwise>
			                                    </c:choose>
			                                    
			                                    		<c:set value="${ fn:split(list.imge_url1, ',') }" var="imge_url1" />
			                                    		<c:if test="${imge_url1!= null && fn:length(imge_url1) > 0}">
			                                    			  <div class="surePic">
			                                    			  	<c:forEach items="${imge_url1}" var="img">
																	 <c:if test="${not empty img}"> 
																		 <img src="${img}" alt="">		    
																	 </c:if>
																</c:forEach>
			                                    			  </div>
			                                    		</c:if>
			                                </div>
			                            </li>
                    			<%-- 	</c:otherwise>
                    			</c:choose> --%>
                    		
                    		</c:if>
                    	</c:forEach>
                    </ul>
                </div>
               </div>
                 <div id="odNum" class="hide">
                    <div class="whbg ">
                        <div class="safe">
                            <ul>
                                <li class="merecli">
                                    <p class="meaddle left">客户姓名：</p>
                                    <input class="meaddinpu left" type="text" value="${maptemp['name']}" readonly="readonly">
                                </li>
                                <li class="merecli">
                                    <p class="meaddle left">联系电话：</p><a style="color: rgb(16, 77, 159);"  href="tel:${maptemp['phone']}">${maptemp['phone']}</a>
                                </li>
                                <li class="merecli">
                                    <p class="meaddle left">工作单位：</p>
                                    <input class="meaddinpu left" type="text" value="${maptemp['company']}" readonly="readonly">
                                </li>
                                <li class="merecli">
                                    <p class="meaddle left">所在区域：</p>
                                    <input class="meaddinpu left" type="text" value="${maptemp['attributionArea']}" readonly="readonly">
                                </li>
                                <li class="merecli meaddlila">
                                    <p class="meaddle left">详细地址：</p>
                                    <textarea class="meaddinpu left" style="border:none;padding-top:0.1rem;" name="" id="" readonly="readonly">${maptemp['address']}</textarea>
                                </li>
                            </ul> 
                        </div>
                    </div>
                    <div class="whbg top10">
                        <div class="safe">
                            <ul>
                                <li class="merecli">
                                    <p class="meaddle left">跟单人员：</p>
                                    <input class="meaddinpu left graytxt" type="text" value="${maptemp['salerName']}" readonly="readonly">
                                </li>
                                <li class="merecli">
                                    <p class="meaddle left">联系方式：</p>
                                    <input class="meaddinpu left graytxt" type="text" value="${maptemp['salerPhone']}" readonly="readonly">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="odDet" class="hide">
                    <div class="referrals">
                        <ul id="productlist">
                        	<c:forEach var="listproduct" items="${listproduct}" varStatus="status">
                        		 <li>
	                                <a href='web/mgmProduct/detail.cs?productid=${listproduct.productId}&plat=H5'>
	                                    <div class="referinfo">
	                                        <img src=" ${listproduct.fill_time!=''?listproduct.productImg:'app/img/jz2@2x.png'}" alt="">
	                                        <div class="referCont">
	                                            <p class="refertit">${listproduct.productName}</p>
	                                            <p>
	                                                <span class="designation">佣金：</span>
	                                                <span class="graytxt"> ${listproduct.commissionRate}</span>
	                                            </p>
	                                            <p>
	                                                <span class="designation">售价：</span>
	                                                <span class="price">¥${listproduct.price}${listproduct.unit}</span>
	                                            </p>
	                                            <p>
	                                                <span class="designation">意向数量：</span>
	                                                <span class="blutxt">${listproduct.willCnt}${listproduct.unit}</span>
	                                            </p>
	                                        </div>
	                                    </div>
	                                </a>
                           		</li>
                        	</c:forEach>
                        </ul>
                    </div>
            </div>


            </div>
            



        </div>
	<script type="text/javascript">
	var page=1;
	var totalpage="${pageTotal}";
	var totalheight=0 ;
	var totalheight2=0 ;
    		$(window).scroll(function(){ 
    		   	totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
    	      	if($(document).height() == totalheight){
    	      	  page++;
    	    	  if(page<=totalpage){
    	    		 	 $.ajax({
    	    				  type: 'POST',
    	    				  url: '${contextPath}web/mgmOrder/orderPruductDetails.cs?page='+page,
    	    				  dataType:"html",
    	    				  data:"",
    	    				  success: function(html){
    	    					  $('#productlist').append(html);
    	    	             }
    	    			}); 
    	    	  }else{
    	    		  page =  totalpage ;
    	    	  }
    	 		}
    		}); 
    	//填报进度触发
    	function fill(obj){
			var orderState = "${orderState}";
			var orderType="${orderType}"
    		if(orderState=='4' && orderType=="1"){
    			$("#selectmoney").show();
    			$("#blubtnsuccess").attr("onclick","submit_form_commission()");
    		}else if(orderState=='1' && orderType=="2"){
    			$("#selectmoney").show();
    			$("#blubtnsuccess").attr("onclick","submit_form_commission()");
    		}else{
    			$("#spgl").hide();
    			$("#tbjd").show();
    		}
			$("#orderState").val(obj);
    	}	
    	//签约提交
    	function submit_form_commission(){
    		var selecttype = $("#selecttype").val();
    		$("#commissionMeans").val(selecttype);
    		var t = true;
    		if(selecttype=='1'){
    			$("input[validte='true']").each(function(){
    				  if(t){
    					 var val = $(this).val();
	     				  	if(val==""){
	     						layer.msg($(this).attr("validtemsg"));
	     						t=false;
	     					}	
    				  }
    			});
    		}else if(selecttype=='2'){
    			$(".sellInfo input[type='text']").each(function(){
	  				  if(t){
	  					var val = $(this).val();
		     				   if(val==""){
		     						layer.msg($(this).attr("validtemsg"));
		     						t=false;
		     					}	
	  				  }
  		　 		});
    		}
    		if(t){
				if($("#presentationCondition").val()==''){
        			layer.msg("请填写情况说明");
        			return false;
        		}
			}else {
				return false;
			}
    		$.ajax({
                url:"${contextPath}/web/mgmOrder/signAcntract.cs",
                type:"post",
                data: $('#orderinfo').serialize(),
                success:function(data){
                	var datas=eval(data.data);
    				console.log(data);
    				if (data.ret == 1) {
    					layer.msg(data.msg);
    					location.reload();
    				}else{
    					layer.alert(data.msg);
    				}
                },
                error:function(e){
                    alert("错误！！");
                }
            });  
    		
    	}
    	//一般提交
    	function submit_form(code){
    		if($("#presentationCondition").val()==''){
    			layer.msg("请填写情况说明");
    			return false;
    		}
    		$.ajax({
                url:"${contextPath}/web/mgmOrder/orderFillProgress.cs",
                type:"post",
                data: $('#orderinfo').serialize(),
                success:function(data){
                	var datas=eval(data.data);
    				console.log(data);
    				if (data.ret == 1) {
    					layer.msg(data.msg);
    					location.reload();
    				}else{
    					layer.alert(data.msg);
    				}
                },
                error:function(e){
                    alert("错误！！");
                }
            });  
    	}
    	
    		
    </script>
		<div id="tbjd" class="recomMask" style="display:none;">
           <div class="recomWrite">
				<form action="" id="orderinfo">
					<input type="hidden" name="orderId" value="${orderId}"/>
					<input type="hidden" name="orderState" id="orderState" value="${orderState}"/>
					<input type="hidden" name="commissionMeans" id="commissionMeans"/>
                <p class="sharetit"><img src="app/img/line.png" alt="">进度填报<img src="app/img/line.png" alt=""><img onclick="div_colse('tbjd')" src="app/img/x.png" alt="" class="writeCancel"></p>
              
              	<c:if test="${listproduct!= null && fn:length(listproduct) > 0}">
              		  <div class="recomP" id="spgl">
					<!-- 主导销售 -->
					
					<div class="sellInfo">
						<p class="blutxt">商品管理</p>
						<c:forEach var="listproduct" items="${listproduct}" varStatus="status">
							<input name="productId" type="hidden" value="${listproduct.id}"/>
							
							<div class="sellGoods">
							<div>
								<span class="htxt fl">${listproduct.productName}</span>
								<input type="text" placeholder="" name="productName" class="redtxt fr" readonly="readonly" value="¥${listproduct.price}元/${listproduct.unit}">
							</div>
							<div >
								<span class="fl">佣金比例金额：</span>
								<input type="text" name="commissionRate" onkeyup="clearNoNum(this)" class="fr" validte="true" validtemsg="请输入佣金比例金额" value="${listproduct.commissionRate}">
							</div>

							<div class="zdxs">
								<p class="fl">溢出价佣金比例：</p>
								<input type="text" name="commissionRateYc" onkeyup="clearNoNum(this)" class="fr" validtemsg="请输入溢出价佣金比例">
							</div>
							<div>
								<span class="fl">认购数量</span>
								<input type="text" name="numbers" class="fr" onkeyup="clearNoNum(this)" value="${listproduct.willCnt}" validte="true" validtemsg="请输入认购数量" >
							</div>
							<div class="zdxs">
								<span class="fl">标准价金额：</span>
								<input type="text" name="standardAmount" onkeyup="clearNoNum(this)" class="fr"  validtemsg="请输入标准价金额" >
							</div>
							<div >
								<span class="htxt fl">成交金额：</span>
								<input type="text" name="volumeTransaction" onkeyup="clearNoNum(this)" class="fr" validte="true" validtemsg="请输入成交金额" >
							</div>
						</div>
						</c:forEach>
						<div  class="Contract">
							<span class="redtxt fl">合同金额：</span>
							<input type="text" placeholder="" class="redtxt fr" onkeyup="clearNoNum(this)" name="contractGrandTotal" validte="true"  validtemsg="请输入合同金额">
						</div>
					</div>
				</div>
				</c:if>
                <div class="recomP">
                    <p>情况说明：</p>
                    <textarea name="presentationCondition" id="presentationCondition" cols="30" rows="4" placeholder="请输入情况说明" class="contents"></textarea>
                 <!--    <p>上传图片 <span class="fr">(最多可上传五张图片)</span></p>
                    <div class="planPic">
                        <input type="file">
                   </div> -->
                   <div class="img-box full">
						<section class=" img-section">
							<p >上传图片：<span class="fr">(最多可上传五张图片)</span></p>
							<div class="z_photo upimg-div clear" >
									 <section class="z_file fl">
										<img src="app/img/shangchuan@2x.png" class="add-img">
										<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
									 </section>
							 </div>
						 </section>
					</div>
					<aside class="mask works-mask">
						<div class="mask-content">
							<p class="del-p ">您确定要删除吗？</p>
							<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
						</div>
					</aside>
                   
                    <a id="blubtnsuccess" href="javascript:void(0)" onclick="submit_form();" class="blubtn bluSucess">填报完成</a>
					</form>
				</div>
                </div>
          
        </div>    
        
        
         <div id="selectmoney" class="recomMask"  style="display:none;">
           <div class="recomWrite">
                <p class="sharetit"><img src="app/img/line.png" alt="">进度填报<img src="app/img/line.png" alt=""><img onclick="div_colse('selectmoney')" src="app/img/x.png" alt="" class="writeCancel"></p>
               
                <div class="recomMoney">
                    <p>请选择佣金计算方式</p>
                    <div class="moneyway">
                        <a href="javacript:void(0)" onclick="selectmoney('1');" class="fl active">信息推介</a>
                        <a href="javacript:void(0)" onclick="selectmoney('2');" class="fr">主导销售</a>
                        <input type="hidden" id="selecttype" value="1"/>
                    </div>
                     <p class="top50"><img src="app/img/notice@2x.png" alt="">佣金以实际发放为准，此处仅做参考</p>
                </div>
                <a href="javacript:void(0)" onclick="next();" class="blubtn bluSucess">下一步</a>
           </div>
        </div>    
        <script type="text/javascript">
        	//选中改变值
        	function selectmoney(obj){
        		$("#selecttype").val(obj);
        	}
        	//下一步处理
        	function next(){
        		$(".zdxs").hide();
        		var selecttype = $("#selecttype").val();
        		if(selecttype=="2"){
        			$(".zdxs").show();
        		}else{
        			$(".zdxs").hide();
        		}
        		$("#selectmoney").hide();
        		$("#tbjd").show();
        	}
        	function clearNoNum(obj){ 
        	    obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
        	    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
        	    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
        	 //   obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
        	    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
        	        obj.value= parseFloat(obj.value); 
        	    } 
        	}
        	function div_colse(id){
        		$("#"+id).hide();
        	}
        </script>
    </body>
</html>