@extends('admin.master')

@section('style')
<link href="{{ asset('data/assets/css/bootstrap-datetimepicker.css') }}" rel="stylesheet">
@endsection

@section('top')
	<div class="top-breadcrumb">
        <h5>访问时间</h5>
    </div>
@endsection

@section('content')
	@include('admin.statistic.top')
	<h2 class="statistic-title">访客时间统计表（24小时）</h2>
    <ul class="statistic-list">
        <li class="col-sm-1" v-for='item in external'>
			<span class="statistic-time">@{{ item.key }}</span>
			<span class="statistic-text">@{{ item.doc_count }}</span>
		</li>
    </ul>
	<h2 class="statistic-title">访客抵达时间分布</h2>
	<div id="main" class="mt-20" style="height:400px;"></div>
@endsection

@section('foot')
<script src="{{ asset('data/assets/js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ asset('data/assets/js/echarts.min.js') }}"></script>
<script type="text/javascript">
var token = "{{ inject('setting')->config('apptoken') }}";
var si    = "{{ inject('setting')->config('appid') }}";
var today = "{{ date('Y-m-d') }}";
var yesterday = "{{ date('Y-m-d', strtotime('-1 day')) }}";
var sevenday  = "{{ date('Y-m-d', strtotime('-6 day')) }}";
var month     = "{{ date('Y-m-d', strtotime('-29 day')) }}";
var urlLoad   = "{{ config('setting.api_url') }}" + "/VisitByHour";

var visit = new Vue({
	el: '#main-view',
	data: {
		fromDate: month,
		toDate: today,
		options: {},
		myChart: '',
        external: '',
		isActive: 3,
		timeText: ['今日', '昨天', '最近7天', '最近30天'],
	},
	mounted: function() {
		var that = this;
		this.myChart = echarts.init(document.getElementById('main'));
        this.myChart.showLoading();
        this.load(month, today);
        window.onresize = function sizes() {
            that.myChart.resize();
        };
	},
	methods: {
		load: function(startTime, endTime) {
			var _this = this;
			$.ajax({
				type: "GET",
				url: urlLoad,
				data: {"si": si, "fromDate": startTime, "toDate": endTime},
				success: function(json) {
					_this.option(json);
                    _this.external = json;
				}
			});
		},
		change: function(index) {
			this.isActive = index;
			switch (index) {
				case 0:
					this.fromDate = today;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					break;
				case 1:
					this.fromDate = yesterday;
					this.toDate   = yesterday;
					this.load(this.fromDate, this.toDate);
					break;
				case 2:
					this.fromDate = sevenday;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					break;
				case 3:
					this.fromDate = month;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					break;		
			}
		},
		search: function() {
			this.fromDate = $('.datetimepicker-start').val();
			this.toDate   = $('.datetimepicker-end').val();
			this.load(this.fromDate, this.toDate);
		},
		contact: function(data, keys) {
			var arr = [];
			for ($i = 0; $i < data.length; $i++) {
				arr.push(data[$i][keys]);
			}
			return arr;
		},
		option: function(json) {
			this.options = {
				tooltip : {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#999'
						}
					}
				},
				legend: {
					data:['访客量']
				},
				toolbox: {
					right: '2%',
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '1.5%',
					right: '2%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : this.contact(json, 'key')
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'访客量',
						type:'line',
						stack: '总量',
						symbolSize: 6,
                        smooth: true,
						areaStyle: {normal: {
							color: "#91c7ae",
						}},
						itemStyle: {normal: {
							color: "#91c7ae",
						}},
						data: this.contact(json, 'doc_count')
					}
				]
			};
			this.myChart.hideLoading();
			this.myChart.setOption(this.options);
		},

	}
});

$('.datetimepicker-start').datetimepicker({
	language: 'zh-CN',
	autoclose: true,
	minView: 'month'
});
$('.datetimepicker-end').datetimepicker({
	language: 'zh-CN',
	autoclose: true,
	minView: 'month'
});


</script>
@endsection
