{extend name="admin/base" /}
{block name="resources"/}
<script src="ADMIN_JS/highcharts.js"></script>
<script src="ADMIN_JS/exporting.js"></script>
<style  type="text/css">
body{
	font: 12px/20px "Hiragino Sans GB","Microsoft Yahei",arial,瀹嬩綋,"Helvetica Neue",Helvetica,STHeiTi,sans-serif !important;
}
.alert{
	color: #C09853;
	height:auto;
}
.alert-info{
	color: #3A87AD;
}
.w210{
	width:210px;
}
.h30 {
    height: 30px !important;
}
.top-alert{
	    border: 1px solid #FBEED5;
}
.w450 {
    width: 450px!important;
}
.mr50 {
    margin-right: 50px !important;
}
.count-box li{
	font: 12px/20px 'Hiragino Sans GB','Microsoft Yahei',arial,瀹嬩綋,'Helvetica Neue',Helvetica,STHeiTi,sans-serif;
}
.mytable {border: 0;}
.style0list tbody td {vertical-align: middle;}
.style0list  tbody tr {border-bottom: 1px dashed  #E3E3E3;}
a{
	cursor:pointer;
}

.charts-nav ul li{
	float:left;
	margin-left:20px;
}

.mt5 li{
	font: 12px/20px 'Hiragino Sans GB','Microsoft Yahei',arial,瀹嬩綋,'Helvetica Neue',Helvetica,STHeiTi,sans-serif;
}
.text{
	height:18px;
}
.tab-nav{
	margin-top:10px;
	border-bottom: 1px solid #e6e6e6;
	margin-left:0px;
}
</style>
 {/block}
{block name="main"}
<div class="alert mt10" style="clear:both;">
	<ul class="mt5">
		<li>1、符合以下任何一种条件的订单即为有效订单：a）采用在线支付方式支付并且已付款；b）采用货到付款方式支付并且交易已完成</li>
        <li>2、图表展示了符合搜索条件的有效订单中的下单总金额和下单商品总数排名前30位的商品</li>
      </ul>
</div>
  <table class="search-form">
    <input type="hidden" name="act" value="statistics_goods">
    <input type="hidden" name="op" value="hotgoods">
    <tbody><tr>
    	<td class="tr">
    		<div class="fr">
    			<label class="submit-border"><input type="submit" class="submit" value="搜索" onclick="searchGoodsSale();"></label>
    		</div>
    		<div class="fr">
    		  <div class="fl" style="margin-right:3px;">
    		  时间
        		<select name="search_type" id="date" class="querySelect">
        			<option value="1">按照日统计</option>
        			<option value="3">按照周统计</option>
        			<option value="4">按照月统计</option>
        		</select>
        	  </div>
    		</div>
    	</td>
    </tr>
  </tbody>
  </table>
<div class="tabmenu tab-nav">
      	<ul class="tab pngFix">
      		<li class="ui-tabs-selected">
      			<a class="a-nav"onclick="getGoodsSalesCharts(1)">下单金额</a>
      		</li>
        	<li>
        		<a class="a-nav" onclick="getGoodsSalesCharts(2)">下单商品数</a>
        	</li>
        </ul>
</div>
<div id="orderamount_div" class="ui-tabs-panel" style="display: block;">
	<div id="container_ordergamount" data-highcharts-chart="1">
		<div class="highcharts-container" id="highcharts-2" style="position: relative; overflow: hidden; width: 920px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: &amp; quot; Lucida Grande&amp;quot; , &amp; quot; Lucida Sans Unicode&amp;quot; , Verdana , Arial, Helvetica, sans-serif; font-size: 12px;"></div>
	</div>
	<!-- <div>
    		<table class="ncsc-default-table">
              <thead>
                <tr class="sortbar-array">
                  <th class="w90">序号</th>
                  <th>商品名称</th>
                  <th>下单金额</th>
                </tr>
              </thead>
              <tbody>
                                <tr>
                  <td colspan="20" class="norecord"><div class="warning-option"><i class="icon-warning-sign"></i><span>暂无符合条件的数据记录</span></div></td>
                </tr>
                              </tbody>
            </table>
    	</div> -->
    </div>
    
    <div id="goodsnum_div" class="ui-tabs-panel ui-tabs-hide hide">
	<div id="container_goodsnum" style="width: 930px;"
		data-highcharts-chart="0">
		<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 930px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: &amp; quot; Lucida Grande&amp;quot; , &amp; quot; Lucida Sans Unicode&amp;quot; , Verdana , Arial, Helvetica, sans-serif; font-size: 12px;"></div>
	</div>
	<!-- <div>
    		<table class="ncsc-default-table">
              <thead>
                <tr class="sortbar-array">
                  <th class="w90">序号</th>
                  <th>商品名称</th>
                  <th>下单商品数</th>
                </tr>
              </thead>
              <tbody>
                 <tr>
                  <td colspan="20" class="norecord"><div class="warning-option"><i class="icon-warning-sign"></i><span>暂无符合条件的数据记录</span></div></td>
                </tr>
              </tbody>
            </table>
    	</div> -->
    </div>
    
<script type="text/javascript">
var saleNumChart, saleUnit,saleTitle,saleMoneyChart;
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,0,0,0,0,0];
var saleTimeStatistical = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
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,0,0,0,0,0];
var saleMoneyTimeStatistical = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
$(function() {
	saleNumChart = new Highcharts.Chart("highcharts-2",{
	//$('#focusCharts').highcharts({
				/*chart : {
					type : 'spline',
					renderTo : 'focusCharts'
				},*/
				title : {
					text : "热卖商品top30",
					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 : '牛酷商城', // 显示的文字
					href : '#', // 链接地址
				},
				exporting : {
					allowHTML : true,
					buttons : {
						contextButton : {
						// text : '导出'
						}
					}
				},
				series : [ {
					name : '今日',
					data : saleNumStatistical
				}]
			});
			saleMoneyChart = new Highcharts.Chart("highcharts-0",{
				//$('#focusCharts').highcharts({
							/*chart : {
								type : 'spline',
								renderTo : 'focusCharts'
							},*/
							title : {
								text : "热卖商品top30",
								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 : '牛酷商城', // 显示的文字
								href : '#', // 链接地址
							},
							exporting : {
								allowHTML : true,
								buttons : {
									contextButton : {
									// text : '导出'
									}
								}
							},
							series : [ {
								name : '今日',
								data : saleMoneyStatistical
							}]
						});
	getGoodsSalesCharts(1);
});
//走势图数据
var var_type;
function getGoodsSalesCharts(type){
	$(".a-nav").css("background-color","#FFF");
	$(".a-nav").css("color","#27A9E3");
	var num = type-1;
	$(".a-nav:eq("+num+")").css("background-color","#27A9E3");
	$(".a-nav:eq("+num+")").css("color","#FFF");
	var date = $("#date").val();
	//type 走势图类型 2 金额 1 数量
	var_type = type;
	$.ajax({
		type : "post",
		url : "ADMIN_MAIN/Account/getGoodsSalesChartCount",
		async : true,
		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'
						} ]
					},
				})
				$("#orderamount_div").show();
				$("#goodsnum_div").hide();
			}else{
				saleUnit = "件";
				saleMoneyStatistical = data[0];
				saleMoneyChart.update({
					xAxis : {
						categories : saleMoneyStatistical
					},
					tooltip : {
						 valueSuffix : saleUnit
					},
					series : [ {
						name : "销售数量",
						data : data[1]
					}],
					yAxis : {
						title : {
							text :saleUnit
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
				})
				$("#goodsnum_div").show();
				$("#orderamount_div").hide();
			}
		
		}
	});
}
/**
 * 查询商品销售情况
 */
function searchGoodsSale(){
	getGoodsSalesCharts(var_type);
}
</script>
{/block}