<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 responsive">
            <thead class="">
            <tr>
                <th>时间</th>
                <th>应用</th>
                <th>类型</th>
                <td>接口名称</td>
                <td>请求路由</td>
                <td>耗时</td>
                <th>请求ID</th>
                <td>用户ID</td>
                <td>访客ID</td>
            </tr>
            </thead>

            <tbody>
            </tbody>
        </table>
    </div>
    <!-- panel -->
</div>


<script>
    var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime;
    var data_end_point = '/profile/time.json';
    var dataTable = 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';
        selectedStarTime = moment();
        selectedEndTime = moment().add(1, 'days');
        selectedApp = 'default';
    }

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

    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>