<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../common/common.jsp" %>
<%@ taglib prefix="fn" uri="/WEB-INF/fn.tld"%>
<title>电视剧对标分析</title>
</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;
			<c:set var="tvNames" value=""/>
			<ul class="ben-item inline">
				<c:forEach items="${tvList}" var="v" varStatus="vs">
					<c:if test="${vs.index eq 0}"><c:set var="tvNames" value="${v.name}"/></c:if>
					<c:if test="${vs.index > 0}"><c:set var="tvNames" value="${tvNames.concat(',').concat(v.name)}"/></c:if>
					<li>
						<a href="javascript:void(0);" onclick="delBenId(this);" data-id='${v.id}' data-name='${v.name}' class="del">x</a>
						<div class="ben-img"><span><img src="${v.imgUrl}" width="100" height="100" onerror="javascript:this.src='${staticPath}/img/noimg.jpg';"/></span></div>
						<div class="ben-title" name="ben-title">《${v.name}》</div>
					</li>
				</c:forEach>
				<c:if test="${fn:length(tvList) < 3}">
					<li id="addBen">
						<a href="javascript:addBenId();" class="ben-img"><span>+添加</span></a>
						<div class="ben-title">&nbsp;</div>
					</li>
				</c:if>
			</ul>
			<input type="hidden" id="ids" value="${ids}" />
			<input type="hidden" id="tvNames" name="tvNames" value="${tvNames}" />
			<input type="hidden" id="day" name="day" value="${day}" />
		</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 pRight30"><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}" />
				</span>
				<div class="search-item pRight30">
					<select id="theatreTime" name="theatreTime">
						<option value="">请选择剧场</option>
						<option value="0" selected="selected">日间剧场</option>
						<option value="1">黄金剧场</option>
						<option value="2">午夜剧场</option>
						<option value="3">凌晨剧场</option>
					</select>
				</div>
				<div class="search-item pRight30"><a href="javascript:getData();" class="search-btn">搜 索</a></div>
			</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(tvList) == 2}"><c:set var="rowNum" value="50"/></c:when>
						<c:when test="${fn:length(tvList) == 3}"><c:set var="rowNum" value="30"/></c:when>
						<c:otherwise><c:set var="rowNum" value="100"/></c:otherwise>
					</c:choose>
					<c:forEach items="${tvList}" var="v" varStatus="vs">
						<div class="row-${rowNum}">
							<div class="sub-title center"><span>《${v.name}》收视率</span></div>
							<div class="padContent">
								<div id="trend_${vs.index}" 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="${tvList}" var="v" varStatus="vs">
						<div class="row-${rowNum}">
							<div class="sub-title center"><span>《${v.name}》电视剧人群构成</span></div>
							<div class="padContent">
								<div id="trend2_${vs.index}" 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="${tvList}" var="v" varStatus="vs">
						<div class="row-${rowNum}">
							<div class="sub-title center"><span>《${v.name}》产品投放时长分布</span></div>
							<div class="padContent">
								<div id="chart3_${vs.index}" 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="${tvList}" var="v" varStatus="vs">
						<div class="row-${rowNum}">
							<div class="sub-title center"><span>《${v.name}》产品投放频次分布</span></div>
							<div class="padContent">
								<div id="chart4_${vs.index}" style="height:300px;"></div>
							</div>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
