<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header2.jsp"%>
<!-- <link type="text/css" rel="stylesheet" href="${ctx}/css/admin.css" /> -->
<title>疑案管理</title>
<style>
	.sel {
	    margin-top: 10px;
	}
	.sel input {
	    /*height: 25px;
	    line-height: 25px;*/
	    border: 1px solid #eee;
	    border-radius: 3px;
	    width: 150px;
	    padding:0px 5px;
	    background-color: #fff;
	}
	#sel_con {
	    position: absolute;
	    left: 5.3em;
	    width: 150px;
	    background-color: #fff;
	    border-radius: 3px;
	}
	#sel_con ul li:hover{
		background-color: #eee;
	}
	#sel_con ul li span{
		padding-left: 5px;
	}
	.sel_span {
	    margin-right: 20px;
	}
	.num{
		font-size: 20px;
	    font-family: initial;
	    color: #e09260;
	    font-weight: 700;
	}
	.table_main {
	    margin-top: 10px;
	}
	table#model_tab th, #model_tab td {
	    border: 1px solid #7482a2;
	    padding: 5px 10px;
	}
	/*申请按钮*/
	.apply_btn {
	    margin-top: 20px;
	    text-align: center;
	}
	.deliveryBtn{
		background-color: #00b591;
		padding: 5px 15px;
		border-radius: 5px;
		color: #fff;
		margin-right: 7px;
		cursor: pointer;
	}
	/*申请换页面布局，2018-01-09*/
	.model_apply {
	    margin-top: 15px;
	}
	.input_text{
		height: 25px;
	    line-height: 25px;
	    border: 1px solid #eee;
	    border-radius: 3px;
	    width: 150px;
	    padding-left: 5px;
	    background-color: #fff;
	}
	.model_apply span {
	   /* margin-right: 20px;*/
	    width: 48%;
    	display: inline-block;
	}
	/*下拉样式修改，2018-01-29*/
	div#sel_con ul li {
	    margin-left: -3em;
	    height: 25px;
	    line-height: 25px;
	    color: #333;
	}
