{layout name="layout" /}
<style>
.ech_top {
    width: 100%;
}
.in_con {
    height: auto;
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding-left: 5px;
}
.ech06 {
    float: left;
    height: 400px;
    width: 100%;
}
.ech07 {
    float: left;
    height: 400px;
    width: 100%;
}
.ech_nr2 {
    float: left;
}
.in_exd {
    height: 400px;
}
.set-top {
    margin-top: 10px;
    margin-bottom: 10px;
	margin-left:20px;
}
</style>			
    <div class="if_wrap">
        <div id="if_con" style="min-width:1400px;">
        	<div class="cus_con">
				<div class="set-top">  按年月查看   
			        <div class="layui-inline">
							<form class="layui-form layui-form-pane1" method="get" action="" >
						          <div class="layui-form-item">
						            <div class="layui-input-inline">
										<select name="year"  lay-filter="year"  >
										  {for start="2010" end="$endYear"}
										  	<option value="{$i}" {$year==$i?'selected':''}>{$i}年</option>
										  {/for}
										</select>
						            </div>
									<div class="layui-input-inline">
										<select name="month" lay-filter="month" >
											<option value="0">全年</option>
										    {for start="1" end="13"}
										    	<option value="{$i}" {$month==$i?'selected':''}>{$i}月</option>
										    {/for}
										</select>
									</div>
									<div class="layui-input-inline">
										<select name="day"  >
											<option value="0">全月</option>
										</select>
									</div>
									<button class="layui-btn" lay-submit lay-filter="*">立即查看</button>
						       </div>
					    	</form>
				    </div>
				</div>

                <br>
                <div class="in_con">
					<div class="in_top">会员总数<span>{$totalAll.usersTotal}</span>人,粉丝总数<span>{$totalAll.phoneTotal}</span>人</div>

                    <br><br>
					<div class="in_exd">
                    	<div class="ech_top">
                    		<div class="ech_tit">{$titleDate}-会员增减走势图</div> 
                            <div class="ech_nr2">
                            		<div>
                            		<span>{$totalDate}公众号净增粉丝总数：&nbsp;{$data['netGrowthAddUsersAllTotal']?:0}&nbsp;人</span>
									<strong>{$totalDate}公众号跑路粉丝总数：&nbsp; {$data['delUsersAllTotal']?:0}&nbsp;人</strong>
	                            	<span>{$totalDate}公众号新增粉丝总数：&nbsp;{$data['addUsersAllTotal']?:0}&nbsp;人</span>
	                            	</div>
                            </div>
                        </div>
                         <div id="ech06" class="ech06"></div>
                    </div>

                    <!--
					<div class="in_exd">
                    	<div class="ech_top">
                    		<div class="ech_tit">{$titleDate}- 导入粉丝信息走势图</div>
                            <div class="ech_nr2">
                            	<div>
	                            	<span>{$totalDate}导入粉丝：&nbsp;{$data['phoneUsersAllTotal']?:0}&nbsp;人</span>
                            	</div>
							</div>
                        </div>
                        <div id="ech07" class="ech07"></div>
                    </div>
                    -->

                </div>
            </div>
            
        </div>
    </div>
<script src="__PUBLIC__/admin/js/echarts.min.js"></script>
<!-- <script src="__PUBLIC__/admin/js/echarts-all.js"></script> -->
<script>document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <script type="text/javascript">	
	    // id为ech06的图
        var myChart = echarts.init(document.getElementById('ech06'));
	    var days = [{$data['days']}];
	    var addusersData = [{$data['addUsers']}];
	    var delusersData = [{$data['delUsers']}];
	    var phoneusersData = [{$data['phoneUsers']}];
	    var oldUsersTophoneData = [{$data['oldUsersTophone']}];
	    var year    = '{$Think.get.year}';
	    var month   = parseInt('{$Think.get.month}');
	    var findday = parseInt('{$Think.get.day}');
	    if(year && month && findday){
		    var days = [
		                '00:00-01:00','01:00-02:00','02:00-03:00','03:00-04:00','04:00-05:00','05:00-06:00','06:00-07:00','07:00-08:00','08:00-09:00','09:00-10:00','10:00-11:00','11:00-12:00',
		                '12:00-13:00','13:00-14:00','14:00-15:00','15:00-16:00','16:00-17:00','17:00-18:00','18:00-19:00','19:00-20:00','20:00-21:00','21:00-22:00','22:00-23:00','23:00-23:59'
		                ];
	    }else if(year && month>=1){
	    	var days = [{$data.days}];
	    }else if(year){
	    	var days = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
	    }
    	var phoneusersData = [{$data.phoneUsersAll}];
    	var addusersData = [{$data.addUsersAll}];
    	var delusersData = [{$data.delUsersAll}];
    	var netGrowthAddUsersData = [{$data.netGrowthAddUsersAll}];
	    // 总天数或总约束或总年数
	 
		option = {
			tooltip: {
				trigger: 'axis'
			}, toolbox: {
		        show : true,
		        feature : {
		            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
			grid: {
				left: '3%',
				right: '4%',
				bottom: '8%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: days,
			},
			yAxis: {
				type: 'value'
			},
			series: [ {
				name: '{$dayTip}净增',
				type: 'line',
				stack: '总量',
				data: netGrowthAddUsersData
			},{
				name: '{$dayTip}新增',
				type: 'line',
				stack: '总量',
				data: addusersData
			}, {
				name: '{$dayTip}跑路',
				type: 'line',
				stack: '总量',
				data: delusersData
			}]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

		// id为ech07的图
        var myChart = echarts.init(document.getElementById('ech07'));
		option = {
			tooltip: {
				trigger: 'axis'
			},
			 toolbox: {
			        show : true,
			        feature : {
			            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			grid: {
				left: '3%',
				right: '4%',
				bottom: '8%',
				containLabel: true
			},

			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: days,
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				name: '{$dayTip}新增粉丝',
				type: 'line',
				stack: '总量',
				data: phoneusersData
			}]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		// id为ech08的图

layui.use('form', function(){
  var form = layui.form;
  // 计算天数
  function getDaysInOneMonth(year, month){  
	  month = parseInt(month, 10);  
	  var d= new Date(year, month, 0);  
	  return d.getDate();  
	}  

  function getDaysHtml(day){
  	var year  = $("select[name=year]").val();
  	var month = $("select[name=month]").val();
  	if(month>0){
	    	var len = getDaysInOneMonth(year,month)+1;
	    	var html = '<option value="0">全月</option>';
	    	var day = day?day:'';
	    	for(var i=1;i<len;i++){
	    	   if(day && day==i){
					html += '<option value='+i+' selected>'+i+'日</option>';
	    	   }else{
					html += '<option value='+i+' >'+i+'日</option>';
	    	   }
	    	}
	    	$("select[name=day]").html(html);
	    	form.render();
  	}
  }
  //事件监听
  form.on('select(month)', function(data){
	  var month = $("select[name=month]").val();
	  if(month>0){
		  getDaysHtml();
	  }
	  return false;
  })
  form.on('select(year)', function(data){
	  var year = $("select[name=year]").val();
	  if(year>0){
		  getDaysHtml();
		  $("select[name=month]").val(0);
		  form.render();
	  }
	  return false;
  })
  
  var day = "{$Think.get.day}";
  var month = $("select[name=month]").val();
  if(day || month){
	  getDaysHtml(day);
  }
  
 
});
</script>
</body>
</html>