<%@ 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>

<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />

<div class="row">
    <div class="col-xs-12">
        <table id="grid-table"></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>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->

<script type="text/javascript">
    var myGrid = null;
    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() {
        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/ssdb/gendan/getKefuUser",
                type:"POST",
                datatype : "json",
                height : 450,
                colNames : ['', 'ID', '用户名','姓名', '性别', '邮箱', '联系电话', '生日', '所属部门', '角色', '是否禁用', '最后登录时间'],
                colModel : [ {
                    name : '',
                    index : '',
                    width : 80,
                    fixed : true,
                    sortable : false,
                    resize : false,
                    formatter : 'actions',
                    formatoptions : {
                        keys : true,
                        //delbutton : false,//disable delete button
                        delOptions : {
                            recreateForm : true,
                            beforeShowForm : beforeDeleteCallback
                        }
                        //editformbutton:true, editOptions:{recreateForm:true, beforeShowForm:beforeEditCallback}
                    }
                }, {
                    name : 'id',
                    index : 'id',
                    label : 'ID',
                    width : 60,
                    sorttype : "long",
                    search : false
                }, {
                    name : 'userName',
                    index : 'userName',
                    label : '用户名',
                    width : 100,
                    editable : true,
                    editoptions : {size : "20", maxlength : "50"},
                    searchoptions : {sopt : ['cn']},
                    editrules : {required : true}
                }, {
                    name : 'realName',
                    index : 'realName',
                    label : '姓名',
                    width : 100,
                    editable : true,
                    editoptions : {size : "20", maxlength : "50"},
                    searchoptions : {sopt : ['cn']},
                    editrules : {required : true}
                }, {
                    name : 'sexCn',
                    index : 'sex',
                    label : '性别',
                    width : 80,
                    editable : true,
                    edittype : "select",
                    editoptions : {value : "1:男;2:女"},
                    search : false
                }, {
                    name : 'email',
                    index : 'email',
                    label : '邮箱',
                    width : 160,
                    editable : true,
                    editoptions : {size : "20", maxlength : "30"},
                    searchoptions : {sopt : ['eq']},
                    editrules : {required : true}
                }, {
                    name : 'phone',
                    index : 'phone',
                    label : '联系电话',
                    width : 110,
                    editable : true,
                    editoptions : {size : "20", maxlength : "20"},
                    search : false
                }, {
                    name : 'birthday',
                    index : 'birthday',
                    label : '生日',
                    width : 110,
                    editable : true,
                    readonly : true,
                    search : false,
                    sorttype : 'date',
                    unformat : pickDate
                }, {
                    name : 'departmentValue',
                    index : 'departmentKey',
                    label : '所属部门',
                    width : 120,
                    editable : true,
                    edittype : "select",
                    editoptions : {value : "KFB-Z:保险科技部"},
                    search : false
                }, {
                    name : 'roleCn',
                    index : 'role',
                    label : '角色',
                    width : 100,
                    editable : true,
                    edittype : "select",
                    editoptions : {value :
                            "KEFU-Z:客服子账号" },
                    search : false
                }, {
                    name : 'statusCn',
                    index : 'status',
                    label : '是否禁用',
                    width : 80,
                    editable : true,
                    edittype : "checkbox",
                    editoptions : {value : "是:否"},
                    unformat : aceSwitch,
                    search : false
                }, {
                    name : 'lastLoginTime',
                    index : 'lastLoginTime',
                    label : '最后登录时间',
                    width : 150,
                    sorttype : "date",
                    search : false
                } ],
                //scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                sortname : "id",
                sortorder : "asc",
                viewrecords : true,
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : pager_selector,
                altRows : true,
                //toppager : true,
                multiselect : true,
                //multikey : "ctrlKey",
                multiboxonly : true,
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl : "${contextPath}/sys/sysuser/operateSysUser"
                //caption : "用户管理列表",
                //autowidth : true,
                /**
                 grouping : true,
                 groupingView : {
        				 groupField : ['name'],
        				 groupDataSorted : true,
        				 plusicon : 'fa fa-chevron-down bigger-110',
        				 minusicon : 'fa fa-chevron-up bigger-110'
        			},
                 */
            });

            // navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector, { // navbar options
                edit : <shiro:hasPermission name="${ROLE_KEY}:sysuser:edit">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:sysuser:edit">false</shiro:lacksPermission>,
                editicon : 'ace-icon fa fa-pencil blue',
                add : <shiro:hasPermission name="${ROLE_KEY}:sysuser:add">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:sysuser:add">false</shiro:lacksPermission>,
                addicon : 'ace-icon fa fa-plus-circle purple',
                del : <shiro:hasPermission name="${ROLE_KEY}:sysuser:delete">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:sysuser:delete">false</shiro:lacksPermission>,
                delicon : 'ace-icon fa fa-trash-o red',
                search : <shiro:hasPermission name="${ROLE_KEY}:sysuser:search">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:sysuser: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}:sysuser:view">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:sysuser: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) {
                // enable datepicker on "birthday" field and switches for "stock" field
                form.find('input[name=birthday]').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    language: 'zh-CN'
                });
            }
            function aceSwitch(cellvalue, options, cell) {
                setTimeout(function() {
                    $(cell).find('input[type=checkbox]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                }, 0);
            }
            function pickDate(cellvalue, options, cell) {
                setTimeout(function() {
                    $(cell).find('input[type=text]').datepicker({
                        format : 'yyyy-mm-dd',
                        autoclose : true,
                        language: 'zh-CN'
                    });
                }, 0);
            }
            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 beforeDeleteCallback(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);
            }

            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'
                });
            };

        });
    });


</script>