<%@ 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/ui.jqgrid.css" />

<div class="well well-sm">
   <input type="text" class="input-sm" placeholder="关键字" id="keyword"/>
   <button type="button" class="btn btn-purple btn-sm" id="searchd">
      <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
      查询
   </button>
</div>

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

<!-- page specific plugin scripts -->
<script type="text/javascript">
   var myGrid = null;

   var scripts = [ null, "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js",
                   "${contextPath}/static/js/fs/lawALGrid.js", "${contextPath}/static/js/fs/lawMoneyDetail.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();
            }
         });

         /*搜索框  主要对Jquery grid进行刷新 带参数刷新    */
         $("#searchd").click(function(){
            var keyword = encodeURI(encodeURI($("#keyword").val()));
            myGrid.setGridParam({data:'json',url : '${contextPath}/fs/report/getLawBalanceReport?keyword=' + keyword}).trigger('reloadGrid');
         });
         
          myGrid= jQuery(grid_selector).jqGrid({
            subGrid : true,
            url : "${contextPath}/fs/report/getLawBalanceReport",
            datatype : "json",
            height : '100%',
            width : 'auto',
            colNames : ['律师姓名', '身份证号','含税收入总额','代缴税费','个人所得税','已提现积分总额','剩余可提现含税总金额','代付总额','已提现代付总额','剩余代付金额', '备注'],
            colModel : [
            { name : 'name',
               index : 'name',
               width : 100,
               editable : false,
            },{   name : 'cardNo',
               index : 'cardNo',
               width : 140,
               search : false,   
               editable : false,
            },{   name : 'moneyPointsSum',
               index : 'moneyPointsSum',
               width : 120,
               editable : false
            },{   name : 'tax',
               index : 'tax',
               width : 120,
               sortable : false,
               editable : false
            },{
               name : 'gs',
               index : 'gs',
               width : 120,
               sortable : false,
               editable : false
            },{
               name : 'moneyPointsOut',
               index : 'moneyPointsOut',
               width : 120,
               sortable : false,
               editable : false
            },{
               name : 'moneyPoints',
               index : 'moneyPoints',
               width : 120,
               sortable : false,
               editable : true
            },{  name : 'moneySum',
                index : 'moneySum',
                width : 120,
                editable : false
             },{   name : 'moneyOut',
                index : 'moneyOut',
                width : 120,
                editable : false
             },{   name : 'money',
                index : 'money',
                width : 120,
                editable : false
             },{
               name : 'remark',
               index : 'remark',
               width : 100,
               sortable : false,
               editable : false
            }],
            sortname : "name",
            sortorder : "desc",
            viewrecords : true,
            rowNum : 10,
            rowList : [ 10, 20, 30,500,1000 ],
            pager : pager_selector,
            altRows : true,
            loadComplete : function() {
               var table = this;
               setTimeout(function(){
                  styleCheckbox(table);
                  updateActionIcons(table);
                  updatePagerIcons(table);
                  enableTooltips(table);
               }, 0);
            },
            subGridOptions : {
               plusicon : "ace-icon fa fa-plus blue",
               minusicon : "ace-icon fa fa-minus blue",
               openicon: "",
               expandOnLoad: false,
               selectOnExpand : false,
               reloadOnExpand : false
            },
            subGridRowExpanded: function(subgrid_id, row_id) {
               initSubgrid(subgrid_id, row_id, "${contextPath}");
            },
            subGridRowColapsed: function(subgrid_id, row_id) {
               
            }           
         });
          
         $(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size
         
         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);
         }
         
         // navButtons
         jQuery(grid_selector).jqGrid('navGrid', pager_selector,  { // navbar options
            edit : false,
            editicon : 'ace-icon fa fa-pencil blue',
            add : false,
            addicon : 'ace-icon fa fa-plus-circle purple',
            del : false,
            delicon : 'ace-icon fa fa-trash-o red',
            search : false,
            searchicon : 'ace-icon fa fa-search orange',
            refresh : true,
            refreshicon : 'ace-icon fa fa-refresh blue',
            view : false,
            viewicon : 'ace-icon fa fa-search-plus grey'
         }, {
            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;
            }
         })
         
         // add custom button to export the data to excel
         if(<shiro:hasPermission name="${ROLE_KEY}:lawBalance:export">true</shiro:hasPermission><shiro:lacksPermission name="${ROLE_KEY}:lawBalance:export">false</shiro:lacksPermission>){
            jQuery(grid_selector).jqGrid('navButtonAdd', pager_selector,{
               caption : "",
               title : "导出Excel",
               buttonicon : "ace-icon fa fa-file-excel-o green", 
               onClickButton : function () { 
                  var keys = [], ii = 0, rows = "";
                  var ids = $(grid_selector).getDataIDs(); // Get All IDs
                  var row = $(grid_selector).getRowData(ids[0]); // Get First row to get the labels
                  var label = $(grid_selector).jqGrid('getGridParam','colNames');
                  for(var k in label){
                     if(label[k].length > 0){
                              rows = rows + label[k] + "\t"; // output each Column as tab delimited
                     }
                  }
                   for (var k in row) {
                        keys[ii++] = k; // capture col names
                  }
                  rows = rows + "\n"; // Output header with end of line
                  var tIds = {"name":false,"cardNo":true,"mobile":true,"moneySum":true,"tax":true,"gs":true,"moneyOut":true,"money":true,"remark":false};
                  var v = null;
                  for (var i = 0; i < ids.length; i++) {
                        row = $(grid_selector).getRowData(ids[i]); // get each row
                        for (var j = 0; j < keys.length; j++){
                           v = row[keys[j]];
                           v = v.replace(/[\n\t]/g, "");
                           if(tIds[keys[j]]){
                                 rows = rows + '="' + v + '"\t'; // output each Row as tab delimited
                           }else{
                              rows = rows + v + '\t'; // output each Row as tab delimited   
                           } 
                        }
                        rows = rows + "\n"; // output each row with end of line
                  }
                  rows = rows + "\n"; // end of line at the end
                  var form = "<form name='csvexportform' action='${contextPath}/fs/report/getExcel?fileName=lawBalance' method='post'>";
                  form = form + "<input type='hidden' name='csvBuffer' value='" + encodeURIComponent(rows) + "'>";
                  form = form + "</form><script>document.csvexportform.submit();</sc" + "ript>";
                  OpenWindow = window.open('', '');
                  OpenWindow.document.write(form);
                  OpenWindow.document.close();
               } 
            });               
         }
         
         function style_edit_form(form) {
            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 beforeEditCallback(e) {
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_edit_form(form);
         }
         
         function styleCheckbox(table) {
         }
         
         function updateActionIcons(table) {
         }
         
         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'
            });
         }
         $(document).one('ajaxloadstart.page', function(e) {
            $(grid_selector).jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
         });
      });
   });
</script>