<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery.gritter.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/bootstrap-datetimepicker.css" />

<style>

    /* ===================================弹框css部分================================================== */

    .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: -180px;
        left: 36%;
        width: 35%;
        /*border: 2px solid #d3d3d3;
        */background-color: white;
        z-index: 1002;

        /* overflow: auto; */

    }
    .fen{
        width: 100%;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 150px;
        -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.32);
        -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.32);
        box-shadow:2px 2px 15px rgba(0, 0, 0, 0.32);
    }
    .huoqu{
        position: absolute;
        top: 50px;
        left: 70px;

    }



    /* ===================================弹框css部分 ==================================================== */

</style>

<div class="row">
    <div id="fade" class="black_overlay"></div>

    <div class="huoqu">
        <a id="getLawyer" onclick="javasrcipt:ShowDiv('MyDiv','fade')">
            <span  class="btn btn-info no-border">
				<span class="bigger-110">点击获取律师信息</span>
            </span>
        </a>

    </div>

  <div class="fen" ></div>

    <div style="height: 200px"></div>

    <div class="col-xs-12">
        开始日期：<input id="startDate" type="text">
        结束日期：<input id="endDate" type="text">&nbsp;&nbsp;&nbsp;&nbsp;

            <a data-toggle="tab" href="javascript:void(0)" class="btn-new-mail" id="row11">
			<span class="btn btn-purple no-border">
				<span class="bigger-110" id="count">统计</span>
			</span>
            </a>



        <br>
        <br>
        <table  border="1" id="dataTable"  style=" border-collapse:collapse;border-spacing:0; border:1px  solid  #FFFFFF;height: 220px;width: 800px">
            <tr  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">
                <td>打电话数</td>
                <td   style="background: #e5efeb; text-align: center;height: 2.2rem;color: black;width: 200px"><span id="p1"></span></td>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;width: 200px;  text-align: center; height: 2.2rem;">电话接通率</td>
                <td id="p5" style="background: #e5efeb; text-align: center;width: 200px;height: 2.2rem;color: black"></td>
            </tr>
            <tr >
                <td   style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">接通电话数</td>
                <td id="p2" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">有效沟通率</td>
                <td id="p6" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
            </tr>
            <tr>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">有效沟通数</td>
                <td id="p3" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">沟通-加微信转化率</td>
                <td id="p7" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
            </tr>
            <tr>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">愿意加微信数</td>
                <td id="p4" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
                <td  style="background:#50aca2;color: #fff;border-bottom-width: 0;  text-align: center; height: 2.2rem;">接通电话-愿意加微信转化率</td>
                <td id="p8" style="background: #e5efeb; text-align: center;height: 2.2rem;color: black"></td>
            </tr>
        </table>

        <!--弹出层时背景层DIV---start-->



            <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;">
                            <div id="mod-add-tip" class="red clearfix"></div>
                            <div class="form-group">
                                <label for="lawyerName">律师姓名</label>
                                <input class="form-control" name="lawyerName" disabled id="lawyerName" oncopy="alert('对不起，禁止复制！');return false;" type="text" value="" />
                            </div>
                            <div class="form-group">
                                <label for="phone">律师手机号码</label>
                                <input class="form-control" name="phone" disabled  id="phone" oncopy="alert('对不起，禁止复制！');return false;" type="text" value="" >
                            </div>
                            <div class="form-group">
                                <label><span style="color: red">*</span>是否接通:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <label>是&nbsp;<input type="radio" name="call"  value=true></label>&nbsp;&nbsp;
                                <label>否&nbsp;<input type="radio" name="call"  value=false></label>
                            </div>
                            <div class="form-group">
                                <label><span style="color: red">*</span>是否有效沟通：&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <label>是&nbsp;<input type="radio" name="phone1"  value=true></label>&nbsp;&nbsp;
                                <label>否&nbsp;<input type="radio" name="phone1"  value=false></label>
                            </div>
                            <div class="form-group">
                                <label><span style="color: red">*</span>是否愿意加微信：</label>
                                <label>是&nbsp;<input type="radio" name="wx"  value=true></label>&nbsp;&nbsp;
                                <label>否&nbsp;<input type="radio" name="wx"  value=false></label>                            </div>
                            <div class="form-group">
                                <label for="wxNum"><span style="color: red">*</span>微信号码（默认律师手机号，可修改）</label>
                                <input class="form-control" id="wxNum" oncopy="alert('对不起，禁止复制！');return false;" type="text" width="50px">
                            </div>
                            <div class="form-group">
                                <label for="remark">备注</label>
                                <input class="form-control" id="remark" oncopy="alert('对不起，禁止复制！');return false;" type="text" width="50px">
                            </div>

                        <div class="modal-footer no-margin-top">
                            <div class="text-center">
                                <button onclick="javasrcipt:saveLawyer() " 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('MyDiv','fade')" class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-share bigger-160"></i>
                                    取消
                                </button>
                            </div>
                        </div>
                    </div><!-- /.modal-content -->

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

        </div>

        <br><br>
    <%--    <table id="grid-table"></table>--%>


    </div>
