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

<style>
    .hr-line-dashed {
        background-color: #ffffff;
        border-top: 1px dashed #e7eaec;
        color: #ffffff;
        height: 1px;
        margin: 20px 0;
    }
    #modal-orderDetail{
        position: absolute;
        top: -70px;
        left: 300px;
    }
</style>

<div class="well well-sm">
    <input type="text" class="input-sm" placeholder="搜索关键字" id="keyword"/>
    <input type="text" class="input-sm" placeholder="开始时间" id="startDate"/>
    <input type="text" class="input-sm" placeholder="结束时间" id="endDate"/>
    <select class="select" id="orderState">
        <option value="" selected = "selected">状态</option>
        <option value="待接单">待接单</option>
        <option value="已取消">已取消</option>
        <option value="进行中">进行中</option>
        <option value="已确认">已确认</option>
        <option value="已完成">已完成</option>
        <option value="已过期">已过期</option>
    </select>
    <select class="select" id="isBackMoney">
        <option value="" selected = "selected">是否退款</option>
        <option value="0">是</option>
        <option value="1">否</option>
    </select>
    <select class="select" id="iscomplain">
        <option value="" selected = "selected">是否投诉</option>
        <option value="0">是</option>
        <option value="1">否</option>
    </select>
    &nbsp;
    &nbsp;
    <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 -->

<div id="modal-orderDetail"  style="display: none;width: 400px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span onclick="closeAll()" class="white">&times;</span>
                    </button>
                    订单详情
                </div>
            </div>
            <div class="modal-body" style="overflow-y: scroll;max-height:600px;" >
                <div class="row" id="mo-row1">
                    <label class="" style="text-indent:2em;" id="ydcd1"></label><br>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd2"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd3"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd4"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd5"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd6"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd7"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd8"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd9"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd10"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd11"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd12"></label>
                        <label class="col-sm-9" style="text-indent:2em;" id="ydcd13"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-4" style="text-indent:2em;" id="ydcd14"></label>
                        <label class="col-sm-4" style="text-indent:2em;" id="ydcd15"></label>
                        <label class="col-sm-4" style="text-indent:2em;" id="ydcd16"></label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">
                        <label class="col-sm-5" style="text-indent:2em;" id="ydcd17"></label>
                        <label class="col-sm-5" style="text-indent:5em;" id="ydcd18"></label><br>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <label class="" style="text-indent:2em;" id="ydcd19"></label><br>
                    <div class="hr-line-dashed"></div>
                    <label class="" style="text-indent:2em;" id="ydcd20"></label>
                </div>
            </div>
        </div>
    </div>
</div>

