@{
    ViewData["Title"] = "平台账单流水";
    Layout = "~/Pages/Shared/_MainLayout.cshtml";
    ViewBag.Nav = new string[] { "销售平台流水", ViewBag.platform+"账单流水" };
}


<div class="row">
    <div class="col-sm-12">
        <div class="ibox-content m-b-sm border-bottom">
            <form id="toolbar">
                <div class="form-inline" style="line-height:40px;">
                    <div class="form-group">
                        @*<label>站点</label>
                        <select id="website" name="website" class="form-control" style="width:130px;">
                            <option value="">请选择站点</option>
                            @foreach (var item in ViewBag.sites)
                            {
                                <option value="@item">@item</option>
                                <button class="btn btn-info" type="button" aria-pressed="false"></button>
                            }
                        </select>*@
                        站点：
                        <div data-toggle="buttons-checkbox" class="btn-group">
                            @foreach (var item in ViewBag.sites)
                            {
                                //<option value="@item">@item</option>
                                <button class="btn btn-info wsites" type="button" aria-pressed="false" onclick="selWebsite('@item',this)">@item</button>
                            }
                        </div>
                    </div>
                    <div class="form-group" style="margin-left:10px">
                        <label>月份</label>
                        <input id="month" name="month" class="form-control" style="width:100px" value="@(DateTime.Now.AddMonths(-1).ToString("yyyy-MM"))" />
                    </div>
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <button type="button" class="btn btn-primary" onclick="list();"><i class="fa fa-search"></i>&nbsp;查询</button>
                        <button id="btnexport" style="" type="button" class="btn btn-success" onclick="ExportCSV()">导出</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="ibox-content m-b-sm border-bottom table-responsive">
            <table id="roletable" class="table table-hover table-bordered table-striped" style="table-layout:fixed;">
                <thead id="tb_head">

                </thead>
                <tbody id="tb">
                </tbody>
            </table>
            <div id="page-contain">
                <span id="pageresult"></span>
                <div id="pagination" class="pagination" style="margin-left:50px;"></div>
            </div>
        </div>

    </div>
</div>

@section css{ 
    <style>
        .mules {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /*.pagination ul{
            list-style-type:none;
            padding:0px;
            margin:0px;
        }

        .pagination ul li{float:left;width:20px;}
*/
        .pagination {
            margin: 20px 0;
        }

        .pagination ul {
            display: inline-block;
            *display: inline;
            margin-bottom: 0;
            margin-left: 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            *zoom: 1;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            padding-left:0px;
        }

        .pagination ul > li {
            display: inline;
        }

            .pagination ul > li > a,
            .pagination ul > li > span {
                float: left;
                padding: 4px 12px;
                line-height: 20px;
                text-decoration: none;
                background-color: #ffffff;
                border: 1px solid #dddddd;
                border-left-width: 0;
            }

                .pagination ul > li > a:hover,
                .pagination ul > li > a:focus,
                .pagination ul > .active > a,
                .pagination ul > .active > span {
                    background-color: #f5f5f5;
                }

        .pagination ul > .active > a,
        .pagination ul > .active > span {
            color: #999999;
            cursor: default;
        }

        .pagination ul > .disabled > span,
        .pagination ul > .disabled > a,
        .pagination ul > .disabled > a:hover,
        .pagination ul > .disabled > a:focus {
            color: #999999;
            cursor: default;
            background-color: transparent;
        }

        .pagination ul > li:first-child > a,
        .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -moz-border-radius-topleft: 4px;
        }

        .pagination ul > li:last-child > a,
        .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px;
        }

        .pagination-centered {
            text-align: center;
        }

        .pagination-right {
            text-align: right;
        }

    </style>
}

@section scripts{
    <script src="~/js/jspagination/bootstrap-paginator.js"></script>
    <script type="text/javascript">
        var tb;
        var current_page = 1;
        var website = '';

        $(document).ready(function () {
            //list();

            laydate.render({ elem: '#month', type: 'month' });
        })

        function list() {
            //var website = $('#website').val();
            var month = $('#month').val();

            if (website == '') {
                alert('请选择站点');
                return false;
            }

            if (month == '') {
                alert('请选择月份');
                return false;
            }

            var load_index = layer.load();
            $.submit({
                url: '@Url.Content("~/DataWareHouse/PlatformOrder/OrderBillingsJson")',
                type:'POST',
                paramData: 'page=' + current_page + '&platform=@(ViewBag.platform)&website=' + website + '&month=' + month,
                func: function (result) {
                    layer.close(load_index)
                    $('#tb').html('');
                    if (result.success) {
                        //表头
                        if (result.total == 0) {
                            alert('没有找到该平台数据，请上传');
                            return false;
                        }
                        var firstrow = result.rows[0].jsondata;
                        var _head = '<tr>';
                        for (var i in firstrow) {
                            _head += '<th style="width:130px;">' + '<div class="mules" title="' + i + '">' + i + '</div>'+'</th>';
                        }
                        _head += '</tr>';
                        $('#tb_head').html(_head);

                        //内容
                        for (var i in result.rows) {
                            var _obj = result.rows[i].jsondata;

                            var _r = '<tr>';
                            for (var r in _obj) {
                                _r += '<td style="width:130px;">' + '<div class="mules" title="' + _obj[r] + '">' + _obj[r] + '</div>' +'</td>';
                            }
                            _r += '</tr>';

                            $('#tb').append(_r);
                        }

                        //分页
                        InitPage(result.totalpage);

                        $('#pageresult').html('总记录数：' + result.total + '；总页数：' + result.totalpage);

                    }
                    else {
                        alert('获取数据出现异常')
                    }
                }
            })
        }

        function selWebsite(site,data) {
            website = site;

            $('.wsites').each(function () {
                $(this).attr('aria-pressed', 'false');
                $(this).removeClass('active');
            })

            $(data).prop('aria-pressed', 'true');
        }

        function InitPage(totalpage) {

            $('#page-contain').html('<span id="pageresult"></span><div id="pagination" class="pagination" style="margin-left:5px;"></div>');

            var container = $('#pagination');

            options = {
                containerClass: "pagination"
                , currentPage: current_page
                //, numberOfPages: 6
                , totalPages: totalpage
                , pageUrl: function (type, page) {
                    //return null;
                }
                , onPageClicked: function (e, originalEvent, type, page) {

                    current_page = page;
                    list();
                }
                , onPageChanged: function (page) {

                }


            };

            container.bootstrapPaginator(options);

        }

        function ExportCSV() {
            //var website = $('#website').val();
            var month = $('#month').val();

            if (website == '') {
                alert('请选择站点');
                return false;
            }

            if (month == '') {
                alert('请选择月份');
                return false;
            }

            window.open('@Url.Content("~/DataWareHouse/PlatformOrder/ExportOrderBillings")' + '?platform=@(ViewBag.platform)&website=' + website + '&month=' + month);
        }

    </script>
}