<%--
  Created by IntelliJ IDEA.
  User: -
  Date: 2019/8/12
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ 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" />

<style>
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.50;
        filter: alpha(opacity=50);
    }

    .white_content {
        display: none;
        position: absolute;
        top: 0px;
        left: 36%;
        width: 35%;
        /*border: 2px solid #d3d3d3;
        */background-color: white;
        z-index: 1002;

        /* overflow: auto; */

    }   .white_content1 {
            display: none;
            position: absolute;
            top: 0px;
            left: 36%;
            width: 35%;
            /*border: 2px solid #d3d3d3;
            */background-color: white;
            z-index: 1002;

            /* overflow: auto; */

        }
</style>


<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="fade" class="black_overlay"></div>
<div  id="MyDiv" class="modal-dialog white_content">
    <div class="modal-content">
        <div class="modal-header no-padding">
            <div class="table-header">
                <button onclick="CloseDiv('MyDiv','fade')" type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span  class="white">&times;</span>
                </button>
                聊天记录
            </div>
        </div>
        <div class="modal-body" style="overflow-y: scroll;max-height:550px;">
            <div  class="col-sm-12 control-label text-left" id="chat" style="text-align: left">聊天记录</div>
        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div>


<div  id="MyDiv1" class="modal-dialog white_content1">
    <div class="modal-content">
        <div class="modal-header no-padding">
            <div class="table-header">
                <button onclick="CloseDiv('MyDiv1','fade')" type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span  class="white">&times;</span>
                </button>
                回复消息
            </div>
        </div>
        <br>
        <input type="text" style="display: none" id="phoned" value=""/>
        <div class="modal-body" style="overflow-y: scroll;max-height:550px;">
            <textarea  style="width: 420px;height: 280px;overflow-x: hidden;" type="text" id="backChat"></textarea>
        </div><!-- /.modal-content -->

        <div class="modal-footer no-margin-top">
            <div class="text-center">
                <button onclick="javasrcipt:sendMessage() " id="mod-add-submit" type="button" class="btn btn-sm btn-primary">
                    <i class="ace-icon fa fa-floppy-o bigger-160"></i>
                    发送
                </button>
                <button  onclick="CloseDiv('MyDiv1','fade')" class="btn btn-sm" data-dismiss="modal">
                    <i class="ace-icon fa fa-share bigger-160"></i>
                    取消
                </button>
            </div>
        </div>

    </div><!-- /.modal-dialog -->

</div>

<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/assets/js/lazyload/jquery.lazyload.js", null ];
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {

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

            myGrid=	jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/sbdx/message/getAllInfo",
                datatype : "json",
                colNames : ['所在省', '所在城市','律师姓名','电话号码','未读消息','推送时间','操作'],
                colModel : [
                    {	name : 'S_PROVNAME',
                        index : '0',
                        width : 180,
                        editable : false,
                        //sorttype : 'date'
                    },{	name : 'S_CITYNAME',
                        index : '1',
                        width : 180,
                        search : false,
                        editable : false,
                        readonly : true,
                        //sorttype : 'date'
                    },{	name : 'lawyerName',
                        index : '2',
                        width : 200,
                        search : false,
                        editable : false,
                    },{	name : 'phone',
                        index : '3',
                        width : 200,
                        editable : false
                    },{	name : 'weidu',
                        index : '4',
                        width : 180,
                        editable : false
                    },{	name : 'pushDate',
                        index : '5',
                        width : 180,
                        editable : false
                    },{	name : 'type',
                        index : 'type',
                        label : '操作',
                        width : 280,
                        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
                sortorder : "asc",
                viewrecords : true,
                rowNum : 50,
                rowList : [ 50, 80, 100 ],
                pager : pager_selector,
                altRows : true,
                height:"auto",
                loadComplete : function() {
                     var table = this;
                     /*setTimeout(function(){
                         styleCheckbox(table);
                         updateActionIcons(table);
                         updatePagerIcons(table);
                         enableTooltips(table);
                     }, 0);*/
                    updatePagerIcons(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 optionFormatter(cellvalue, options, cell) {
                /*  console.log(cell[2])*/
                var template = "<button data-toggle='modal' onclick='showInfo(\""+cell[3]+"\",)' class='btn btn-minier btn-grey'>查看</button>";
                template += "&nbsp;|&nbsp;<button data-toggle='modal' onclick='messageBack(\""+cell[3]+"\")' class='btn btn-minier btn-primary'>回复</button>";


                return template;
            }



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

            $(document).one('ajaxloadstart.page', function(e) {
                $(grid_selector).jqGrid('GridUnload');
                $('.ui-jqdialog').remove();
            });
        });



    });

    function showInfo(phone) {
        var scrollHeight = document.body.scrollHeight; //文档高度
        document.getElementById("fade").style.height=scrollHeight+'px';
        document.getElementById("MyDiv").style.display='block';
        document.getElementById("fade").style.display='block';
        $.ajax({
            dataType : "json",
            url : "${contextPath}/sbdx/message/showInfo",
            type : "post",
            data : {
                'phone' : phone
            },
            success : function(ret) {
                if(ret != null){
                    /*alert(ret[0][0])
                    console.log(ret[0])*/
                    var chatMessage = '';
                    for ( var i = 0; i <ret.length; i++){
                        var tempText = ret[i][0] + " &nbsp;&nbsp;: " + ret[i][1]+"&nbsp;&nbsp; " + ret[i][2] + "<br/><br/>"
                        chatMessage += tempText ;
                    }
                    $("#chat").html(chatMessage);
                }

            }
        });

    };


    function messageBack(phone) {

        var scrollHeight = document.body.scrollHeight; //文档高度
        document.getElementById("fade").style.height=scrollHeight+'px';
        document.getElementById("MyDiv1").style.display='block';
        document.getElementById("fade").style.display='block';
        $("#phoned").val(phone);

    }

    function sendMessage() {
        var message = $("#backChat").val();
        var phone = $("#phoned").val();

        $.ajax({
            dataType : "json",
            url : "${contextPath}/sbdx/message/pushMQTTMsg",
            type : "post",
            data : {
                'phone' : phone,'message':message
            },
            success : function(ret) {
                alert("回复成功！")
                document.getElementById("MyDiv1").style.display='none';
                document.getElementById("fade").style.display='none';
                location.reload();
            }
        });
    }

    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };
</script>