<?php include_once(mvc::$cfg['PATH_TPL'].'public/headBase.php');?>
<div class="marauto mar10 pad10">
	<nav class="navbar navbar-default navbar-fixed-top">
	    <div class="collapse navbar-collapse">
	        <ul class="nav navbar-nav">
	      	<?php foreach($menu as $k=>$v){?>
		        <li <?php if($v==$Params['from']){?> class="active" <?php }?>><a href="<?php echo mvc::$cfg['ADMIN_URI'];?>pjlShop/tongJi?from=<?php echo $v;?>"><?php echo $k;?><span class="sr-only"></span></a></li>
	        <?php }?>
	        </ul>
	    </div>
	</nav>
	<div class="mart10" style="margin-top: 45px;">
		<form class="form-inline">
		    <div class="form-group ">
			    <input type="text" name="range" autocomplete="off" readonly="" class="form-control" id="date_check" placeholder="请选择日期" value="<?php echo $Params['range'];?>">
		    </div>
		    <button type="submit" class="btn btn-default marr10">查询</button>
		    <div class="form-group">
		    	<?php foreach($dateArr as $k =>$v){?>
		    	<a href="<?php echo mvc::$cfg['ADMIN_URI'];?>pjlShop/tongJi?<?php echo http_build_query(array_merge($Params,['limit'=>$v,'range'=>'','page'=>1]));?>" class="marr10  <?php if($v!=$Params['limit']||!empty($Params['range'])){?> a_blue <?php }?>"><?php echo $k;?></a>
			    <?php }?>
		    </div>
		</form>
	</div>
	<?php if(!empty($lists)){?>
	<div class="mart10">
		<div id="echarts" style="height: 400px;"></div>
	</div>
	<?php }?>
	<div class="mart10">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="130">日期</th>
					<th class="right">新增用户</th>
					<th class="right">活跃用户</th>
					<th class="right">启动次数</th>
					<th class="right">累计用户</th>
				</tr>
			</thead>
			<tbody>
				<?php if(!empty($lists)){?>
				<?php foreach($lists as $v){?>
				<tr>
					<td><?php echo date('Y-m-d',strtotime($v['da_date']));?></td>
					<td class="right"><?php echo $v['da_new'];?></td>
					<td class="right"><?php echo $v['da_active'];?></td>
					<td class="right"><?php echo $v['da_start'];?></td>
					<td class="right"><?php echo $v['da_total'];?></td>
				</tr>
				<?php }?>
				<?php }else{?>
				<tr>
					<td colspan="5" class="red center">暂无数据</td>
				</tr>
				<?php }?>
			</tbody>
		</table>
		<?php echo $Page;?>
	</div>
</div>
<?php include_once(mvc::$cfg['PATH_TPL'].'public/footBase.php');?>
<script type="text/javascript" src="<?php echo mvc::$cfg['ADMIN_URL'];?>static/laydate/laydate.js?ver=1.0.0"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['ADMIN_URL'];?>static/js/echarts.min.js"></script>
<script type="text/javascript">
	laydate.render({ 
      elem: '#date_check',
      format: 'yyyy-MM-dd', //可任意组合
      range: '~' 
    });
    $(function(){
    	<?php if(!empty($lists)){?>
	    var myChart = echarts.init(document.getElementById('echarts'));
		// 指定图表的配置项和数据
		var option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    legend: {
		        data:['新增用户','活跃用户','启动次数','累计用户']
		    },
		    xAxis: [
		        {
		            type: 'category',
		            name:'日期',
		            data: <?php echo json_encode(array_reverse(array_map(function($v){return date('Y-m-d',strtotime($v));},array_column($lists, 'da_date'))));?>,
		            axisPointer: {
		                type: 'shadow'
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '用户数',
		            scale:true,
		        },
		        {
		            type: 'value',
		            name: '用户数',
		            scale:true,
		        }
		    ],
		    series: [
		        {
		            name:'新增用户',
		            type:'line',
		            yAxisIndex: 0,
		            data:<?php echo json_encode(array_reverse(array_column($lists, 'da_new')));?>,
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            },
		            itemStyle:{
		            	color:'green'
		            }
		        },
		        {
		            name:'活跃用户',
		            type:'line',
		            yAxisIndex: 0,
		            data:<?php echo json_encode(array_reverse(array_column($lists, 'da_active')));?>,
		            itemStyle:{
		            	color:'red'
		            }
		        },
		        {
		            name:'启动次数',
		            type:'bar',
		            yAxisIndex: 1,
		            data:<?php echo json_encode(array_reverse(array_column($lists, 'da_start')));?>,

		            itemStyle:{
		            	color:'#ffc107'
		            }
		        },
		        {
		            name:'累计用户',
		            type:'bar',
		            yAxisIndex: 1,
		            data:<?php echo json_encode(array_reverse(array_column($lists, 'da_total')));?>,

		            itemStyle:{
		            	color:'#03a9f4'
		            }
		        }
		    ]
		};
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
		<?php }?>
    })
</script>