<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<% String a =request.getParameter("aaa");%>
<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />
<div class="row">
    <div class="col-xs-12">
        <table id="grid-table">
            开通时间:
            <input type="text" class="input-sm" placeholder="开始时间" id="openingTime"/>
            <input type="text" class="input-sm" placeholder="结束时间" id="closingTime"/>
            保证金:
            <select id='deposit'>
                <option selected value="">请选择保证金</option>
                <option value="0">0</option>
                <option value="1">1000</option>
                <option value="2">3000</option>
                <option value="3">5000</option>
            </select>
            保证金状态:
            <select id='depositStatus'>
                <option selected value="">请选择保证金状态</option>
                <option value="0">已缴纳</option>
                <option value="1">待补交</option>
                <option value="2">退保证金申请中</option>
                <option value="3">已退保证金</option>
                <option value="4">未付保证金</option>
            </select>
            身份:
            <select id='identity'>
                <option selected value="">请选择身份</option>
                <option value="0">诚信保</option>
                <option value="1">体验诚信保</option>
            </select>
            关键字:<input id="keyword" class="input-medium search-query" type="text" placeholder="请输入手机号或律师名" />
            <button id="searchd" type="button" class="btn" >搜索</button>
        </table>
        <div id="grid-pager"></div>
        <script type="text/javascript">
            var $path_base = "${contextPath}/static";//in Ace demo this will be used for editurl parameter
        </script>
    </div>