<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 ($) {

            $(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()));
                var orderState = $("#orderState").val();
                var isBackMoney = $("#isBackMoney").val();
                var isComplain = $("#iscomplain").val();
                myGrid.setGridParam({data:'json',url : '${contextPath}/ajhz/djssf/getdjssfOrder?keyword='
                        +keyword+'&orderState='+orderState+'&isBackMoney='+isBackMoney+'&isComplain='+isComplain}).trigger('reloadGrid');
            });

            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";

            $('#startDate').datepicker({
                language: 'zh-CN',
                pickTime: false,
                todayBtn: true,
                autoclose: true,
                minView: '2',
                forceParse: false,
                format:"yyyy-mm-dd"
            });
            $('#endDate').datepicker({
                language: 'zh-CN',
                pickTime: false,
                todayBtn: true,
                autoclose: true,
                minView: '2',
                forceParse: false,
                format:"yyyy-mm-dd"
            });

            myGrid=	jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/ajhz/djssf/getdjssfOrder",
                datatype : "json",
                mtype:'POST',//设置http方式为post以解决乱码问题
                height : 450,
                colNames : ['订单号', '支付单号','支付方式','创建时间','付款时间','缴费/立案地区',
                    '缴费/⽴案法院','发单律师','发单律师电话 ','接单律师','接单律师电话',
                    '订单状态','查档费用','平台抽佣','是否投诉','操作'],
                colModel : [{
                    name : 'orderId',
                    index : 'orderId',
                    width : 80,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'tradeNo',
                    index : 'tradeNo',
                    width : 80,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'payType',
                    index : 'payType',
                    width : 80,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'createDate',
                    index : 'createDate',
                    width : 100,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'paidDate',
                    index : 'paidDate',
                    width : 100,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'areaFullName',
                    index : 'areaFullName',
                    width : 80,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'addr',
                    index : 'addr',
                    width : 80,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'aName',
                    index : 'aName',
                    width : 70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'aPhone',
                    index : 'aPhone',
                    width : 90,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'bName',
                    index : 'bName',
                    width : 70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'bPhone',
                    index : 'bPhone',
                    width : 90,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'orderState',
                    index : 'orderState',
                    width : 70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'fee',
                    index : 'fee',
                    width :70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'tax',
                    index : 'tax',
                    width : 70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'isComplain',
                    index : 'isComplain',
                    width : 70,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{	name : 'type',
                    index : 'type',
                    label : '操作',
                    width : 120,
                    editable : false,
                    search : false,
                    sortable : false,
                    fixed:true,
                    formatter : optionFormatter
                }],
                //scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                sortname : "t.createDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : pager_selector,
                altRows : true,
                height:"auto",//自动根据每页条数弹性调整表格高度
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        styleCheckbox(table);
                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                }
            });


            function optionFormatter(cellvalue, options, cell) {
                var template = "<button data-toggle='modal' onclick='showAll(\""+cell.orderId+"\")'  class='btn btn-minier btn-grey'>详细</button>";
                if(cell.orderState != "已取消" && cell.orderState != "已完成") {
                    template += "&nbsp;|&nbsp;<button data-toggle='modal' onclick='cancel_confirm(\""+cell.orderId+"\")'  class='btn btn-minier btn-primary'>取消</button>";
                }

                return template;
            };

            $(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size

            // enable search/filter toolbar
            // jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
            // jQuery(grid_selector).filterToolbar({});
            // switch element when editing inline
            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'
            }, {
                // 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;
                }
            })

            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 beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }

            // it causes some flicker when reloading or navigating grid
            // it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            // or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /**
                 * $(table).find('input:checkbox').addClass('ace') .wrap('<label />') .after('<span class="lbl align-top" />') $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                 * .find('input.cbox[type=checkbox]').addClass('ace') .wrap('<label />').after('<span class="lbl align-top" />');
                 */
            }

            // unlike navButtons icons, action icons in rows seem to be hard-coded
            // you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                 * var replacement = { 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue', 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red', 'ui-icon-disk' : 'ace-icon fa fa-check green', 'ui-icon-cancel' :
                 * 'ace-icon fa fa-times red' }; $(table).find('.ui-pg-div span.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]); })
                 */
            }

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

            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=0;k<label.length;k++){
                        if(label[k].length > 0){
                            rows = rows + label[k] + "\t"; // output each Column as tab delimited
                        }
                    }
                    for (var k in row) {
                        if(k.length > 0){
                            keys[ii++] =k; // capture col names
                        }
                    }
                    rows = rows + "\n"; // Output header with end of line
                    var tIds = {"orderId":true,"tradeNo":true,"payType":false,"createDate":true,"paidDate":true,"areaFullName":false,"addr":false,"orderType":false,
                        "aName":false,"aPhone":true,"bName":false,"bPhone":true,"orderState":false,"fee":true,"tax":true,"isComplain":false,"type":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=djssfOrder' 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 showAll(orderId) {
        $("#modal-orderDetail").show();
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ajhz/djssf/showAll",
            type : "post",
            data : {
                'orderId' : orderId
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                $("#ydcd1").html("订单号&nbsp;&nbsp;&nbsp;"+ret.orderId);
                $("#ydcd2").html("支付单号&nbsp;&nbsp;&nbsp;"+ret.tradeNo+"");
                $("#ydcd3").html("支付方式&nbsp;&nbsp;&nbsp;"+ret.payType+"");
                $("#ydcd4").html("创建时间&nbsp;&nbsp;&nbsp;"+ret.createDate+"");
                $("#ydcd5").html("付款时间&nbsp;&nbsp;&nbsp;"+ret.paidDate+"");
                $("#ydcd6").html("过期时间&nbsp;&nbsp;&nbsp;"+ret.expiresDate+"");
                $("#ydcd7").html("取消时间&nbsp;&nbsp;&nbsp;"+ret.quietDate+"");
                $("#ydcd8").html("查档地区&nbsp;&nbsp;&nbsp;"+ret.areaFullName+"");
                $("#ydcd9").html("缴费⽴案地区&nbsp;&nbsp;&nbsp;"+ret.addr+"");
                $("#ydcd10").html("发单律师&nbsp;&nbsp;&nbsp;"+ret.aName+"");
                $("#ydcd11").html("发单律师电话&nbsp;&nbsp;&nbsp;"+ret.aPhone+"");
                $("#ydcd12").html("接单律师&nbsp;&nbsp;&nbsp;"+ret.bName+"");
                $("#ydcd13").html("接单律师电话&nbsp;&nbsp;&nbsp;"+ret.bPhone+"");
                $("#ydcd14").html("订单状态&nbsp;&nbsp;&nbsp;"+ret.orderState+"");
                $("#ydcd15").html("查档费用&nbsp;&nbsp;&nbsp;"+ret.fee+"");
                $("#ydcd16").html("平台抽佣&nbsp;&nbsp;&nbsp;"+ret.tax+"");
                $("#ydcd17").html("是否投诉&nbsp;&nbsp;&nbsp;"+ret.isComplain+"");
                $("#ydcd18").html("投诉次数&nbsp;&nbsp;&nbsp;"+ret.countCom+"");
                $("#ydcd19").html("投诉内容&nbsp;&nbsp;&nbsp;<p>"+ret.complainInfo+"</p>");
                $("#ydcd20").html("取消订单原因&nbsp;&nbsp;&nbsp;<p>"+ret.reason+"</p>");


            }
        });
    };
    function closeAll() {
        $("#modal-orderDetail").hide();
    }

    //取消订单
    function cancel_confirm(orderId) {
        var r = confirm("确定取消订单？")
        if (r==true) {
            cancelYdcdOrder(orderId);
        }
    }
    function cancelYdcdOrder(orderId) {

        $.ajax({
            dataType : "json",
            url : "${contextPath}/ajhz/order/cancelOrder",
            type : "post",
            data : {
                'orderId' : orderId
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                if (ret.success) {
                    alert('保存成功');
                    myGrid.trigger("reloadGrid");
                } else {
                    alert(ret.message);
                }
            }
        });
    }




</script>