</style>
</head>
<body class="bg1">
	<div class="headCon">
		<jsp:include page="/WEB-INF/jsp/top2.jsp">
		<jsp:param name="index" value="疑案管理" />
		</jsp:include>
	</div>
	<div class="container_fluid">
		<div class="searchCon left_menu managerLeft">
			<jsp:include page="/include/personalLeft.jsp">
				<jsp:param name="index" value="专项模型申请" />
			</jsp:include>
		</div>

		<div class="resultCon" style="margin-left: 255px;position:relative;">
			<div class="reSearch">
				<div class="p_bar"style="border-bottom: 1px dashed #afb4bb;">您当前的位置：专项模型申请</div>
				<div class="sel" style="position: relative;">
					<span class="sel_span" id="sel_input"><label>专项模型：</label>
						<input  type="text" name="model" value="请选择..." class="input_txt" disabled="disabled" style=""></span>
					<div class="sel_con" id="sel_con" style="display: none;">
					
					</div>
					<span class="sel_span">申请数量上限/每天：<b class="num maxNum">${total}</b>组</span>	
					<span class="sel_span">当天已申请数量：<b class="num already">${applied}</b>组</span>
					<span class="sel_span">当天可申请数量：<b class="num canNum">${rest}</b>组</span>
				</div>
			</div>
			<div class="table_main resultTable" style="width: 99%;padding: 10px;border-radius: 5px;">
				<table id="model_tab" style="white-space: pre-wrap;width: 100%;">
					<thead>
						<tr><th>模型</th><th>模型详情</th></tr>
					</thead>
					<tbody></tbody>
				</table>
				<div class="model_apply">
					<span>
						<label>分公司代码：</label>
						<select id="branch_code" class="input_txt"><option>全部</option></select>
					</span>
					<span>
						<label>维修厂：</label>
						<select id="garageName" class="input_txt"><option>全部</option></select>
						<button id="searchGarage" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin-top:-6px;padding:4px 12px;"><span class="glyphicon glyphicon-search" aria-hidden="ture"></span>选择</button>
					</span>
					<br/>	
					<span style="margin-top: 10px;">
						<label>时间范围:</label>
						      	<input
						      		disabled="disabled"
									name="minY" 
									id="minY" 
									class="input_txt" 
									style="width:155px;background-color: rgb(208, 208, 199);" 
									readonly="readonly"
									placeholder="请输入起始日期"
									onfocus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss',realDateFmt:'yyyy-MM-dd',realTimeFmt:'HH:mm:ss',minDate:'2010-01-01',maxDate:'#F{$dp.$D(\'maxY\')||\'%y-%M-%d\'}'})"/>
							    <b style="font-size:16px">/</b>
							    <input 
							 		disabled="disabled"
									name="maxY" 
									id="maxY" 
									class="input_txt" 
									style="width:155px;background-color: rgb(208, 208, 199);"  
									readonly="readonly" 
									placeholder="请输入结束日期"
									onfocus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss',realDateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'minY\')||\'2010-01-01\'}',maxDate:'%y-%M-%d'})" />
					</span>								
					<span>
						<label>申请数量：</label>
						<input id="saveNumber" type="number" name="number" class="input_txt" style="width: 60px;" min="0" value="1">
					</span>
				</div>
				<div class="apply_btn">
					<button id="apply" class="btn btn-primary"><i class="glyphicon glyphicon-send" aria-hidden="ture"></i>申请</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="padding:5px 15px;">
					<input type="text" class="input_txt" name="name" placeholder="请输入维修厂"/>
					<button type="button" class="btn btn-primary"  id="search" >
					搜索
					</button>
				</div>
				<div class="modal-body" style="color:#222;">
					<div class="resultTable" style="width: 99%;padding: 10px;border-radius: 5px;position:relative;height:300px;">				
						<table id="tbwrap" class="table table-bordered" style="table-layout:fixed;"></table>
						<div class="page eui-pager-custom" id="j_pager"></div>
					</div>
				</div>			
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal" id="cancel">取消
					</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="confrim">
					确定
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<!--  -->
	<div class="modal fade" id="customModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="padding:5px 15px;">
					自定义参数配置
				</div>
				<div class="modal-body" style="color:#222;">
					<table class="table table-bordered">
						<tr><th>名称</th><th>参数</th><th>符号</th><th>数值</th></tr>
						<tr>
							<td><span>同一电话</span></td>
							<td>
								<select class="input_txt">
									<option value="avg1">avg1</option>
									<option value="avg2">avg2</option>
								</select>
								<!-- <input type="text" class="input_txt para" placeholder="请输入参数：如avg1"> -->
							</td>
							<td><input type="text" class="input_txt sign" placeholder="请输入符号：如>=或<="></td>
							<td><input type="number" class="input_txt mathVal"  placeholder="请输入数值" style="width:100px;"></td>
						</tr>
					</table>
				</div>			
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal" id="customCancel">取消
					</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="customConfrim">
					确定
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<!--下拉列表的模板引擎-->
	<script type="text/html" id="selList_template">
		<ul>
			<!for(var i=0;i<list.length;i++){
				var item=list[i];!>
				<li data-id="<!=item.modelId!>"><span><!=item.data[0].modelName!></span></li>
			<!}!>
		</ul>
	</script>
	
	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th>序号</th>	
				<th>维修厂</th>		
			</tr>
		</thead>
		<tbody data-type="body">
			<!if(list.length>0) {!>
				<!for(var i=0,len=list.length;i<len;i++){
					var item = list[i];
				!>
				
				<tr class="gradeA <!=classItem!>" data-rowdata="<!=itemArr!>" data-markmess="<!=markMess!>">
					<td><input type="radio" name="garageName"  value="<!=item!>"/><!=i+1!></td>
					<td title="<!=item.name!>" id="garage"><!=item!></td>					
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="2"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>

	<script type="text/html" id="tabTbody_template">
		<!for(var i=0;i<data.length;i++){!>
			<tr>
				<td><input type="radio" name="model" data-ruleid="<!=data[i].id!>"><span><!=data[i].name!></span></td>
				<td><span><!=data[i].describe!></span></td>
				<td style="text-align: center;">
					<input type="number" name="number" style="width: 60px;" min="0">
				</td>
			</tr>
		<!}!>
	</script>

	<script src="${ctx}/js/lib/core.js"></script>
	<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script>
	    $(function () {
			//窗口大小变化
			resize();	
			//resultCon下的js
	    	/*var result={"datalist": [
                {"p": "人伤","id":"1","c": [{"n": "同一电话报案2次及以上人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"}, {"n": "同一伤者在不同案件中出现","describe":"是否存在同一电话多次报案的人为制造虚假事故"}, {"n": "同一车辆出险次数3次以上的人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"},{"n": "三者2同一车辆出险次数3次以上的人伤案件","describe":"是否存在同一电话多次报案的人为制造虚假事故"}]},
                {"p": "人伤2","id":"2", "c": [{"n": "三者2","describe":"三者2三者2"}, {"n": "电话2","describe":"三者2三者2"}, {"n": "保单2","describe":"三者2三者2"}]},
                {"p": "人伤3","id":"3", "c": [{"n": "三者3","describe":"三者2三者2"}, {"n": "电话3","describe":"三者2三者2"}, {"n": "保单3","describe":"三者2三者2"}]}
            ]};*/
            var result={"datalist":${datalist}};

            var str=baidu.template("selList_template",{list:result.datalist});
            console.log(result.datalist);
            $("#sel_con").html(str);
            //选择需要显示的模型
            $(".sel #sel_input").click(function(){
            	$("#sel_con").css("display","");
            });
            //点击下拉选择并赋值
          	$("#sel_con ul").delegate("li","click",function(){
          		var sel_id=$(this).data("id");
          		var sel_val=$("#sel_input input").val();
          		var this_val=$(this).text();

          		if(sel_val!=this_val){
          			$("#sel_input input").val(this_val);
          			$("#sel_input input").data("id",sel_id);
          		}

          		$("#sel_con").css("display","none");
          		for(var j=0;j<result.datalist.length;j++){
          			if(result.datalist[j].modelId==sel_id){
          				var data=result.datalist[j].data;
          				var ht2=strHtml(data);
	          			$(".table_main #model_tab").html(ht2);
          			}
	          			/*if(result.datalist[j].data[0].modelName==this_val){
	          				//var ht2=baidu.template("tabTbody_template",{data:result.datalist[i].c});
	          				var ht2=strHtml(result.datalist[j].data);
	          				$(".table_main #model_tab").html(ht2);
	          			}*/
	          		     
          		}
          		    		          		
            });
            var branchCode=[];
            $("#model_tab").delegate("input[type='radio']","click",function(){
            	var rule=$("#model_tab input[type='radio']:checked").data("ruleid");
            	$.ajax({
					type:"POST",
					data:{rule:rule},
					url:"${ctx}/sysTaskPlus/branchList.do",//请求接口
					success:function(result){
						console.log(result);
						$("#garageName").html("<option>全部</option>");
						branchCode=result.branchCodeList;
						if(branchCode.length>0){
							branchCode.unshift("全部");
						}else{
							branchCode.unshift("暂无数据");
							$("#garageName").html("<option>暂无数据</option>");
						}
						
						$("#branch_code").html(select(branchCode));
						$("#minY").val(result.minDate);
						$("#maxY").val(result.maxDate);
					},error:function(){
						alert("分公司显示失败");
					}
				})
            })
            /*var branchCode=["501010","301010"];*/
            //修理厂
           
            //分公司代码
            var garageNameList=[];
          	 $("#branch_code").bind('change',function(){
          	 	var rule=$("#model_tab input[type='radio']:checked").data("ruleid");
          	 	var bran_code=$("#branch_code option:selected").text();
          	 	if(bran_code=="全部"){
          	 		$("#garageName").html("<option>全部</option>");
          	 		return;
          	 	}
          	 	console.log(bran_code);
          	 	$.ajax({
					type:"POST",
					data:{bran_code:bran_code,rule:rule},
					url:"${ctx}/sysTaskPlus/garageList.do",//请求接口
					success:function(result){
						garageNameList=result.garageList;
						if(garageNameList.length>0){
							garageNameList.unshift("全部");
						}else{
							garageNameList.unshift("暂无数据");
						}
						$("#minY").val(result.minDate);
						$("#maxY").val(result.maxDate);
						$("#garageName").html(select2(garageNameList,bran_code));
						var garageNameht=baidu.template("tb_template",{list:garageNameList});
						$("#tbwrap").html(garageNameht);
						$(".resultTable").perfectScrollbar();
					},error:function(){
						alert("修理厂显示失败");
					}
				})
          	 })
          	
          	 function select2(data,branchCode){
            	var str="";
            	if(data.length>0){
            		for(var k=0;k<data.length;k++){
		            	str+="<option value="+data[k]+">"+data[k]+"</option>";
		            }
            	}/*else{
            		if(branchCode=="全部"){
            			
            		}else{
            			str+="<option>暂无数据</option>";
            		}
            	}*/
            	
	            return str;
            }

            function select3(data,garageName){
            	var str='';
            	if(data.length>0){
            		for(var k=0;k<data.length;k++){
            			if(data[k]==garageName){
            				str+="<option selected='selected' value="+data[k]+">"+data[k]+"</option>";
            			}else{
            				str+="<option value="+data[k]+">"+data[k]+"</option>";
            			}		            	
		            }
            	}/*else{
            		if(branchCode=="全部"){
            			
            		}else{
            			str+="<option>暂无数据</option>";
            		}
            	}*/
            	
	            return str;
            }

            //分公司代码下拉框组字符串
            function select(data){
            	var str="";
            	if(data.length>0){
            		for(var k=0;k<data.length;k++){
		            	str+="<option value="+data[k]+">"+data[k]+"</option>";
		            }
            	}
            	
	            return str;
            }
            
          	/*//点击选择
            $("#model_tab").delegate("input[type='radio']","click",function(){
            	$("#model_tab .apply_num").attr("disabled","disabled");
            	$("#model_tab .apply_num").val("");
            	$(this).parent().parent().find(".apply_num").removeAttr("disabled");
            	$(this).parent().parent().find(".apply_num").val(1);
            })*/
			$("#searchGarage").click(function(){
				if($("#branch_code option:selected").text()=="全部"){
					alert("请选择分公司");
					return false;
				}
				if($("#branch_code option:selected").text()=="暂无数据"||$("#garageName option:selected").text()=="暂无数据"){
					alert("暂无数据");
					return false;
				}
			})

			$("#search").click(function(){
				var bran_code=$("#branch_code option:selected").text();
				var garageName=$(".modal-header").find(".input_txt").val();
				var rule=$("#model_tab input[type='radio']:checked").data("ruleid");
				$.ajax({
					type:"POST",
					data:{bran_code:bran_code,garageName:garageName,rule:rule},
					url:"${ctx}/sysTaskPlus/newGarageList.do",//请求接口
					success:function(result){
						newGarageNameList=result.garageList;
						if(newGarageNameList.length>0){
							newGarageNameList.unshift("全部");
						}else{
							newGarageNameList.unshift("暂无数据");
						}
						/*$("#garageName").html(select2(newGarageNameList,bran_code));*/
						var garageNameht=baidu.template("tb_template",{list:newGarageNameList});
						$("#tbwrap").html(garageNameht);
					},error:function(){
						alert("修理厂显示失败");
					}
				})
			})
			//jiangmei
			$("#confrim").click(function(){
				var a=$(".gradeA input[type='radio']:checked").val();
				if(a==undefined || a==""){
					 return;
				}
				console.log(a);
          		$("#garageName option").each(function(i){
          			if($(this).val()==a){
          				console.log($(this).val());
          				var ht=select3(garageNameList,a);
          				$("#garageName").html(ht);
          			}
          		})
			})
          		

            //点击申请时
            $("#apply").click(function(){
            	//时间判断
            	var beginDate = $("#minY").val().toString();
			    var endDate = $("#maxY").val().toString();
				var minTime = new Date(Date.parse(beginDate.replace(/-/g,"/")));
				var maxTime = new Date(Date.parse(endDate.replace(/-/g,"/")));
				if(minTime.getTime()>maxTime.getTime()){
					alert("起始时间不能大于终止时间！");
					return false;
				}
            	//判断数字不能小于0
				var numberVal=[];
				$("input[type='number']").each(function(){
					var thisVal=$(this).val();
					if(thisVal<0){
						numberVal.push(thisVal);						
					}
				});
				if(numberVal.length>0){
					alert("输入的数字不能为负数！");
					return false;
				}
				//获取模型值
				var apply_val,check_num,ischecked=false,ruleId,argMap={},branchCode,garageName,isselArg=false;
				$("#model_tab input[type='radio']").each(function(){
					if(this.checked){
						var source=$(this).data("source");
						ischecked=true;
						apply_val=$(this).data("name");
						/*check_num=$(this).parent().parent().find("input[type='number']").val();*/
						check_num=$("#saveNumber").val();
						ruleId=$(this).data("ruleid");
						var paras = $("[data-source='"+source+"']").next().find("input");
						for(var j=0;j<paras.length;j++){
							if($(paras[j]).val()=="" || $(paras[j]).val()==0){
								isselArg=true;
								break;
							}else{
								argMap["ARG"+(j+1)] = Number($(paras[j]).val());	
							}	 
						}
						branchCode=$("#branch_code").find("option:selected").text();
						garageName=$("#garageName").find("option:selected").text();
						if(branchCode=="暂无数据"||branchCode=="全部"){
							branchCode="";
						}
						if(garageName=="暂无数据"||garageName=="全部"){
							garageName="";
						}
					}
				})
				if(isselArg){
					alert("申请的模型条件不能为空或0！");
					return false;
				}
				if(!ischecked){
					alert("请选择要申请的模型！");
					return;
				}
				//判断选择的数量
				if(check_num=='' || check_num==0){
					alert("申请的数量不能为空或0！");
					return false;
				}
				if(Number(check_num)>Number($(".resultCon .canNum").text())){
					alert("不能超过当天可申请数量，请重新输入");
					return false;
				}
				var data={model:$("#sel_input input").data("id"),rule:ruleId,taskNum:check_num,argMap:argMap,startDate:beginDate,endDate:endDate,garageName:garageName,underWritingBranchName:branchCode};
				$.ajax({
					type:"POST",
					data:data,
					url:"${ctx}/sysTaskPlus/personalTaskPlus.do",//请求接口
					success:function(result){
						if(typeof(result)=="string"){
							result=JSON.parse(result);
						}
						if(result.code=="succ"){
							$(".resultCon .already").text(result.applied);
							$(".resultCon .canNum").text(result.rest);
							alert("分配成功！");
							top.location.replace("${ctx}/sysPersonal/modelTaskApply.do?ts="+ new Date().getTime()); 
						}else if(result.status=="err"){
							alert(result.mess);
						}else{
							alert("分配失败！");
						}	
					},
					error:function(){
						alert("分配失败！");	
					}
				})
				
            })
            //默认选择第一个
          	$("#sel_con ul li").eq(0).click();	

          	//字符串遇数字截取并把数字的地方换为输入框
          	function strHtml(data){
          		var ht2='<tr><th>规则</th><th>规则详情</th><th>自定义参数配置</th></tr>';
          		for(var i=0;i<data.length;i++){
					var item=data[i].ruleName;
					var number=[];
					var reg=/\d+/g;
					var array=reg.exec(item);
					var flag=true;
					if(array!=null){
						number.push({index:array["index"],number:array[0]});
						reg.lastIndex=array["index"]+1;
						while(flag){
							array=reg.exec(item);
							if(array!=null){
								number.push({index:array["index"],number:array[0]});
								reg.lastIndex=array["index"]+1;
							}else{
								flag=false;
							}
						}
			
					}
					var resultArr=[];
					var num=0;
					for(var k=0;k<number.length;k++){
						resultArr.push({"ruleName":item.substring(num,number[k].index),"number":number[k].number});
						num=number[k].index+1;
						if(k==number.length-1){
							resultArr.push({"ruleName":item.substring(num,item.length),"number":number[k].number});
						}
													
						/*var arr=item.split(number[k].number);
						if(number.length==1){
							resultArr=[{"name":arr[0],"number":number[k].number},{"name":arr[1]}];
						}else{
							if(arr.length>1){
								resultArr.push({"name":arr[0],"number":number[k].number});
								item=arr[1];
							}else{
								resultArr.push({"name":arr[0]})
							}
						}*/
					}
					//console.log(resultArr);
					var itemStr="";
					for(var j=0;j<resultArr.length;j++){
						if(j<resultArr.length-1){
							itemStr+=resultArr[j].ruleName+'<input data-default="'+resultArr[j].number+'"  type="number" class="model_num input_txt" value="'+resultArr[j].number+'" style="width:50px;" min="0">';
						}else{
							itemStr+=resultArr[j].ruleName;
						}
					}
					/*+'<td style="text-align: center;">'
							+'<input type="number" name="number" class="apply_num" style="width: 50px;" min="0">'
						+'</td>'*/
					var describe=data[i].describe==undefined?'':data[i].describe;
					ht2+='<tr>'
						+'<td><input type="radio" name="model" data-source="'+i+'" data-ruleid="'+data[i].ruleId+'" data-name="'+data[i].ruleName+'"><span>'+itemStr+'</span></td>'
						+'<td><span>'+data[i].ruleName+'</span></td>'
						+'<td><button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#customModal" data-dismiss="modal">自定义</button></td>'
						
					+'</tr>'
				}
				return ht2;
          	}
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			$(".tbwrap").css({})
			if($("#sel_con").height()<250){
				$("#sel_con").perfectScrollbar();
			}
			$(".resultTable").perfectScrollbar("update");
			$(".resultCon").perfectScrollbar("update");
			$("#sel_con").perfectScrollbar("update");
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
