<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="">性能监控</a></li>
                <li>客户端调用时间统计</li>
            </ul>
            <h4>客户端调用时间统计</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel page-servers">
    <div class="panel panel-primary-head">
        <div class="panel-heading" style="overflow: hidden">

            <div class="pull-left">
                <select id="selectedServer" class="selectpicker show-menu-arrow form-control" style="margin-left: 10px;">
                    <option value="aws" selected>aws</option>
                    <option value="qcloud">qcloud</option>
                </select>
            </div>

            <div id="reportrange" class="pull-left"
                 style="display: inline-block; background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc; width: 250px; color: black; margin-left: 20px;">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                <span></span> <b class="caret"></b>
            </div>

            <div class="pull-left">
                <select id="selectedApp" class="selectpicker show-menu-arrow form-control" style="margin-left: 10px;">
                    <option value="default">全部</option>
                    <option value="pc">PC</option>
                    <option value="h5">H5</option>
                </select>
            </div>

            <div class="pull-left">
                <button id="search" class="btn btn-info" style="margin-left: 20px;">查询</button>
            </div>
        </div>
        <!-- panel-heading -->

        <table id="table-servers" class="table table-striped table-bordered">
            <thead class="">
            <tr>
                <td >接口名称</td>
                <td >调用次数</td>
                <td >耗时</td>
                <td >load</td>
                <td >firstscreen</td>
                <td >DOMContentLoaded</td>
                <td >详细情况</td>
            </thead>

            <tbody>
            </tbody>
        </table>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="display:table;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">详细信息</h4>
                </div>
                <div class="modal-body">
                    <table id="table-detail" class="table table-striped table-bordered">
                        <thead class="">
                        <tr>
                            <td >time</td>
                            <td >app</td>
                            <td >route</td>
                            <td >type</td>
                            <td >duration</td>
                            <td >reqID</td>
                            <td >udid</td>
                            <td >uid</td>
                            <td >useragent</td>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- panel -->
</div>


<script>
    var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime;
    var data_end_point = '/profile/client.json';
    var dataTable = null, detailTable = null;

    function ajaxUrl() {
        let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;

        if (selectedEndTime && selectedEndTime) {
            url += `&start=${selectedStarTime}&end=${selectedEndTime}`;
        }

        if (lastTime) {
            url += `&lastTime=${lastTime}`
        }

        return url
    }

    $(function() {
        init();
        initTable();
        initDatePicker();
        initSelect();
    });

    function init() {
        selectedServer = 'aws';
        selectedApp = 'default';
    }

    function initTable() {
        dataTable = $("#table-servers").DataTable({
            pageLength: 20,
            retrieve: true,
            searching: true,
            dataSrc: 'data',
            pageLength: 25,
            columns: [
                {data: 'route'},
                {data: 'count'},
                {data: 'mean'},
                {data: 'load'},
                {data: 'firstscreen'},
                {data: 'DOMContentLoaded'},
                {data: 'detail'}
            ],
            data: [{
                route: '',
                count: 0,
                mean: 0,
                load: 0,
                firstscreen: 0,
                DOMContentLoaded: 0,
                detail: ''
            }],
            order: [[ 2, "desc" ]],
            columnDefs: [ {
                targets: -1,
                data: null,
                render: function ( data, type, row ) {
                    return '<button  data-toggle="modal" data-target="#myModal">查看</button>';
                },
            }]
        });

        $('#table-servers tbody').on( 'click', 'button', function (e) {
            var data = dataTable.row($(this).parents('tr')).data();

            var modal = $('#myModal');

            modal.on('show.bs.modal', function () {
                detailTable.clear().rows.add(data.detail).draw();
            });

            e.preventDefault();
        });

        detailTable = $("#table-detail").DataTable({
            pageLength: 20,
            retrieve: true,
            searching: true,
            dataSrc: 'data',
            pageLength: 25,
            columns: [
                {data: 'time'},
                {data: 'app'},
                {data: 'route'},
                {data: 'type'},
                {data: 'duration'},
                {data: 'reqID'},
                {data: 'udid'},
                {data: 'uid'},
                {data: 'useragent'}
            ],
            data: [{
                time: '',
                app: '',
                duration: '',
                reqID: '',
                route: '',
                type: '',
                udid: '',
                uid: '',
                useragent: ''
            }],
            order: [[ 0, "desc" ]],
            columnDefs: [
                {
                    render: function(data, type, row) {
                        return moment(data).format('YYYY/MM/DD HH:MM:ss');
                    },
                    targets: 0
                }
            ],
        });
    }

    const TIME = {
        '最近1分钟': '1m',
        '最近30分钟':  '30m',
        '最近1小时': '1h',
        '最近3小时': '3h',
        '最近6小时': '6h',
        '最近12小时': '12h'
    };

    function initDatePicker() {
        var start = selectedStarTime;
        var end = selectedEndTime;
        var first = '最近1分钟';

        $('#reportrange span').html(first);

        lastTime = TIME[first];

        function cb(start, end, label) {
            if (label && label !== '自定义日期') {
                $('#reportrange span').html(label);
                lastTime = TIME[label];
            } else if (label && label === '自定义日期'){
                $('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
                selectedStarTime = start.format('YYYY-MM-DD');
                selectedEndTime = end.format('YYYY-MM-DD');
                lastTime = null
            }

        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            timePicker: true,
            timePicker24Hour: true,
            dateLimit: {
                days: 7
            },
            ranges: {
                '最近1分钟': [moment().subtract(1, 'minutes'), moment()],
                '最近30分钟': [moment().subtract(30, 'minutes'), moment()],
                '最近1小时': [moment().subtract(1, 'hours'), moment()],
                '最近3小时': [moment().subtract(3, 'hours'), moment()],
                '最近6小时': [moment().subtract(6, 'hours'), moment()],
                '最近12小时': [moment().subtract(12, 'hours'), moment()]
            },
            locale: {
                format: "YYYY-MM-DD",
                applyLabel: '确定',
                cancelLabel: '取消',
                weekLabel: 'W',
                customRangeLabel: '自定义日期',
                daysOfWeek: '一_二_三_四_五_六_日'.split('_'),
                monthNames: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
                firstDay: 1
            },
        }, cb);

        cb(start, end);
    }

    function initSelect() {
        $('#selectedServer').change(function() {
            selectedServer = $('#selectedServer').val();
        });

        $('#selectedApp').change(function() {
            selectedApp = $('#selectedApp').val();
        });

        $('#search').on('click', () => {
            _handleChanged();
        })
    }

    function _handleChanged() {
        dataTable && dataTable.ajax.url(ajaxUrl()).load();
    }

</script>