<%--
  Created by IntelliJ IDEA.
  User: zwy
  Date: 2019/12/23
  Time: 16:26
  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/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />

<style>
    #MyDiv1{
        display: none;
        position: absolute;
        top: -100px;
        left: 300px;
    }

    #MyDiv{
        display: none;
        position: absolute;
        top: -100px;
        left: 300px;
    }
</style>
&nbsp;&nbsp;&nbsp;
关键字:<input id="keywords" placeholder="输入关键字" class="input-medium search-query" type="text" />
&nbsp;&nbsp;&nbsp;
跟进分类:
<select id='type'>
    <option selected value="" >所有</option>
    <option value="0" >当事人</option>
    <option value="1" >律师</option>
</select>
<button id="searchd" type="button" class="btn" >搜索</button>
&nbsp;&nbsp;&nbsp;
<button class="btn btn-large btn-info" onclick="preAddServive();">添加跟单人员</button>
<br>
<br>
<div class="row">
    <div class="col-xs-12">
        <table id="grid-table" style="font-size: 20px"></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="MyDiv1" class="modal-dialog white_content">
    <div class="modal-content">
        <div class="modal-header no-padding">
            <div class="table-header">
                <button onclick="CloseDiv1()" type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span  class="white">&times;</span>
                </button>
                编辑信息
            </div>
        </div>
        <br>
        <div class="modal-body">
            <input type="text" id="edit-id" style="display: none" class="form-control"/>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">微信号:</label>
                <div class="col-sm-8 input-group">
                    <input type="text" id="edit-weixin" class="form-control"/>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">跟单人员:</label>
                <div class="col-sm-8 input-group">
                    <input type="text" id="edit-gdUser" class="form-control"/>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">二维码:</label>
                <div class="col-sm-8 input-group">
                    <img  id="edit-qrcode" src="" style="height: 200px; width: 200px;"/>
                    <input type="text" hidden id="picUrl">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-large" onclick="uploadPicFun()">上传图片</button>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">跟进分类:</label>
                <div class="col-sm-8 input-group">
                    <select id="edit-type">
                        <option value="2" selected>请选择</option>
                        <option value="1">律师</option>
                        <option value="0">当事人</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer no-margin-top">
                <div class="text-center" id="edit-button">
                    <button class="btn btn-sm" onclick="saveServive();" data-dismiss="modal">
                        <i class="ace-icon fa fa-save bigger-160" ></i> 保存
                    </button>
                    <button class="btn btn-sm" onclick="CloseDiv1()" data-dismiss="modal">
                        <i class="ace-icon fa fa-share bigger-160" ></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</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()" type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span  class="white">&times;</span>
                </button>
                添加客服
            </div>
        </div>
        <br>
        <div class="modal-body">
            <input type="text" id="edit-id1" style="display: none" class="form-control"/>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">微信号:</label>
                <div class="col-sm-8 input-group">
                    <input type="text" id="edit-weixin1" class="form-control"/>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">跟进人员姓名:</label>
                <div class="col-sm-8 input-group">
                    <input type="text" id="edit-gdUser1" class="form-control"/>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">二维码:</label>
                <div class="col-sm-8 input-group">
                    <img  id="edit-qrcode1" src="" style="height: 200px; width: 200px;"/>
                    <input type="text" hidden id="picUrl1">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-large" onclick="uploadPicFun()">上传图片</button>
                </div>
            </div>
            <div class="form-group"  >
                <label class="col-sm-3 control-label">跟进分类:</label>
                <div class="col-sm-8 input-group">
                    <select id="edit-type1">
                        <option value="2" selected>请选择</option>
                        <option value="1">律师</option>
                        <option value="0">当事人</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer no-margin-top">
                <div class="text-center" id="edit-button1">
                    <button class="btn btn-sm" onclick="addServnce();" data-dismiss="modal">
                        <i class="ace-icon fa fa-save bigger-160" ></i> 保存
                    </button>
                    <button class="btn btn-sm" onclick="CloseDiv()" data-dismiss="modal">
                        <i class="ace-icon fa fa-share bigger-160" ></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

<!-- 图片上传 -->
<div id="mod-pic" class="modal fade" tabindex="-1" style="z-index: 99999">
    <div class="modal-dialog" style="max-width: 500px;">
        <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 class="white">&times;</span>
                    </button>
                    图片上传
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS  -->
                        <form id="picform" >
                            <input id="lawsuitId" type="text" style="display: none" />
                            <input id="picFileId" type="file" name="picfile" multiple="multiple" />
                            <div class="hr hr-12 dotted"></div>
                            <div class="text-center">
                                <button type="button" class="btn btn-sm btn-primary" onclick="updatePic()">上传</button>
                                <button type="reset" class="btn btn-sm">清除</button>
                            </div>
                        </form>
                    </div><!-- /.col -->
                </div><!-- /.row -->

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



