<%@ 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">
            最近匹配时间：<input type="text" class="input-sm" placeholder="开始时间" id="startDate"/>
            <input type="text" class="input-sm" placeholder="结束时间" id="endDate"/>
            电话:<input id="keyword" class="input-medium search-query" type="text"/>
            姓名:<input id="LawyerName" class="input-medium search-query" type="text"/>
            <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>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">是否确定删除</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deletJob()">删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</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 ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            /*搜索框  主要对Jquery grid进行刷新 带参数刷新    */
            $("#searchd").click(function () {
                var statusFlag = $("#statusFlag").val();
                var keyword = encodeURI(encodeURI($("#keyword").val()));
                var name = $("#LawyerName").val();
                var startDate = $("#startDate").val();
                var endDate = $("#endDate").val();
                var page = $(".ui-pg-input").val();
                if(keyword != "" || name != ""){
                    page = 1
                }
                myGrid.setGridParam({
                    postData: {
                        'statusFlag': statusFlag,
                        keyword: keyword,
                        startDate: startDate,
                        endDate: endDate,
                        name: name,
                        page: page
                    }, url: '${contextPath}/lszp/Job/getOrder', page: page
                }).trigger('reloadGrid');
            });

            $(document).keydown(function (event) {
                var key = window.event ? event.keyCode : event.which;
                if (key == 13) {
                    $("#searchd").click();
                }
            });
            $('#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}/lszp/Job/getOrder",
                datatype : "json",
                mtype:'POST',//设置http方式为post以解决乱码问题
                width: 'auto',
                colNames : [ '订单号', '支付订单号', '姓名', '电话', '付款时间', '付款方式', '付款金额'],
                colModel : [  {
                    name : 'id',
                    index : 'id',
                    width : 250,
                    sortable : true,
                    editable : false,
                }, {
                    name : 'tradeNo',
                    index : 'tradeNo',
                    width : 250,
                    editable : false,

                }, {
                    name : 'name',
                    index : 'name',
                    width : 100,
                    editable : false,
                    search : false
                }, {
                    name : 'phone',
                    index : 'phone',
                    width : 100,
                    editable : true,
                }, {
                    name : 'payDate',
                    index : 'payDate',
                    width : 200,
                    editable : false,
                    search : false
                }, {
                    name : 'payType',
                    index : 'payType',
                    width : 100,
                    editable : true,
                    readonly : true,
                    search : false,
                }, {
                    name : 'price',
                    index : 'price',
                    width : 100,
                    editable : false,
                    search : false
                }
                ],
                //scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                sortname : "payDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : pager_selector,
                altRows : true,
                multiselect: true,
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                }
            });

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

            function optionFormatter(cellvalue, options, cell) {
                var template ="<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" onclick='showModal(\""+cell.id+"\")'>删除</button>\n"
                return template;

            };
            function optionFormatter2(cellvalue, options, cell) {
                var template ="<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" onclick='showModal2(\""+cell.id+"\")'>详情</button>\n"
                return template;

            };

        });
    });
    var jobId;
    function showModal(id) {
        $('#myModal').modal('show')
        jobId=id;
    }
    function showModal2(id) {
        console.log(id);
        window.location.href="${contextPath}/sys/sysuser/home#page/lszpJobDetails?id='"+id+"'"
        //window.location.href="${contextPath}/sys/sysuser/home#page/lszpJobDetails?id='71aea70618fb452298e8da295d3ba79e'"
    }
    function deletJob() {
        $('#myModal').modal('hide')
        $.ajax({
            type:"post",
            url:"${contextPath}/lszp/Job/deleteJob",
            data:{
                "id":jobId
            },
            dataType:"json",
            success:function(retMsg){
                if(retMsg.code==200){
                    alert("success");
                }else{
                    alert("false");
                }
            }
        })
        parent.location.reload();
    }
</script>