<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />		
		<title>打假通</title>
		<style>
			.bg1{
				background-image: url("${ctx}/images/indexNew/body_bg5.jpg");
			    background-repeat: no-repeat;
			 	background-size: 100% 100%;
			    color: #7a8baa;
			    width:100%;
			    background-attachment: fixed;
				min-width: 1000px;
			}
			body{
				overflow:auto;
			}
			.container2 {
				color: #8fa1c1;
			    width: 90%;
			    margin: 20px auto;
			}
			.search_con {
			    background-color: rgba(28, 102, 114, 0.21);
			    padding: 15px;
			    border-radius: 5px;
			    border: 1px solid rgba(0,222,223,0.2);
			    overflow: hidden;
			}
			.sel_con {
			    width: 80%;
			}
			select {
			    color: #000;
			}
			.lf{
				float: left;
			}
			.rt{
				float: right;
			}
			input.btn {
			    background: #00B591;
			    border: none;
			    color: #fff;
			}
			.main_con {
			    background-color: rgba(28, 102, 114, 0.21);
			    border-radius: 5px;
			    border: 1px solid rgba(0,222,223,0.2);
			    overflow: hidden;
			    margin-top: 10px;
			}
			.selected {
			    background-color: rgba(28, 102, 114, 0.27);
			}
			.selected span {
			    display: inline-block;
			    padding: 10px 20px;
			}
			.on{
				background-color: #081f2b;
			    color: #fff;
			    font-weight: bold;
			}
			.main_model {
			    padding: 10px 20px;
			}
			dt {
			    color: #fff;
			    font-size: 16px;
			}
			dd {
			    text-indent: 2em;
			}
			/* 手风琴功能 */
			/* .listBox {
				width:100%;
			}
			.aa{
				background-color: rgba(28, 102, 114, 0.27);
				display: block;
				height: 35px;
			   				line-height: 35px;
			   				color: #fff;
			   				border-bottom: 1px solid rgba(0,222,223,0.2);
			   				padding-left: 10px;
			}
			.boxLi:hover,.boxLi:target {
				cursor: pointer;
			}
			.fU li {
			    height: 30px;
			    line-height: 30px;
			    text-indent: 2em;
			}
			.boxLi:last-child {
				border-bottom: none;
			}
			
			.fU {
				height: 0;
				overflow: hidden;
				transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				-webkit-transition: all .2s ease-in-out;
				-ms-transition: all .2s ease-in-out;
				-o-transition: all .2s ease-in-out;
			}
			
			.boxLi:target .fU {
				height: 10em;
			}
			a{
				color: #fff;
			}
			.fL:hover {
				background-color: rgba(28, 102, 114, 0.25);
			} */
		</style>
	</head>
	<body class="bg1">
		<!--头部-->
		<div class="headCon">
			<jsp:include page="../top.jsp">
				<jsp:param name="index" value="专项模型" />
			</jsp:include>
		</div>
		<div class="clear"></div>		
		<!--主要内容-->
		<div class="fullScren">
			<div class="container2">
			<!-- 查询 -->
				<div class="search_con">
					 <div class="sel_con lf">
		                <span>专项模型：</span>
		                <span id="search_sel">
		                    <select class="prov"></select>
		                    <select class="city" disabled="disabled"></select>
		                </span>
		                <pre></pre>
		            </div>
		            <div class="rt">
						<input type="button" value="查询" class="btn"></button>
		            </div>
				</div>
			<!--内容-->
				<div class="main_con">
					<!--手风琴的功能-->
					<!-- <ul class="listBox">
						<li class="boxLi" id="one"><a class="aa" href="#one">人伤</a>
							<ul class="fU">
								<li class="fL"><a href="javascript:void(0);">同一电话报案2次及以上人伤案件</a></li>
								<li class="fL"><a href="javascript:void(0);">同一伤者在不同案件中出现</a></li>
								<li class="fL"><a href="javascript:void(0);">三者2同一车辆出险次数3次以上的人伤案件</a></li>
							</ul>
						</li>
						<li class="boxLi" id="two"><a class="aa" href="#two">人伤2</a>
							<ul class="fU">
								<li class="fL"><a href="javascript:void(0);">同一电话报案2次及以上人伤案件</a></li>
								<li class="fL"><a href="javascript:void(0);">同一伤者在不同案件中出现</a></li>
								<li class="fL"><a href="javascript:void(0);">三者2同一车辆出险次数3次以上的人伤案件</a></li>
							</ul>
						</li>
						<li class="boxLi" id="three"><a class="aa" href="#three">人伤3</a>
							<ul class="fU">
								<li class="fL"><a href="javascript:void(0);">同一电话报案2次及以上人伤案件</a></li>
								<li class="fL"><a href="javascript:void(0);">同一伤者在不同案件中出现</a></li>
								<li class="fL"><a href="javascript:void(0);">三者2同一车辆出险次数3次以上的人伤案件</a></li>
							</ul>
						</li>
						<li class="boxLi" id="four"><a class="aa" href="#four">人伤4</a>
							<ul class="fU">
								<li class="fL"><a href="javascript:void(0);">同一电话报案2次及以上人伤案件</a></li>
								<li class="fL"><a href="javascript:void(0);">同一伤者在不同案件中出现</a></li>
								<li class="fL"><a href="javascript:void(0);">三者2同一车辆出险次数3次以上的人伤案件</a></li>
							</ul>
						</li>
					</ul> -->
					<!--选项卡-->		
					<div class="selected">
						<span class="on" data-id="manInjured">人伤</span>
						<span data-id="manInjured2">人伤2</span>
					</div> 
					<!--选项卡对应内容-->
					<div>
						<div class="main_model" id="manInjured">
							<dl>
								<dt>同一电话报案2次及以上人伤案件</dt>
								<dd>是否存在同一电话多次报案的人为制造虚假事故</dd>
							</dl>
							<dl>
								<dt>同一伤者在不同案件中出现</dt>
								<dd>是否存在伤者个人多次索赔，或制造虚假人伤</dd>
							</dl>
						</div>
						<div class="main_model" id="manInjured2" hidden>人伤的内容</div>
					</div>
				</div>
			</div>				
		</div>
		
		<script type="text/html" id="searchSel_template">
			<!for(var i=0;i<data.length;i++){!>
				<option value="<!=data[i].model!>" data-index="<!=i!>" data-id="<!=data[i].id!>"><!=data[i].model!></option>
			<!}!>
		</script>
		<script type="text/html" id="searchSel2_template">		
			<!for(var i=0;i<data.length;i++){!>
				<option value="<!=data[i].name!>" data-id="<!=data[i].id!>"><!=data[i].name!></option>
			<!}!>				
		</script>

		<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/lib/jquery.select.js"></script>
		<script src="${ctx}/js/lib/baiduTemplate.js"></script>
		<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
		<script type="text/javascript" src="${ctx}/js/lib/clipboard.min.js"></script>
		<script src="${ctx}/js/lib/core.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var result={"citylist": [
	                {"p": "人伤","id":"1","c": [{"n": "同一电话报案2次及以上人伤案件"}, {"n": "同一伤者在不同案件中出现"}, {"n": "同一车辆出险次数3次以上的人伤案件"},{"n": "三者2同一车辆出险次数3次以上的人伤案件"}]},
	                {"p": "人伤2","id":"2", "c": [{"n": "三者2"}, {"n": "电话2"}, {"n": "保单2"}]},
	                {"p": "人伤3","id":"3", "c": [{"n": "三者3"}, {"n": "电话3"}, {"n": "保单3"}]}
	            ]};
		     	$("#search_sel").citySelect({
                    url: result,
                    prov: "人伤",
                    city: "同一电话报案2次及以上人伤案件",
                    dist: "",
                    nodata: "none"
                });
                //给下拉菜单加titel
				var select_val = $("#search_sel .prov").find("option:selected").val();
				var select_val2 = $("#search_sel .city").find("option:selected").val();
				$("#search_sel .prov").attr("title",select_val);
				$("#search_sel .city").attr("title",select_val2);
				//判断二级菜单是否改变
				$("#search_sel .prov").bind("change",function(){
					var ids = $(this).find("option:selected").data("id");
					select_val=$(this).find("option:selected").val();
					$(".selected span").each(function(i){
						if(select_val==this.innerHTML){
							$(".main_model").hide();
							$(this).addClass("on").siblings().removeClass("on");
							var id = $(this).data("id");
							$("#"+id).show();
						}
					})
					
					select_val2 = $("#search_sel .city").find("option:selected").val();
					$("#search_sel .prov").attr("title",select_val);
					$("#search_sel .city").attr("title",select_val2);
				})
				$("#search_sel .city").bind("change",function(){
					select_val=$("#search_sel .prov").find("option:selected").val();
					select_val2 = $(this).find("option:selected").val();
					$("#search_sel .prov").attr("title",select_val);
					$("#search_sel .city").attr("title",select_val2);
				})//以上都是专项模型

		     	//选项卡
		     	$(".selected span").click(function(){
		     		$(".main_model").hide();
					$(this).addClass("on").siblings().removeClass("on");
					var id = $(this).data("id");
					$("#"+id).show();
					
				});

			});
		</script>
		<!-- 控制窗口高度 -->
		<script>
		    $(function () {
				$(".main_model").perfectScrollbar();
				resize();
	            $(window).resize(function(){
					resize();
				});
		    });
		    function resize(){
				//获取窗口高度
				var windowheight=$(window).height();
				var leftList = windowheight-152;
				$(".main_con").css({"height":leftList+"px"});
				$(".main_model").perfectScrollbar("update");
			}
	</script>
	</body>
</html>