<script type="text/javascript" >

    var myGrid = null;
    var scripts = [ null,
        "http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js?v="+Math.random(),
        "${contextPath}/static/js/contract/picupload.js?v="+Math.random(),
        "${contextPath}/static/js/contract/fileupload.js?v="+Math.random(),
        "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js",
        "${contextPath}/static/assets/js/bootstrap-typeahead.js",
        "${contextPath}/static/js/contract/uuid.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",
        "${contextPath}/static/assets/js/lazyload/jquery.lazyload.js",
        "${contextPath}/static/js/datatimepicker/bootstrap-datetimepicker.zh-CN.js",
        "${contextPath}/static/js/datatimepicker/bootstrap-datetimepicker.min.js",
        "${contextPath}/static/js/datatimepicker/bootstrap-datetimepicker.min.css",
        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 keywords = $("#keywords").val();
                var type = $("#type").val();
                myGrid.setGridParam({postData:{
                        keywords:keywords,type:type,page:1},
                    url : '${contextPath}/ads/vip/getAdsManager',page:1}).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}/ads/vip/getAdsManager",
                datatype : "json",
                mtype:'POST',//设置http方式为post以解决乱码问题
                colNames : ['id','是否在线','客服编号','微信号','微信二维码','跟进分类','跟进人员', '操作'],
                colModel : [{
                    name : 'id',
                    index : 'id',
                    width : 10,
                    search : false,
                    editable : false,
                    hidden : true
                    //sorttype : 'date'
                },{
                    name : 'online',
                    index : 'online',
                    width : 10,
                    search : false,
                    editable : false,
                    hidden : true
                    //sorttype : 'date'
                },{
                    name : 'code',
                    index : 'code',
                    width : 120,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'weixin',
                    index : 'weixin',
                    width : 250,
                    search : false,
                    editable : false,

                },{
                    name : 'qrcode',
                    index : 'qrcode',
                    width : 200,
                    search : false,
                    editable : false,
                    formatter : optionFormatter_a
                },{
                    name : 'type',
                    index : 'type',
                    width : 150,
                    search : false,
                    editable : false,
                    formatter : optionFormatter_b
                },{
                    name : 'gdUser',
                    index : 'gdUser',
                    width : 200,
                    search : false,
                    editable : false,
                },{
                    name : '',
                    index : '',
                    width : 300,
                    editable : false,
                    search : false,
                    sortable : false,
                    fixed:true,
                    formatter : optionFormatter
                }],
                sortname : "createDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 5,
                rowList : [ 5, 10, 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 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);
                var template = "&nbsp;&nbsp;<button data-toggle='modal' onclick='showEdit(\""+cell.id+"\")' class='btn btn-large btn-yellow'><i class='ace-icon fa fa-hdd-o '></i>编辑信息</button>";
                if (cell.online === 1){
                    template += "&nbsp;&nbsp;|&nbsp;&nbsp;<button data-toggle='modal' onclick='downOnline(\""+cell.id+"\" )' class='btn btn-large btn-info'><i class='ace-icon fa fa-hdd-o '></i>下线</button>";
                }else{
                    template += "&nbsp;&nbsp;|&nbsp;&nbsp;<button data-toggle='modal' onclick='upOnline(\""+cell.id+"\")' class='btn btn-large btn-info'><i class='ace-icon fa fa-hdd-o '></i>上线</button>";
                }
                return template;
            }

            function optionFormatter_a(cellvalue, options, cell) {
                // var template = "&nbsp;<button data-toggle='modal' onclick='showEdit(\""+cell.id+"\")' class='btn btn-minier btn-yellow'><i class='ace-icon fa fa-hdd-o '></i>查看二维码</button>";
                var template = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style='width: 100px; height: 100px;' src='"+cell.qrcode+"' />";
                return template;
            }
            function optionFormatter_b(cellvalue, options, cell) {
               if (cell.type === 1){
                    return "律师";
               }else{
                   return "当事人";
               }
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({
                    container : 'body'
                });
                $(table).find('.ui-pg-div').tooltip({
                    container : 'body'
                });
            };


        });
    });

    function CloseDiv1() {
        $("#MyDiv1").hide();
    }
    function CloseDiv() {
        $("#MyDiv").hide();
    }

    function showEdit(id) {
        $("#edit-id").val("");
        $("#edit-weixin").val("");
        $("#edit-type").val("");
        $("#edit-qrcode").attr("src","");
        $("#picUrl").val("");
        $("#edit-gdUser").val("");
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ads/vip/getAdsManagerById",
            type : "post",
            data : {
                'id' : id
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                if (ret === "false"){
                    alert("获取失败！");
                }else{
                    console.log(ret);
                    $("#edit-id").val(ret.id);
                    $("#edit-weixin").val(ret.weixin);
                    $("#edit-type").val(ret.type);
                    $("#edit-qrcode").attr("src",ret.qrcode);
                    $("#picUrl").val(ret.qrcode);
                    $("#edit-gdUser").val(ret.gdUser);
                }
                // jQuery("#grid-table").trigger("reloadGrid");
            }
        });
        $("#MyDiv1").show();
    }

    function saveServive() {
        var id = $("#edit-id").val();
        var weixin = $("#edit-weixin").val();
        var type = $("#edit-type").val();
        var qrcode = $("#picUrl").val();
        var gdUser = $("#edit-gdUser").val();
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ads/vip/updateService",
            type : "post",
            data : {
                'id' : id,
                'weixin' : weixin,
                'type' : type,
                'qrcode' : qrcode,
                'gdUser' : gdUser,
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                alert(ret.message);
                jQuery("#grid-table").trigger("reloadGrid");
                $("#MyDiv1").hide();
            }
        });
    }

    function upOnline(id) {
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ads/vip/upOrDownOnline",
            type : "post",
            data : {
                'id' : id,
                'online': 1
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                console.log(ret);
                alert(ret.message);
                jQuery("#grid-table").trigger("reloadGrid");
            }
        });
    }

    function downOnline(id) {
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ads/vip/upOrDownOnline",
            type : "post",
            data : {
                'id' : id,
                'online': 0,
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                console.log(ret);
                alert(ret.message);
                jQuery("#grid-table").trigger("reloadGrid");
            }
        });
    }

    $('#mod-pic').on('hidden.bs.modal', function (){
        if($('.modal.in').length > 0){
            $("body").addClass("modal-open");
        }

    });

    function uploadPicFun() {
        document.getElementById('picform').reset();
        $("#mod-pic").modal("toggle");
    }

    /*上传图片*/
    function updatePic() {
        applyTokenDo(picUpload);
    }

    function preAddServive() {
        $("#edit-id").val("");
        $("#edit-weixin").val("");
        $("#edit-type").val("");
        $("#edit-qrcode").attr("src","");
        $("#picUrl").val("");
        $("#MyDiv").show();
    }
    function addServnce() {
        var weixin = $("#edit-weixin1").val();
        var type = $("#edit-type1").val();
        var qrcode = $("#picUrl1").val();
        var gdUser = $("#edit-gdUser1").val();
        $.ajax({
            dataType : "json",
            url : "${contextPath}/ads/vip/addService",
            type : "post",
            data : {
                'weixin': weixin,
                'type': type,
                'qrcode': qrcode,
                'gdUser': gdUser,
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                console.log(ret);
                alert(ret.message);
                $("#MyDiv").hide();
                jQuery("#grid-table").trigger("reloadGrid");
            }
        });
    }


    /*-------------------------OSS上传图片-------------------------*/

    var appServer = 'http://b.duowenlvshi.com/oss/token?name=video';
    var bucket = '${oss_bucket_ssdb}';
    var region = 'oss-cn-shenzhen';
    var applyTokenDo = function (func) {
        var url = appServer;
        $.ajax({
            type: "POST",
            url: url,
            data: "",
            dataType: "jsonp",
            success: function (e) {
                console.log("6666");
                console.log(e);
                var client = new OSS.Wrapper({
                    region: region,
                    accessKeyId: e.AccessKeyId,
                    accessKeySecret: e.AccessKeySecret,
                    stsToken: e.SecurityToken,
                    bucket: bucket
                });
                return func(client);
            },
            error: function (data) {
                console.log(data);
            }
        });
    };

    var picUpload = function(client){
        var file=document.getElementById('picFileId').files[0];
        var file_name=file.name;
        console.log("源文件名==："+file_name);
        var storeAs = "duowenadmin/"+file_name;
        console.log(file.name + ' => ' + storeAs);
        client.multipartUpload(storeAs, file).then(function (result) {
            console.log("result=:"+result.url);
            $("#edit-qrcode").attr("src",result.url);
            $("#picUrl").val(result.url);
            $("#edit-qrcode1").attr("src",result.url);
            $("#picUrl1").val(result.url);
            $("#mod-pic").modal("toggle");
        }).catch(function (err) {
            console.log("err", err);
            console.log("err.name : " + err.name);
            console.log("err.message : " + err.message);
        });
    };


    /*-------------------------OSS上传图片-------------------------*/




</script>