</div>
<%@ include file="../common/footer.jsp" %>
<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/echart/echarts.common.min.js"></script>
<script type="text/javascript" src="${staticPath}js/echarts/esl.js"></script>
<script type="text/javascript" src="${staticPath}js/echarts/chartHead.js"></script>
<script type="text/javascript" src="${staticPath}js/echart/pie.js"></script>
<script type="text/javascript">
	$(function(){
		$.resetText();
		$.checkbox();
		$(".text").input();
		$(".table").hoverTable(true, true);
		$("#start_time, #end_time").datetimepicker();
		$("#tabMenu").tabMenu({removeClass:"btn-disabled",fun:function(obj){
				changeDateTab(obj.dataset.day);
			}});

		// 默认加载近一周数据
		var day = '${day}' || 7;
		// 日期按钮的选中效果
		selectDateBtn(day);
		if (isEmpty('${startDate}') && isEmpty('${endDate}')){
			changeDateTab(day);
		}

		// 剧场
		var theatreTimeSelect = $('select[name="theatreTime"]').select2({
			placeholder: "请选择剧场",
			allowClear: true,
			width: '120px'
		});
	});

	/*
	 * 日期按钮的选中效果
	 */
	function selectDateBtn(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");
			}
		}
	}

	/**
	 * 切换时间
	 */
	function changeDateTab(day){
		$("#day").val(day);
		var end_date = '', start_date = '';
		if(day > 0){
			end_date = new Date().addDate(-1).Format("yyyy-MM-dd");
			start_date = new Date(end_date).addDate(-day).Format("yyyy-MM-dd");
			$('#start_time').val(start_date);
			$('#end_time').val(end_date);
		}else{
			$('#start_time').val('');
			$('#end_time').val('');
		}
		$(".text").input();
		getData();
	}

	/**
	 * 获取表格与图表数据
	 */
	function getData(){
		var tvNames = $("#tvNames").val().split(',');
		var tvName = "";
		for (var index = 0; index < tvNames.length; index++) {
			tvName = tvNames[index]
			// 卫视收视率
			getRating(index, tvName);
			// 人群构成
			getTvTrendChart(index, tvName);
			// 获取指定剧的产品投放时长、频率
			getDurationByTvName(index, tvName);
		}
	}

	/**
	 * 卫视收视率
	 * @param index 下标
	 * @param name 剧名
	 */
	function getRating(index, name) {
		var pamars = {
			"name" : name,
			"theatreTime": $("#theatreTime").val(),
			"startDate": $("#start_time").val(),
			"endDate": $("#end_time").val(),
			"limitSize": 10
		};
		ajax("ajax_mediaTop_list.do", pamars, function(res){
			if (res.code == 1 && res.data.length > 0){
				var xdata = [],ydata = [];
				$.each(res.data, function(index, item){
					xdata.push(item.mediaName);
					ydata.push(item.rating29);
				});
				trendBar('收视率','',xdata,ydata,'trend_'+index);
			} else {
				$("#trend_"+index).info("暂无数据。",true);
			}
		},false);
	}

	/**
	 * 人群构成
	 * @param index 下标
	 * @param name 剧名
	 */
	function getTvTrendChart(index, name){
		var data = {
			"name" : name,
			"theatreTime": $("#theatreTime").val(),
			"startDate": $("#start_time").val(),
			"endDate": $("#end_time").val()
		};
		ajax("ajax_tv_ratio.do",data,function(res){
			if (res.code == 1 && res.data.peopleVOS.length > 0){
				var xdata = [],ydata = [];
				$.each(res.data.peopleVOS, function(index, item){
					xdata.push(item.type);
					ydata.push(item.ratio);
				});
				trendBar('比例%','',xdata,ydata,'trend2_'+index);
			} else {
				$("#trend2_"+index).info("暂无数据。",true);
			}
		},false);
	}

	/**
	 * 获取指定剧的产品投放时长、频率
	 * @param index 下标
	 * @param name 剧名
	 */
	function getDurationByTvName(index, name) {
		var data = {
			"name" : name,
			"theatreTime": $("#theatreTime").val(),
			"startDate": $("#start_time").val(),
			"endDate": $("#end_time").val()
		};
		ajax("ajax_tv_product.do",data,function(res){
			if (res.code == 1 && res.data.length > 0){
				var legend= [], series = [],xdata = [],ydata = [];
                var xOther = 0, yOther = 0;

                data1 = res.data.sort(function(a,b){
                     return b.duration-a.duration;
                 });

                $.each(data1, function(index, item){
                    if (index >= 10){
                        yOther += item.duration;
                        return true;
                    }
                    legend.push(item.name);
                     // 时长
                     var lv2 = {
                         value: item.duration,
                         name : item.name
                     };
                     ydata.push(lv2);
                });

                 data2 = res.data.sort(function(a,b){
                     return b.total-a.total;
                 });
                $.each(data2, function(index, item){
                     if (index >= 10){
                         xOther += item.total;
                         return true;
                     }
                     legend.push(item.name);
                     // 频次
                     var lv1 = {
                         value: item.total,
                         name : item.name
                     };
                     xdata.push(lv1);
                 });

                // 其它
                if (xOther > 0){
                    var temp = {
                        value: xOther,
                        name : '其它'
                    };
                    xdata.push(temp);
                }
                if (yOther > 0){
                    var temp = {
                        value: yOther,
                        name : '其它'
                    };
                    ydata.push(temp);
                }
				drawPie("chart3_"+index, ydata, "时长分布");
				drawPie("chart4_"+index, xdata, "频次分布");
			} else {
				$("#chart3_"+index).info("暂无数据。",true);
				$("#chart4_"+index).info("暂无数据。",true);
			}
		},false);
	}

	/**
	 * 移除指定对标电视剧
	 * @param obj
	 */
	function delBenId(obj){
		var idArr = $("#ids").val().split(',');
		if (idArr.length == 1){
			alert("至少保留一部对标剧");
			return false;
		}

		// 即将移除的电视剧的id
		var delId = obj.dataset.id;
		// 移除
		$(obj).closest("li").remove();

		/*
		 * 重新加载页面
		 */
		// 移除指定电视剧
		for(var i=0; i<idArr.length; i++) {
			if(idArr[i] == delId) {
				idArr.splice(i, 1);
				break;
			}
		}
		var startDate = $("#start_time").val(), endDate = $("#end_time").val(),day = $("#day").val();
		window.location.href='benchmarking.do?ids='+idArr.join(',')+'&startDate='+startDate+'&endDate='+endDate+'&day='+day;
	}

	/**
	 * 新增对标剧
	 */
	function addBenId(){
		var ids = $("#ids").val(),startDate = $("#start_time").val(), endDate = $("#end_time").val(),day = $("#day").val();
		var url = 'add_benchmarking_tv.do?ids='+ids+'&startDate='+startDate+'&endDate='+endDate+'&day='+day;
		$.openWindow('请添加对标剧',url, 470, 260, true, null, 'auto');
	}
</script>
</body>
</html>