{extend name="adminblue/base" /}
{block name="resources"/}
<script src="ADMIN_JS/highcharts.js"></script>
<script src="ADMIN_JS/exporting.js"></script>
<style  type="text/css">
.w210{width:210px;}
.h30{height: 30px !important;}
.mt5 li{font-size: 12px;}
.alert-info{border-radius: 0;}
.ui-tabs-panel{
	border:1px solid #E1E6F0;
	border-top:0;
}
.ns-main{margin-top:0px;}
.option-nav{margin-top:10px;}
</style>
{/block}
{block name="alert_info"}
1、符合以下任何一种条件的订单即为有效订单：1）采用在线支付方式支付并且已付款；2）采用货到付款方式支付并且交易已完成<br/>
2、统计图展示了符合搜索条件的有效订单中的下单总金额和下单数量在时间段内的走势情况及与前一个时间段的趋势对比
{/block}
{block name="main"}
<input type="hidden" name="act" value="statistics_sale" />
<input type="hidden" name="op" value="sale" />

<table class="mytable">
	<tr>
		<td>
			<span>统计方式：</span>
			<select name="search_type" id="search_type" class="select-common middle" >
				<option value="1">按照天统计</option>
				<option value="3">按照周统计</option>
				<option value="4">按照月统计</option>
			</select>
			<button class="btn-common" value="搜索" onclick="search();">搜索</button>
		</td>
	</tr>
</table>
<div class="alert alert-info">
	<ul class="mt5">
		<li>
			<span class="w210 fl h30 " style="display:block;">
				<i title="店铺符合搜索条件的订单总金额" class="tip icon-question-sign"></i>
				总下单金额：<strong id="money">0元</strong>
			</span>
			<span class="w210 fl h30" style="display:block;">
				<i title="店铺符合搜索条件的订单数量" class="tip icon-question-sign"></i>
				总下单量：<strong id="num">0</strong>
			</span>
		</li>
	</ul>
</div>

<nav class="option-nav">
	<ul>
		<li class="selected" ><a href="javascript:;" onclick="getGoodsSalesCharts(1)">下单金额</a></li>
		<li ><a href="javascript:;" onclick="getGoodsSalesCharts(2)">下单量</a></li>
	</ul>
</nav>
<!-- 下单金额 -->
	<div id="money_div" class="ui-tabs-panel" data-highcharts-chart="1">
		<div class="highcharts-container" id="highcharts-2" style="width:99%;position:relative;overflow:hidden;height:400px;font-size:12px;"></div>
	</div>
	<!-- 下单量 -->
	<div id="num_div" class="ui-tabs-panel ui-tabs-hide hide" style="display: none;">
		<div class="highcharts-container" id="highcharts-3" style="width:99%;position:relative;overflow:hidden;height:400px;font-size:12px;"></div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
var saleNumChart,saleNumStatistical,saleNumStatistical, saleUnit,saleTitle,saleMoneyChart,saleMoneyStatistical,saleTimeStatistical,saleMoneyTimeStatistical;
var saleTimeStatistical = [ '00:00', '01:00', '02:00', '03:00', '04:00',
							'05:00', '06:00', '07:00', '08:00', '09:00',
							'10:00', '11:00', '12:00', '13:00', '14:00',
							'15:00', '16:00', '17:00', '18:00', '19:00',
							'20:00', '21:00', '22:00', '23:00' ];
var saleMoneyTimeStatistical = [ '00:00', '01:00', '02:00', '03:00', '04:00',
							'05:00', '06:00', '07:00', '08:00', '09:00',
							'10:00', '11:00', '12:00', '13:00', '14:00',
							'15:00', '16:00', '17:00', '18:00', '19:00',
							'20:00', '21:00', '22:00', '23:00' ];
var saleNumStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var saleMoneyStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
$(function() {
	
	saleNumChart = new Highcharts.Chart("highcharts-2",{
		title : {
			text : "下单金额统计",
			align : "center",
			useHTML : true
		},
		xAxis : {
			categories : saleTimeStatistical
		},
		lang : {
			printChart : "打印",
			downloadPNG : "导出PNG格式图片",
			downloadJPEG : "导出JPEG格式图片",
			downloadPDF : "导出PDF格式图片",
			downloadSVG : "导出SVG格式图片"
		},
		yAxis : {
			title : {
				text :saleUnit
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ]
		},
		tooltip : {
			valueSuffix : saleUnit
		},
		legend : {
			enabled : false
		},
		credits : {
			enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
			text : 'Niushop商城', // 显示的文字
			href : '#', // 链接地址
		},
		exporting : {
			allowHTML : true,
			buttons : {
				contextButton : {
				// text : '导出'
				}
			}
		},
		series : [ {
			name : '今日',
			data : saleNumStatistical
		}]
	});
	
	saleMoneyChart = new Highcharts.Chart("highcharts-3",{
		title : {
			text : "下单量统计",
			align : "center",
			useHTML : true
		},
		xAxis : {
			categories : saleMoneyTimeStatistical
		},
		lang : {
			printChart : "打印",
			downloadPNG : "导出PNG格式图片",
			downloadJPEG : "导出JPEG格式图片",
			downloadPDF : "导出PDF格式图片",
			downloadSVG : "导出SVG格式图片"
		},
		yAxis : {
			title : {
				text :saleUnit
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ]
		},
		tooltip : {
			 valueSuffix : saleUnit
		},
		legend : {
			enabled : false
		},
		credits : {
			enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
			text : 'Niushop商城', // 显示的文字
			href : '#', // 链接地址
		},
		exporting : {
			allowHTML : true,
			buttons : {
				contextButton : {
				// text : '导出'
				}
			}
		},
		series : [ {
			name : '今日',
			data : saleMoneyStatistical
		}]
	});
	search(1);
});
var var_type = 1;
//走势图数据
function getGoodsSalesCharts(type){
	
	var num = type-1;
	$('.option-nav ul li').eq(num).addClass('selected').siblings().removeClass('selected');
	
	var date = $("#search_type").val();
	var_type = type;//type 走势图类型 1 金额 2 数量
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/account/getshoporderchartcount')}",
		data:{ "type":type, "date":date},
		success : function(data) {
			if(type == 1){
				saleUnit = "元";
				saleNumStatistical = data[0];
				saleNumChart.update({
					xAxis : {
						categories : saleNumStatistical
					},
					tooltip : {
						 valueSuffix : saleUnit
					},
					series : [ {
						name : "下单金额",
						data : data[1]
					}],
					yAxis : {
						title : {
							text :saleUnit
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
				})
				
				$("#num_div").hide();
				$("#money_div").show();
			}else{
				saleUnit = "笔";
				saleTimeStatistical = data[0];
				saleMoneyChart.update({
					xAxis : {
						categories : saleTimeStatistical
					},
					tooltip : {
						 valueSuffix : saleUnit
					},
					series : [ {
						name : "下单量",
						data : data[1]
					}],
					yAxis : {
						title : {
							text :saleUnit
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
				})
				$("#num_div").show();
				$("#money_div").hide();
			}
		
		}
	});
}

//下单量级下单金额统计
function getShopSaleInfo(){
	var date = $("#search_type").val();
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/account/getordershopsalecount')}",
		data:{"date":date},
		success : function(data) {
			$("#money").text(data["count_money"]+"元");
			$("#num").text(data["count_num"]);
		}
	})
}
//时间筛选
function search(){
	getGoodsSalesCharts(var_type);
	getShopSaleInfo();
}
</script>
{/block}