</div>
<script type="text/javascript">
    var scripts = [ null,  "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js", "${contextPath}/static/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js", "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", null ]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
        // inline scripts related to this page
        jQuery(function($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            // resize to fit page size
            $(window).on('resize.jqGrid', function() {
                $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
            })
            // resize on sidebar collapse/expand
            var parent_column = $(grid_selector).closest('[class*="col-"]');
            $(document).on('settings.ace.jqGrid', function(ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    // setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function() {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 0);
                }
            });

            $(document).keydown(function(event) {
                var key = window.event ? event.keyCode : event.which;
                if (key == 13) {
                    $("#searchd").click();
                }
            });
            var myGrid=	jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/adv/order/advOrderCXB",
                datatype : "json",
                height : '99%',
                colNames : ["开通日期", "过期时间", "律师名称", "律师手机", "律师身份", "是否为认证律师","支付年费",
                    "保证金","保证金状态"],
                colModel : [{
                    name : "openingDate",
                    index : "openingDate",
                    label : "开通日期",
                    sorttype : "date",
                    width : 150,
                    search : false
                }, {
                    name : "endTime",//contactIdentity
                    index : "endTime",
                    label : "过期时间",
                    sorttype : "date",
                    width : 150,
                    editable : false
                }, {
                    name : "realName",// author
                    index : "realName",
                    label : "律师名称",
                    width : 150,
                    editable : false
                }, {
                    name : "mobile",
                    index : "mobile",
                    label : "律师手机",
                    width : 150,
                    editable : false
                }, {
                    name : "identity",
                    index : "identity",
                    label : "律师身份",
                    width : 150,
                    editable : false
                }, {
                    name : "certifiedAttorney",
                    index : "certifiedAttorney",
                    label : "是否为认证律师",
                    width : 150,
                    editable : false
                }, {
                    name : "payAnnualFee",
                    index : "payAnnualFee",
                    label : "支付年费",
                    width : 150,
                    search : false
                }, {
                    name : "margin",
                    index : "margin",
                    label : "保证金",
                    width : 150,
                    search : false
                }, {
                    name : "marginStatus",
                    index : "marginStatus",
                    label : "保证金状态",
                    width : 150,
                    search : false
                }
                ],
                sortname : "openingDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 20,//定义初始行数
                rowList : [ 20, 50, 100 ],
                pager : pager_selector,
                altRows : true,
                //toppager : true,
                multiselect : true,
                //multikey : "ctrlKey",
                multiboxonly : true,
                mtype: 'POST',
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                //caption : "用户管理列表",
                //autowidth : true,
                /**
                 grouping : true,
                 groupingView : {
        				 groupField : ['name'],
        				 groupDataSorted : true,
        				 plusicon : 'fa fa-chevron-down bigger-110',
        				 minusicon : 'fa fa-chevron-up bigger-110'
        			},
                 */
            });
            $(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size
            function getDate(date) {
                var dates = date.split("-");
                var dateReturn = '';
                for(var i=0; i<dates.length; i++){
                    dateReturn+=dates[i];
                }
                return dateReturn;
            }
            $("#searchd").click(function () {
                var openingTime = $("#openingTime").val();
                var closingTime = $("#closingTime").val();
                if (openingTime != "" && closingTime != "") {
                    if ((getDate(closingTime) - getDate(openingTime)) < 0) {
                        alert("结束时间不能早于开始时间！");
                        return;
                    }
                }
                var deposit = $("#deposit").val();
                var depositStatus = $("#depositStatus").val();
                var identity = $("#identity").val();
                var keyword = encodeURI(encodeURI($("#keyword").val()));
                myGrid.setGridParam({
                    postData: {
                        openingTime: openingTime,
                        closingTime: closingTime,
                        deposit: deposit,
                        depositStatus: depositStatus,
                        identity: identity,
                        keyword: keyword,
                        page: 1
                    }, url: '${contextPath}/adv/order/advOrderCXB', page: 1
                }).trigger('reloadGrid');
            });
            // navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector, { // navbar options
                edit : <shiro:hasPermission name="${ROLE_KEY}:ordermanager:edit">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:ordermanager:edit">false</shiro:lacksPermission>,
                editicon : 'ace-icon fa fa-pencil blue',
                add : <shiro:hasPermission name="${ROLE_KEY}:ordermanager:add">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:ordermanager:add">false</shiro:lacksPermission>,
                addicon : 'ace-icon fa fa-plus-circle purple',
                del : <shiro:hasPermission name="${ROLE_KEY}:ordermanager:delete">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:ordermanager:delete">false</shiro:lacksPermission>,
                delicon : 'ace-icon fa fa-trash-o red',
                search : <shiro:hasPermission name="${ROLE_KEY}:ordermanager:search">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:ordermanager:search">false</shiro:lacksPermission>,
                searchicon : 'ace-icon fa fa-search orange',
                refresh : true,
                refreshicon : 'ace-icon fa fa-refresh blue',
                view : <shiro:hasPermission name="${ROLE_KEY}:ordermanager:view">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:ordermanager:view">false</shiro:lacksPermission>,
                viewicon : 'ace-icon fa fa-search-plus grey'
            }, {
                // edit record form
                // closeAfterEdit: true,
                // width: 700,
                recreateForm : true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                },
                errorTextFormat: function (response) {
                    var result = eval('('+response.responseText+')');
                    return result.message;
                }
            }, {
                // new record form
                // width: 700,
                closeAfterAdd : true,
                recreateForm : true,
                viewPagerButtons : false,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                },
                errorTextFormat: function (response) {
                    var result = eval('('+response.responseText+')');
                    return result.message;
                }
            }, {
                // delete record form
                recreateForm : true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    if (form.data('styled'))
                        return false;
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);
                },
                onClick : function(e) {
                    // alert(1);
                }
            }, {
                // search form
                recreateForm : true,
                afterShowSearch : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw : function() {
                    style_search_filters($(this));
                },
                multipleSearch : true
                /**
                 * multipleGroup:true, showQuery: true
                 */
            }, {
                // view record form
                recreateForm : true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            })

            function style_edit_form(form) {
                // form.find('input[name=statusCn]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                // don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                // .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

                // update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();// ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();// ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }
            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

            // replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement = {
                    'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement)
                        icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({
                    container : 'body'
                });
                $(table).find('.ui-pg-div').tooltip({
                    container : 'body'
                });
            }

            // var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

            $(document).one('ajaxloadstart.page', function(e) {
                $(grid_selector).jqGrid('GridUnload');
                $('.ui-jqdialog').remove();
            });
            $('#openingTime').datepicker({
                language: 'zh-CN',
                pickTime: false,
                todayBtn: true,
                autoclose: true,
                minView: '2',
                forceParse: false,
                format:"yyyy-mm-dd"
            });
            $('#closingTime').datepicker({
                language: 'zh-CN',
                pickTime: false,
                todayBtn: true,
                autoclose: true,
                minView: '2',
                forceParse: false,
                format:"yyyy-mm-dd"
            });
        });
    });
</script>