</div>


<script src="${contextPath}/static/assets/js/excanvas.js"></script>

<script type="text/javascript">
    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";

            $("#row11").click(row11);

            $('#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"
            });

            // resize to fit page size



            $(document).keydown(function(event) {
                var key = window.event ? event.keyCode : event.which;
                if (key == 13) {
                    $("#count").click();
                }
            });

            /*搜索框  主要对Jquery grid进行刷新 带参数刷新    */
            $("#count").click(function(){
                var startDate = encodeURI(encodeURI($("#startDate").val()));
                var endDate = encodeURI(encodeURI($("#endDate").val()));
                getCount();

            });

    });
        function row11(){
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();
            if(startDate==''){
                alert('开始日期不能为空！');
                return;
            }
            //window.open('${contextPath}/sys/company/getCompanyStatices?type=total&startDate='+startDate+'&endDate='+endDate);
        }
    });


    //===================================弹框js部分 ===========================================

    //弹出隐藏层

    function ShowDiv(show_div,bg_div){
        $.ajax({
            dataType : "json",
            url : "${contextPath}/sbdx/count/getLawyer",
            type : "get",
            data : {},
            async:true,
            complete : function(ret) {
                var ret = eval("(" + ret.responseText+ ")");

                if (ret.canFind == "true"){
                    var scrollHeight = document.body.scrollHeight; //文档高度
                    document.getElementById(bg_div).style.height=scrollHeight+'px';
                    document.getElementById(show_div).style.display='block';
                    document.getElementById(bg_div).style.display='block';
                    var p = ret.phone;
                    p = p.replace('[','');
                    p = p.replace(']','');
                    $("#lawyerName").val(ret.lawyerName);
                    $("#phone").val(p);
                    $("#wxNum").val(p);

                }else {
                    alert(ret.message);
                }


            }
        });




    };



    //关闭弹出层

    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';

    };


    //===================================弹框js部分 ===========================================
    //保存律师信息
    function saveLawyer() {
        var call = $('input[name="call"]:checked').val();
        var phone1 = $('input[name="phone1"]:checked').val();
        var wx = $('input[name="wx"]:checked').val();

        var phone = $("#phone").val();
        var wxNum = $("#wxNum").val();
        var remark = $("#remark").val();

        var date = new Date();
        var myDay = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+"  "
        +date.getHours()+':'+(date.getMinutes()+1)+':'+(date.getSeconds()+1);

        if (call == null || phone1 == null || wx == null || wxNum ==null){
            alert("请填写星号信息后才能保存！！");
        }


        $.ajax({
            dataType : "json",
            url : "${contextPath}/sbdx/count/saveLawyer",
            type : "post",
            data : {"phone":phone , "phoneConnect":call , "phoneCommu":phone1 , "addWeChat":wx
            ,"weChatNumber":wxNum , "remark":remark , "updateDate":myDay},
            async:false,
            complete : function(ret) {
                var ret = eval("(" + ret.responseText+ ")");
                alert(ret.message);
                location.reload();
                CloseDiv();
            }
        });
    }

    getCount();

function getCount() {

    var startDate = $("#startDate").val();
    //默认查询当天记录
    if(startDate==""){
        var date = new Date((+new Date()));
        startDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
        $("#startDate").val(startDate);
    }
    var endDate = $("#endDate").val();
    if(endDate ==""){
        var date = new Date((+new Date()));
        endDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
        $("#endDate").val(endDate);
    }

    var param = "?startDate=" + startDate + "&endDate=" + endDate;
    $.ajax({
        dataType : "json",
        url : "${contextPath}/sbdx/count/getInfo" +param,
        type : "get",
        data : {/*"startDate":startDate,"endDate":endDate*/},
        async:false,
        complete : function(ret) {
            var ret = eval("("+ret.responseText+")");

            $("#p1").html(ret.phoneTol);
            $("#p2").html(ret.pconTol);
            $("#p3").html(ret.pcomTol);
            $("#p4").html(ret.awcTol);
            $("#p5").html(ret.pconLv + " %");
            $("#p6").html(ret.pcomLv + " %");
            $("#p7").html(ret.awcLv + " %");
            $("#p8").html(ret.addWByP + " %");


        }
    });
}







</script>