<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 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>
                <th>请求ID</th>
                <td>用户ID</td>
                <td>访客ID</td>
                <td>错误状态码</td>
                <td>错误信息</td>
                <td>出错文件</td>
                <td>行号</td>
                <td>列数</td>
                <td>错误堆栈</td>
            </tr>
            </thead>

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


<script>
    var selectedServer, selectedApp;
    var data_end_point = '/profile/error.json';
    var dataTable = null;

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

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

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

    function initTable() {
        dataTable = $("#table-servers").DataTable({
            pageLength: 20,
            serverSide: true,
            retrieve: true,
            searching: false,
            ajax: ajaxUrl(),
            dataSrc: 'data',
            pageLength: 25,
            columns: [
                {data: 'time'},
                {data: 'app'},
                {data: 'type'},
                {data: 'reqID'},
                {data: 'uid'},
                {data: 'udid'},
                {data: 'code', defaultContent: '无'},
                {data: 'message', defaultContent: '无'},
                {data: 'script', defaultContent: '无'},
                {data: 'line'},
                {data: 'column'},
                {data: 'stack', defaultContent: '无'}
            ],
            data: [{
                time: "",
                app: "",
                type: "",
                reqID: "",
                uid: "",
                udid: "",
                code: "",
                message: "",
                script: "",
                line: "",
                column: "",
                stack: ""
            }],
            columnDefs: [
                {
                    render: function(data, type, row) {
                        if (!data) {
                            return '';
                        }

                        return moment(data).format('YYYY/MM/DD HH:MM:ss');
                    },
                    targets: 0
                }
            ],
        });
    }

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

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

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

</script>