<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../common/common.jsp" %>
<%@ taglib prefix="fn" uri="/WEB-INF/fn.tld"%>
<title>广告对标分析</title>
<script type="text/javascript">
$(function(){
	$.resetText();
	$(".text").input();
	$.checkbox();
	$(".table").hoverTable(true, true);
	$("#start_time, #end_time").datetimepicker();
	initChangeDate();
	// 选择时区
	$("#tabMenu").tabMenu({removeClass:"btn-disabled",fun:function(obj){
		changeDateTab(obj.dataset.day);
	}});
	changeTagName();
});

function initChangeDate(){
	var day = '${day}';
	// 对标进入时，默认选择一周日期
	if(isEmpty(day)){
		day = 7;
	    changeDateTab(day);
	}
	changeSelectTab(day);
	changeBenchTab();
}

//时间选中
function changeSelectTab(day){
    var length = $("#tabMenu .btn").length;
	for(var index = 0; index < length; index++) {
		var data_day = $("#tabMenu .btn:eq("+index+")").attr('data-day');
        if(data_day == day){
           $("#tabMenu .btn:eq("+index+")").removeClass("btn-disabled");
        }
    }
}

</script>
<link rel="stylesheet" type="text/css" href="${staticPath}css/jquery.datetimepicker.css" />
<script type="text/javascript" src="${staticPath}js/common/jquery.datetimepicker.js"></script>
<script type="text/javascript" src="${staticPath}js/analysis/benchmark.js"></script>
<script type="text/javascript" src="${staticPath}js/echart/echarts.common.min.js"></script>
</head>
<body>
<%@ include file="../common/head.jsp" %>
<div class="screen main bg-gray">
	<div class="radius-tabs top">
		<span class="button active">广告对标分析</span>
	</div>
	<div class="search-form">
		<div>
			<span class="blue">对标广告</span>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="hidden" id="type" name="type" value="${type}" />
			<input type="hidden" id="brandNameList" name="brandNameList" value="${brandNameList}" />
		    <input type="hidden" id="day" name="day" value="${day}" />
			<ul class="ben-item inline">
				<c:forEach items="${brandList}" var="brand">
					<li>
						<a href="javascript:void(0);" onclick="delBenId(this);" data-id='${brand.id}' data-brand='${brand.productName}' class="del">x</a>
						<div class="ben-img"><span><img src="${brand.imgUrl}" width="100" height="100" onerror="javascript:this.src='${staticPath}/img/noimg.jpg';"/></span></div>
						<div class="ben-title" name="ben-title">《${brand.productName}》</div>
					</li>
				</c:forEach>
				<c:if test="${fn:length(brandList) < 3}">
					<li id="addBen">
						<a href="javascript:addBenId();" class="ben-img"><span>+添加</span></a>
						<div class="ben-title">&nbsp;</div>
					</li>
				</c:if>
			</ul>
		</div>
		<div class="mTop20 flex">
			<div class="blue" style="width:80px;line-height:32px;">对标时间</div>
			<div class="search-group">
				<div class="buttons button-wrap inline search-item" id="tabMenu">		 
					<span class="btn btn-disabled" data-day="0">全部</span><span class="btn btn-disabled"  data-day="7">最近一周</span><span class="btn btn-disabled" data-day="90">最近三月</span><span class="btn btn-disabled" data-day="365">最近一年</span>
				</div>
				<span class="search-item"><div class="twoContent"><input type="text" name="start_time" id="start_time" class="text {text:'开始时间'}" size="10" value="${startDate}"/><span>-</span><input type="text" name="end_time" id="end_time" class="text {text:'结束时间'}" size="10" value="${endDate}"/></div></span>
				<div class="search-item">
					<a href="javascript:getBenchmarkingPieData();" class="search-btn">搜 索</a>
				</div>
			</div>
		</div>
	</div>
	<div class="table-content">
		<div class="hd-title">竞品卫视投放频次分布比较</div>
		<div class="box-sub-pad">
			<div class="box-row">
			    <c:choose>
					<c:when test="${fn:length(brandList) == 2}"><c:set var="rowNum" value="50"/></c:when>
					<c:when test="${fn:length(brandList) == 3}"><c:set var="rowNum" value="30"/></c:when>
					<c:otherwise><c:set var="rowNum" value="100"/></c:otherwise>
				</c:choose>
				<c:forEach items="${brandList}" var="v" varStatus="vs">
					<div class="row-${rowNum}">
						<div class="sub-title center"><span name='brand_${vs.count}'></span> <span name='title_1'></span> </div>
						<div class="padContent">
							<div id="chart1_${vs.count}" style="height:300px"></div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="table-content">
		<div class="hd-title mTop20">竞品卫视投放时长分布比较</div>
		<div class="box-sub-pad">
			<div class="box-row">
			    <c:forEach items="${brandList}" var="v" varStatus="vs">
					<div class="row-${rowNum}">
						<div class="sub-title center"><span name='brand_${vs.count}'></span> <span name='title_2'></span> </div>
						<div class="padContent">
							<div id="chart2_${vs.count}" style="height:300px"></div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="table-content">
		<div class="hd-title mTop20">竞品电视剧环境投放频次分布比较</div>
		<div class="box-sub-pad">
			<div class="box-row">
		        <c:forEach items="${brandList}" var="v" varStatus="vs">
					<div class="row-${rowNum}">
						<div class="sub-title center"><span name='brand_${vs.count}'></span> <span name='title_3'></span> </div>
						<div class="padContent">
							<div id="chart3_${vs.count}" style="height:300px"></div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="table-content bBorder20">
		<div class="hd-title mTop20">竞品电视剧环境投放时长分布比较</div>
		<div class="box-sub-pad">
			<div class="box-row">
			    <c:forEach items="${brandList}" var="v" varStatus="vs">
					<div class="row-${rowNum}">
						<div class="sub-title center"><span name='brand_${vs.count}'></span> <span name='title_4'></span> </div>
						<div class="padContent">
							<div id="chart4_${vs.count}" style="height:300px"></div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
</div>
<%@ include file="../common/footer.jsp" %>
</body>
</html>