<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>api排行榜</li>
            </ul>
            <h4>api排行榜</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<style>
    .degrade-page {
        padding: 20px;
    }

    .server-in-use,
    .connect-err .server-name,
    .connect-err .fa {
        font-size: 24px;
        color: #a94442;
    }

    .ip-port-modify-btn {
        color: #999;
        text-decoration: underline;
        cursor: pointer;
        margin-left: 10px;
    }

    .degrade-tab li {
        cursor: pointer;
    }

    .pc-degrade,
    .wap-degrade {
        list-style: none;
        padding: 20px;
    }

    .err-tip {
        color: #a94442;
    }


    .config-panel .server-port {
        width: 100px;
    }

    .config-panel .form-inline {
        padding: 20px 0;
        border-bottom: 1px solid #d9edf7;
    }

    .form-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>
<div class="degrade-page">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="form-inline inline-block form-item">
                <label for="appName" class="control-label">应用</label>
                <select id="selectedApp" class="form-control" >
                    <option value="">全部</option>
                    {{#each app}}
                        <option value="{{this}}">{{this}}</option>
                    {{/each}}
                </select>
            </div>

            <div class="form-inline inline-block form-item">
                <label for="appName" class="control-label">时间</label>
                <div id="reportrange" style="display: inline-block; background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc; width: 210px; color: black;">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                    <span></span> <b class="caret"></b>
                </div>
            </div>

            <div class="form-inline inline-block">
                <button id="search" class="btn btn-info" style="margin-left: 20px;">查询</button>
            </div>

            <div class="form-inline inline-block">
                <button id="clear" class="btn btn-info" style="margin-left: 20px;">清除</button>
            </div>
        </div>
        <div class="panel-body">
            <div class="row route-data">
                <div class="col-md-6 config-panel" data-type="slow">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            最慢降序
                        </div>
                        <div class="panel-body">

                            <table class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <td>
                                        路由
                                    </td>
                                    <td>
                                        时间 (ms)
                                    </td>
                                </tr>

                                </thead>

                                <tbody>

                                {{#each time}}
                                    <tr>
                                        <td>
                                            {{route}}
                                        </td>

                                        <td>
                                            {{avg}}
                                        </td>

                                    </tr>
                                {{/each}}

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 config-panel" data-type="count">
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            调用次数
                        </div>
                        <div class="panel-body">

                            <table class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <td>
                                        路由
                                    </td>
                                    <td>
                                        调用次数
                                    </td>
                                </tr>

                                </thead>

                                <tbody>

                                {{#each count}}
                                    <tr>
                                        <td>
                                            {{route}}
                                        </td>

                                        <td>
                                            {{count}}
                                        </td>

                                    </tr>
                                {{/each}}

                                </tbody>

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

<script>

    var query = {
        app: '',
        time: ''
    };

    function qs(obj) {
        return Object.keys(obj).map(key  => {
            return `${key}=${encodeURIComponent(obj[key])}`;
        }).join('&')
    }

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

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

    function initDatePicker() {
        var first = '无';

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

        lastTime = TIME[first];

        function cb(start, end, label) {
            if (label && label !== '自定义日期') {
                $('#reportrange span').html(label);

                var lastTime = TIME[label];
                var selectedStartTime = moment().subtract(...lastTime).unix();
                var selectedEndTime = moment().unix();

                query.time = `${selectedStartTime}:${selectedEndTime}`;
            } else if (label && label === '自定义日期'){
                $('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));

                var selectedStartTime = start.format('YYYY-MM-DD').unix();
                var selectedEndTime = end.format('YYYY-MM-DD').unix();

                query.time = `${selectedStartTime}:${selectedEndTime}`;
            }

        }

        $('#reportrange').daterangepicker({
            startDate: undefined,
            endDate: undefined,
            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);

        $('#reportrange').on('cancel.daterangepicker', function() {
            $('#reportrange').data('daterangepicker').setStartDate(undefined);
            $('#reportrange').data('daterangepicker').setEndDate(undefined);
            $('#reportrange span').html(first);
        });
    }

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

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

        $('#clear').on('click', () => {
            clearSelect();
        })
    }

    function clearSelect() {
        $('#selectedApp').val('');
        $('#reportrange').trigger('cancel.daterangepicker');

        query = {
            app: '',
            time: '',
        };
    }

    function _handleChanged() {
        $.post(`/profile/sort_api_list?${qs(query)}`).then(result => {
            $('.route-data').replaceWith(result);
        });
    }
</script>