<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<%@include file="../../../../../frame/assets/header-all.jsp"%>
<style type="text/css">
	#dd>div {
	width: 100%;
    padding: 0 6px;
}

.dialog-top {
	height: 344px;
	/* border: 1px solid red; */
	overflow: hidden;
}

.dialog-top>div {
	float: left;
}

.div-img-title {
	overflow: hidden;
	margin: 1px 1px 0px -1px;
}

.div-img-title>li {
	float: left;
    width: 60px;
    height: 30px;
    text-align: center;
    padding: 9px 11px;
    color: #868585;
    background-color: #e2e1e1;
}

.div-img {
	587px
}
.info-ul{    
	margin-top: 10px;
	line-height: 20px;
}
.info-ul li {
	padding: 2px 0;
}

.view .swiper-container {
	width: 500px;
	height: 500px;
}

.view .arrow-left {
	background: url(images/index_tab_l.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -25px;
	width: 28px;
	height: 51px;
	z-index: 10;
}

.view .arrow-right {
	background: url(images/index_tab_r.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -25px;
	width: 28px;
	height: 51px;
	z-index: 10;
}

.preview {
	width: 100%;
	margin-top: 10px;
	position: relative;
}

.preview .swiper-container {
	width: 430px;
	height: 82px;
	margin-left: 35px;
}

.preview .swiper-slide {
	width: 87px;
	height: 82px;
}

.preview .slide6 {
	width: 82px;
}

.preview .arrow-left {
	background: url(images/feel3.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.preview .arrow-right {
	background: url(images/feel4.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.preview img {
	padding: 1px;
}

.preview .active-nav img {
	padding: 0;
	border: 1px solid #F00;
}


/*结束*/

.dialog-btm1 {
	overflow: hidden;
	margin-top: 110px;
}
.dialog-btm1-left{
	float: left;
}
.dialog-btm1-right{
	float: right;
}
.div-img-title li.active{
	background-color: #67c23a!important;
    border-color: #67c23a;
    height: 30px;
    width: 60px;
    text-align: center;
    color: #fff;
}
.div-img-title li{
	margin: 0 2px;
}
.info-ul li{
	margin: 4px 0;
}
.div-info{
	width: 180px;
    height: 240px;
}
.info-ul2{
	 position: absolute;
    bottom: 75px;
}
.btn-default {
    border: none;
    border-radius: 0;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #67c23a;
    color: #fff !important;
    border: 1px solid #5dab36;
}

.btn-ignore {
    border: none;
    border-radius: 0;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #e8e8e8;
    border: 1px solid #ccc9c9;
    color: #868585 !important;
}
.btn-left{
    border-radius: 0;
    border: 1px solid #cfcfcf;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #fff;
    color: red !important;
    margin: 1px 1px 8px 2px;
}
.btn-right{
    border-radius: 0;
    border: 1px solid #cfcfcf;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #fff;
    color: black !important;
}
.pc-video{
	float: left;
    /*box-shadow: 0 0 5px #a09f9f;*/
    margin: 3px 1px 1px 1px;
}
.pc-recordvideo{
	float: left;
    /*box-shadow: 0 0 5px #a09f9f;*/
    margin: 3px 1px 1px 1px;
}
.pc-video-box{
	float: left;
    box-shadow: 0 0 5px #a09f9f;
    padding: 1px 1px 1px 1px;
    width: 430px;
    height: 300px;
	/*border: 1px solid #969393;*/
}
.toCanvasBox {
    position: relative;
    width: 430px;
    height: 300px;
}
.pc-img-top>img{
	width: 480px;
    height: 245px;
}
.pc-img-topimg>img{
	margin: 1px 1px 1px 1px;
	border: 1px solid #969393;
}
.pc-img-btm{
	margin-top: 3px;
	overflow: hidden;
}
.pc-img-btm>img{
	float: left;
	height: 67px;
    width: 111px;
	margin: 1px 3px 1px 1px;	
	border: 1px solid #969393;
}
</style>
<script type="text/javascript">
$(function(){
	var winId	= getUrlParam("winId");
	var records = top.$("#"+winId).panel("options").data;
	fillDetailInfo(records);
});

function getUrlParam(name){
  	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    
  	var search = window.location.search.substr(1);
  	var href = window.location.href;
  	if(href.indexOf("?")>=0){
  		search = href.substr(href.indexOf("?")+1);
  	}
  	var r = search.match(reg);    
  	if (r != null) return decodeURI(r[2]); return null;    
}

function eventTabChange(type){
	if(type=="eventDiv"){   //事件图片
	//	console.log("$('#recordBtn')",$("#recordBtn"))
		$("#eventDiv").css("display","block");
		$(".pc-recordvideo").css("display","none");
		$(".pc-img").css("display","block");
		$("#pictureNav").addClass("active");
		
		$(".detail").css("display","none");
		$("#showDetail").removeClass("active");
		$(".div-info").css("display","block");
		$(".div-img").removeClass("width100");
	}else if(type=="detailDiv"){
		// 详情页面
		$("#eventDiv").css("display","block");
		$(".pc-img").css("display","none");
		$("#pictureNav").removeClass("active");
		
		$(".detail").css("display","block");
		$("#showDetail").addClass("active");
		$(".div-info").css("display","none");
		$(".div-img").addClass("width100");
	}
}

function fillDetailInfo(data){
	$("#hlbh").text(data.hlbh);
	$("#hllx").text(data.hllx);
	$("#hlcz").text(data.hlcz);
	$("#hlcd").text(data.hlcd);
	$("#azdw").text(data.azdw);
	$("#synx").text(data.synx);
	$("#lxr").text(data.lxr);
	$("#gysmc").text(data.gysmc);
	$("#hlmc").text(data.hlmc);
	$("#hlpp").text(data.hlpp);
	$("#ggxh").text(data.ggxh);
	$("#azsj").text(data.azsj);
	$("#hljz").text(data.hljz);
	$("#gxdwmc").text(data.gxdwmc);
	$("#lxdh").text(data.lxdh);
	$("#bz").text(data.bz);

	var proName = window.location.pathname.split("/")[1];
	var sysUrl = "http://"+window.location.host+"/"+proName;
	var picProxyGetUrl = sysUrl+"/sourceProxy?fileType=picUrlProxy&picUrl="+data.sjzp;
	$(".pc-img .pc-img-topimg img").attr("src",picProxyGetUrl);
	// 详情
	
}
</script>
</head>
<body id="bodybody" class="easyui-layout"  data-options="onBeforeClose:function(){alert(1)}">
	<div>
		<ul ID="event_tab_div" class="div-img-title" data-query="">
			<li id="pictureNav" style="cursor: pointer;" class="active" data-c="1" data-channel="" onclick="eventTabChange('eventDiv')">图片</li>
			<!-- <li id="showDetail" style="cursor: pointer;"  onclick="eventTabChange('detailDiv')">详情</li> -->
		</ul>
	</div>
	<div id="eventDiv" title="" style="border:0px solid #ff00ff;" >
	   	<div class="dialog-top" style='border:0px solid #ff00ff;'>
	   		<div class="div-img">
				<div class="pc-img" style="display:block">
					<!-- 显示图片 -->
					<div class="pc-img-topimg" style="box-shadow: 0 0 5px #a09f9f;">
						<img width="430" height="280" onerror="javascript:$.loadErrorPic(this);"/>
					</div>
				</div>
				
				<div class="detail" style="display:none">
					
				</div>
				
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   			<ul class="info-ul"> 
	   				<!-- 显示右侧告警文字信息和按钮 -->
					<li>护栏编号：<span id="hlbh"></span></li>
					<li>护栏类型：<span id="hllx"></span></li>
					<li>护栏材质：<span id="hlcz"></span></li>
					<li>护栏长度：<span id="hlcd"></span></li>
					<li>安装单位：<span id="azdw"></span></li>
					<li>使用年限：<span id="synx"></span></li>
					<li>联系人：<span id="lxr"></span></li>
					<li>供应商：<span id="gysmc"></span></li>
					<!-- <li>当前状态：<span id="currentstate"></span></li> -->
	   			</ul>
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   			<ul class="info-ul"> 
	   				<!-- 显示右侧告警文字信息和按钮 -->
					<li>护栏名称：<span id="hlmc"></span></li>
					<li>护栏品牌：<span id="hlpp"></span></li>
					<li>规格型号：<span id="ggxh"></span></li>
					<li>安装时间：<span id="azsj"></span></li>
					<li>护栏价值：<span id="hljz"></span></li>
					<li>管辖单位：<span id="gxdwmc"></span></li>
					<li>联系电话：<span id="lxdh"></span></li>
					<li>备注：<span id="bz"></span></li>
					<!-- <li>当前状态：<span id="currentstate"></span></li> -->
	   			</ul>
	   		</div>
	   	</div>
	</div>
</body>
</html>