@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>
    <table class="table table-hover mt-20">
        <thead>
            <tr>
				<th width="100" class="text-center">
                    序号
                </th>
                <th>时间</th>
                <th>浏览量PV</th>
                <th>访客量UV</th>
				<th>新访量百分比</th>
            </tr>
        </thead>
        <tbody>
			<template v-if="lodding">
				<tr class="laodding">
					<td colspan="2" class="text-center">
						<img src="{{ asset('data/assets/images/load.gif') }}">&nbsp;数据正在加载中...
					</td>
				</tr>
			</template>
			<template v-if="content.length > 0">
				<tr v-for='(item, index) in content'>
					<td align="center">@{{ index + 1 }}</td>
					<td>@{{ item.key }}</td>
					<td>@{{ item.pv }}</td>
					<td>@{{ item.uv }}</td>
					<td>
						<span v-if="item.pv == 0">0%</span>
						<span v-else>@{{ Math.round((item.uv/item.pv).toFixed(2)*100) }}%</span>
					</td>
				</tr>
			</template>
			<template v-else>
				<tr>
					<td class="len-full text-center" colspan="7">
						<div class="alert alert-danger" role="alert">
							<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
							<span class="sr-only">Error:</span>
							暂无排名数据显示！
						</div>
					</td>
				</tr>
			</template>
        </tbody>
    </table>
	<h2 class="statistic-title">总的地域分布</h2>
	<div id="region" class="mt-20" style="height:500px;"></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,
		dataSource: {},
		options: {},
		content: {},
		reigon: {},
		myChart: '',
		regionChart: '',
		external: '',
		lodding: true,
		isActive: 3,
		timeText: ['今日', '昨天', '最近7天', '最近30天'],
	},
	mounted: function() {
		var that = this;
		this.myChart     = echarts.init(document.getElementById('main'));
		this.regionChart = echarts.init(document.getElementById('region'));
		this.myChart.showLoading();
		this.regionChart.showLoading();
		this.load(month, today);
		this.loadVist(month, today);
		this.loadReigon();
		window.onresize = function sizes() {
            that.myChart.resize();
            that.regionChart.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;
				}
			});
		},
		loadVist: function(startTime, endTime) {
			var _this = this;
			$.ajax({
				type: "GET",
				url: "{{ config('setting.api_url') }}" + "/visitByDay",
				data: {"si": si, "fromDate": startTime, "toDate": endTime},
				success: function(json) {
					_this.lodding = false;
					_this.content = json;
				}
			});
		},
		loadReigon: function(startTime, endTime) {
			var _this = this;
			$.ajax({
				type: "GET",
				url: "{{ config('setting.api_url') }}" + "/country",
				data: {"si": si},
				success: function(json) {
					_this.optionRegion(json);
				}
			});
		},
		change: function(index) {
			this.isActive = index;
			switch (index) {
				case 0:
					this.fromDate = today;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					this.loadVist(this.fromDate, this.toDate);
					break;
				case 1:
					this.fromDate = yesterday;
					this.toDate   = yesterday;
					this.load(this.fromDate, this.toDate);
					this.loadVist(this.fromDate, this.toDate);
					break;
				case 2:
					this.fromDate = sevenday;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					this.loadVist(this.fromDate, this.toDate);
					break;
				case 3:
					this.fromDate = month;
					this.toDate   = today;
					this.load(this.fromDate, this.toDate);
					this.loadVist(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: '1%',
					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,
						areaStyle: {normal: {
							color: "#1890ff",
						}},
						itemStyle: {normal: {
							color: "#1890ff",
						}},
						data: this.contact(json, 'doc_count')
					}
				]
			};
			this.myChart.hideLoading();
			this.myChart.setOption(this.options);
		},
		optionRegion: function(json) {
			this.reigon = {
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				toolbox: {
					right: '1%',
					feature: {
						dataView: {show: true, readOnly: false},
						magicType: {show: true, type: ['line', 'bar']},
						restore: {show: true},
						saveAsImage: {show: true}
					}
				},
				legend: {
					data: ['浏览量PV','访问量UV']
				},
				grid: {
					left: '1.5%',
					right: '2%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : this.contact(json, 'key'),
						axisPointer: {
							type: 'shadow'
						}
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'浏览量PV',
						type:'bar',
						itemStyle: {normal: {
							color: "#c23531",
						}},
						data: this.contact(json, 'pv')
					},
					{
						name:'访问量UV',
						type:'bar',
						itemStyle: {normal: {
							color: "#f90",
						}},
						data: this.contact(json, 'uv')
					}
				]
			};
			this.regionChart.hideLoading();
			this.regionChart.setOption(this.reigon);
		},

	}
});

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


</script>
@endsection
