{include file="public/header"/}

<style>
      .layui-form-label{
        float: left;
        display: block;
        padding: 9px 15px;
        width: 100px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

       .videos {
            font-size: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            transition: all 1s;
            width: 100%;
        }

        #localVideo {
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            transition: opacity 1s;
            width: 100%;
        }

        #remoteVideo {
            display: block;
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            position: absolute;
            transition: opacity 1s;
            width: 100%;
        }

        .c_tag {
            font-size: 10px;
            height: 20px;
            background-color: #F5FAFF;
            border: 1px solid #7571f9;
            border-radius: 10px;
            color: #7571f9;
            padding: 1px 5px;
            margin-right: 5px;
            border-bottom-left-radius: 0px;
        }

        .clear-btn {
            position: absolute;
            bottom: 45px;
            right: 30px;
            z-index: 200;
            cursor: pointer;
            height:48px;
            width: 48px;
        }

        .reply-about.clear {
            position: absolute;
            bottom: 95px;
            right: 0;
            padding: 10px 16px;
            background-color: black;
            color: #fff;
            z-index: 200;
            border-radius: 5px;
            display: none;
        }

        .reply-border.clear {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid black;
            position: absolute;
            bottom: 90px;
            right: 50px;
            z-index: 200;
            display: none;
        }

        .clear-btn:hover+.reply-border,.clear-btn:hover+.reply-border+.reply-about.clear{
            display: block;
        }
</style>

<script type="text/javascript" src="__libs__/webrtc/recorder.js"></script>
<div id="container" style="background-color: #f7f7f7;overflow: hidden">
    <div class="all_content" style="overflow-y: hidden;">
        <section class="" style="width:20%;height:100%;position:absolute;border-top-left-radius: 8px;left:0px;background: #F7F7F7;min-width: 240px;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
                 style="margin:0px;position: absolute;top:0px;width: 100%;">
                <ul class="layui-tab-title" style="height: 50px;border: 0;">
                    <li class="layui-this" style="width: 50%;color: #555555;height: 50px;line-height: 55px;">当前对话<span class="line"></span></li>
                    <li style="width: 50%;color: #555555;height: 50px;line-height: 55px;">排队列表 <div id="waitnum" class="notice-icon hide" style="position: absolute;top:0px;line-height: 18px;font-size: 8px;" ></div><span class="line"></span></li>
                </ul>
                <div class="layui-tab-content" style="padding: 0px;">
                    <!--<img onclick="clearList()" class="clear-btn" src="__image__/index/clear.png"></img>
                    <span class="reply-border clear"></span>
                    <span class="reply-about clear">清空聊天列表</span>-->
                    <div class="layui-tab-item  layui-show" id="chat_list" style="width: 100%;overflow-y: auto;">
                    </div>
                    <div class="layui-tab-item" id="wait_list" style="width: 100%;overflow-y: auto;">
                    </div>
                </div>
            </div>
        </section>


        <section style="width:52%;height:100%;position: absolute;left: 20%;background: #F7F7F7;padding: 0 9px;min-width: 600px;">
            <div class="no_chats">
                <i class="no_chats-pic"></i>
            </div>
            <div class="chatbox hide" style="width: 100%;height: 100%;padding-bottom: 242px">

                <div id="wrap" style="width: 100%;height:100%;overflow-y: auto;background-color: #fff">

                    <ul class="conversation">

                    </ul>
                </div>
                <script type="text/javascript">

                    window.onresize = function(){
                        var height =document.body.clientHeight;
                        $("#chat_list").css("height",(height -110)+"px");
                        $("#wait_list").css("height",(height-110)+"px");
                    }

                    document.getElementById("wrap").onscroll = function(){
                        var t =  document.getElementById("wrap").scrollTop;
                        if( t == 0 ) {
                            var sdata = $.cookie("cu_com");
                            var jsondata = $.parseJSON(sdata);
                            var chas = jsondata.visiter_id;
                            if($.cookie("hid") != ""){
                                getdata(chas);
                            }
                        }
                    }


                    function info(){
                        layer.tips("将您剪切好的图片粘贴到输入框即可", "#paste", {tips: [1, '#9EC6EA']});
                    }

                </script>
                <div class="footer">
                    <div class="tool_box">

                        <div class="wl_faces_content">

                            <div class="wl_faces_main">
                                <ul>
                                    <li><a href="javascript:;" >
                                        <img title="羊驼" src="__uploads__/emoji/emo_01.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="神马" src="__uploads__/emoji/emo_02.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="浮云" src="__uploads__/emoji/emo_03.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="给力" src="__uploads__/emoji/emo_04.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="围观" src="__uploads__/emoji/emo_05.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="威武" src="__uploads__/emoji/emo_06.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="熊猫" src="__uploads__/emoji/emo_07.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="兔子" src="__uploads__/emoji/emo_08.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="奥特曼" src="__uploads__/emoji/emo_09.gif"/></a></li>
                                    <li><a href="javascript:;">
                                        <img title="囧" src="__uploads__/emoji/emo_10.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="互粉" src="__uploads__/emoji/emo_11.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="礼物" src="__uploads__/emoji/emo_12.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="微笑" src="__uploads__/emoji/emo_13.gif"/></a></li>
                                    <li><a  href="javascript:;" >
                                        <img title="嘻嘻" src="__uploads__/emoji/emo_14.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="哈哈" src="__uploads__/emoji/emo_15.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="可爱" src="__uploads__/emoji/emo_16.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="可怜" src="__uploads__/emoji/emo_17.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抠鼻" src="__uploads__/emoji/emo_18.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="吃惊" src="__uploads__/emoji/emo_19.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="害羞" src="__uploads__/emoji/emo_20.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="调皮" src="__uploads__/emoji/emo_21.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="闭嘴" src="__uploads__/emoji/emo_22.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="鄙视" src="__uploads__/emoji/emo_23.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="爱你" src="__uploads__/emoji/emo_24.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="流泪" src="__uploads__/emoji/emo_25.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="偷笑" src="__uploads__/emoji/emo_26.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="亲亲" src="__uploads__/emoji/emo_27.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="生病" src="__uploads__/emoji/emo_28.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="太开心" src="__uploads__/emoji/emo_29.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="白眼" src="__uploads__/emoji/emo_30.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="右哼哼" src="__uploads__/emoji/emo_31.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="左哼哼" src="__uploads__/emoji/emo_32.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="嘘" src="__uploads__/emoji/emo_33.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="衰" src="__uploads__/emoji/emo_34.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="委屈" src="__uploads__/emoji/emo_35.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="呕吐" src="__uploads__/emoji/emo_36.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="打哈欠" src="__uploads__/emoji/emo_37.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抱抱" src="__uploads__/emoji/emo_38.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="怒" src="__uploads__/emoji/emo_39.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="问号" src="__uploads__/emoji/emo_40.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="馋" src="__uploads__/emoji/emo_41.gif"/></a></li>
                                    <li><a href="javascript:;"  >
                                        <img title="拜拜" src="__uploads__/emoji/emo_42.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="思考" src="__uploads__/emoji/emo_43.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="汗" src="__uploads__/emoji/emo_44.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="打呼" src="__uploads__/emoji/emo_45.gif"/></a></li>
                                    <li><a href="javascript:;">
                                        <img  title="睡" src="__uploads__/emoji/emo_46.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="钱" src="__uploads__/emoji/emo_47.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="失望" src="__uploads__/emoji/emo_48.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="酷" src="__uploads__/emoji/emo_49.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="好色" src="__uploads__/emoji/emo_50.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="生气" src="__uploads__/emoji/emo_51.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="鼓掌" src="__uploads__/emoji/emo_52.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="晕" src="__uploads__/emoji/emo_53.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="悲伤" src="__uploads__/emoji/emo_54.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抓狂" src="__uploads__/emoji/emo_55.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="黑线" src="__uploads__/emoji/emo_56.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="阴险" src="__uploads__/emoji/emo_57.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="怒骂" src="__uploads__/emoji/emo_58.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="心" src="__uploads__/emoji/emo_59.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="伤心" src="__uploads__/emoji/emo_60.gif"/></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="msg-input">
                        <div class="input-box">
                            <textarea id="text_in" class="edit-ipt" style="overflow-y: auto; font-weight: normal; font-size: 14px; overflow-x: hidden; word-break: break-all; font-style: normal; outline: none;padding: 5px;border:none;border-radius: 10px;border: 1px solid #ddd;"
                                 contenteditable="true" hidefocus="true" tabindex="0"></textarea>
                        </div>
                         <div class="msg-toolbar-footer grey12" >
                            <a onclick="send()" class="layui-btn msg-send-btn">
                               发送
                            </a>
                            <a id="showinfo" class="showinfo">
                                <div style="height: 24px;border-left: 1px solid #FFF;margin-top: 8px;padding: 7px 15px">
                                    <img src="__image__/admin/B/up-menu.png" alt=""> 
                                </div>
                                <!-- <i class='triangle'  style="margin-top: 21px;"></i> -->
                            </a>
                        </div>
                    </div>
                    <div class="msg-toolbar" style="background: #fff;border: none;">
                        <a id="face_icon" onclick="faceon()"><img src="__image__/admin/B/smile.png" alt="表情" title="表情"></a>
                        <a>
                            <form id="picture" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <img src="__image__/admin/B/photo.png" alt="">
                                    <input type="file" name="upload" onchange="put()"/>
                                </div>
                            </form>
                        </a>
                        <a>
                            <form id="file" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <img src="__image__/admin/B/file.png" alt="">
                                    <input type="file" name="folder" onchange="putfile()"/>
                                </div>
                            </form>
                        </a>
                        {if $type == 'open'}
                        <a onclick="getvideo()"><img src="__image__/admin/B/blacklist.png" alt=""></a>
                        {/if}     
                        {if $atype == 'open'}
                        <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>
                        {/if}
                        <a href="javascript:getblack()"><img src="__image__/admin/B/blacklist.png" alt="移入黑名单" title="移入黑名单"></a>
                        <a onclick="getswitch()"><img src="__image__/admin/B/transfer.png" alt="客服转接" title="客服转接"></a>
                        <a onclick="gethistory()"><img src="__image__/admin/B/record.png" alt="历史记录" title="历史记录"></a>
                        <a onclick="toEvaluate()"><img src="__image__/admin/B/toEvaluate.png" alt="推送评价" title="推送评价"></a>
                        <a onmouseover="info()" id="paste" style="position:absolute; right:134px;bottom:30px;width: 120px;"><img src="__image__/admin/B/screen.png" alt=""> 怎样发截图？</a>
                    </div>
                </div>
            </div>

             <!-- 浮层 -->
                <div id='fuceng' class="hide" style="background: #f7f7f7;height: 68px;position: absolute;bottom: 114px;right: 20px;z-index: 9999;border-radius: 8px;padding: 8px 0">
                  <ul style="width: 100%;height: 60px;">
                      <li class="fuceng-li" onclick="choosetype(this)" name='1'><img id='type1' class="layui-icon selecte-icon" src="__image__/admin/B/selected.png" alt=""><span>按Enter键发送消息，Ctrl+Enter换行</span></li>
                      <li class="fuceng-li selected-li" onclick="choosetype(this)" name='2'><img id='type2' class="layui-icon selecte-icon" src="__image__/admin/B/selected.png" alt=""><span>按Ctrl+Enter键发送消息，Enter换行</span></li>
                  </ul>
                </div>
        </section>

        <style>
            .fuceng-li {
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                position: relative;
                padding: 0 20px 0 44px;
            }

            .selected-li {
                background-color: #dddddd;
            }

            .selecte-icon {
                display: none;
                position: absolute;
                top: 9px;
                left: 20px;
                height: 12px;
                width: 12px;
            }

            .selected-li .selecte-icon {
                display: block;
            }

            #quit_reply .add-reply,#quit_reply .manager-reply {
                position: absolute;
                bottom: 62px;
                left: 50%;
                height: 40px;
                width: 33%;
                line-height: 40px;
                text-align: center;
                border-radius: 20px;
                border: 1px solid #7571f9;
                color: #7571f9;
                cursor: pointer;
            }

            #quit_reply .add-reply {
                margin-left: -41%;
            }

            #quit_reply .manager-reply {
                margin-right: 8%;
            }

            #quit_reply .reply-text {
                display: inline-block;
                padding: 10px 16px;
                background-color: #f5faff;
                border-radius: 8px;
                color: #555555;
                font-size: 14px;
                margin-bottom: 16px;
                width: 90%;
            }

            #quit_reply .reply-about {
                position: absolute;
                top: 45px;
                left: 40px;
                padding: 10px 16px;
                background-color: black;
                color: #fff;
                z-index: 99;
                border-radius: 5px;
                display: none;
            }

            #quit_reply .reply-border {
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 6px solid black;
                position: absolute;
                top: 40px;
                left: 50px;
                z-index: 99;
                display: none;
            }

            #quit_reply .reply-text:hover+.reply-border,#quit_reply .reply-text:hover+.reply-border+.reply-about {
                display: block;
            }
           
            .del-reply {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-top: 10px;
                margin-right: 10px;
            }

            .del-reply img {
                height: 20px;
                width: 20px;
            }

            .reply-form .layui-form-item {
                padding: 0 24px;
                width: 100%;
            }

            .reply-form .layui-form-label {
                font-size: 13px;
                color: #999999;
                text-align: left;
                padding: 0;
                height: auto;
                line-height: normal;
            }

            .reply-form .layui-input-block {
                margin: 0;
            }

            .reply-form .layui-input,.reply-form .layui-textarea {
                margin-top: 4px;
                border-radius: 8px;
                border: 1px solid #f7f7f7;
                padding: 16px;
                font-size: 13px;
                color: #555555;
            }

            #black_list .visiter {
                margin-top: -16px;
                margin-left: -16px;
            }

            .push-evaluation {
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border-radius: 15px;
                background-color: #F5FAFF;
                color: #50ACFF;
                margin: 0 auto;
            }
             .mysize{
               display:none;
             }
        </style>

        <section class="chatinfo">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0px;height: 100%;background-color: #fff;position: relative;">
                <ul class="layui-tab-title" style="height: 50px;border-bottom: 0;background-color: #f7f7f7">
                    <li class="layui-this" style="width: 33%;height: 50px;line-height: 50px;color: #555555">访客信息<span class="line"></span></li>
                    <li style="width: 33%;height: 50px;line-height: 50px;color: #555555">黑名单<span class="line"></span></li>
                    <li style="width: 34%;height: 50px;line-height: 50px;color: #555555">快捷回复<span class="line"></span></li>
                </ul>

                <div class="layui-tab-content" style="padding: 16px;height: 100%">
                    <div class="layui-tab-item layui-show">
                        <div class="" style="margin:24px;color: #555555;">

                            <div style="font-size: 16px;">访问信息</div>

                            <div style="margin-top: 12px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" alt="来自url" title="来自url" src="__image__/admin/B/from-info.png"><span class="record"></span>
                            </div>
                            <div style="margin-top: 14px; font-size: 12px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" alt="地区" title="地区" src="__image__/admin/B/place-info.png"><span class="ipdizhi"></span> 【<span class="iparea"></span>】
                            </div>

                            <div style="margin-top: 14px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" src="__image__/admin/B/status-info.png" alt="状态" title="状态"><span
                                        id="v_state" style="font-size: 10px;"></span></i>
                            </div>

                            <div style="margin-top: 14px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" src="__image__/admin/B/time.png" alt="上次登录时间" title="上次登录时间"><span
                                    id="last_login_time" style="font-size: 10px;"></span></i>
                            </div>

                            <div style="margin-top: 14px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" src="__image__/admin/B/times.png" alt="登录次数" title="登录次数"><span
                                    id="login_times" style="font-size: 10px;"></span></i>
                            </div>

                            <div style="margin-top: 14px;">
                                <img style="height: 20px;width: 20px;margin-right: 10px;" src="__image__/admin/B/name.png" alt="访客姓名" title="访客姓名"><span
                                    id="name" style="font-size: 10px;"></span></i>
                            </div>

                             <div style="margin-top: 14px;">
                                 <img style="height: 20px;width: 20px;margin-right: 10px;" src="__image__/admin/B/tel.png" alt="访客电话" title="访客电话"><span
                                     id="tel" style="font-size: 10px;"></span></i>
                            </div>
                           
                           

                            <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-user am-icon-xs" title="备注名"></i></span>
                               <input type="text" id="visiter_name" placeholder="备注信息，填写后自动保存" class="layui-input" style="position: absolute;right:0;top:0;width: 93%;height: 20px;font-size:10px" onblur="saveinfo()" />
                            </div>

                           <div style="margin-top: 20px;position: relative; display:none;">
                              <span style="font-size: 18px;"><i class="am-icon-phone am-icon-xs" title="访客联系方式"></i></span>
                               <textarea  id="connect"  placeholder="备注信息，填写后自动保存" class="layui-input" style="position: absolute;right:0;top:0;width: 93%;height: 20px;font-size:10px" onblur="saveinfo()"></textarea>
                           </div>
                           
                             <div style="margin-top: 20px;position: relative; display:none;">
                               <span style="font-size: 14px;"><i class="am-icon-comment am-icon-xs" title="访客备注"></i></span>
                               <textarea  id="comment" placeholder="备注信息，填写后自动保存" class="layui-input" style="position: absolute;right:0;top:0;width: 93%;height: 60px;font-size:10px" onblur="saveinfo()"></textarea>
                            </div> 
                           
                           
                        </div>
                    </div>

                    <div class="layui-tab-item" id='black_list' style="width: 100%;overflow-y: auto;padding: 0px;">
                    </div>

                    <div class="layui-tab-item" id='word_list' style="width: 100%;height: 100%; overflow-y: auto;">
                        <div id='quit_reply' >
                            
                                            
                        </div>

                       
                    </div>

                </div>
            </div>

        </section>

    </div>

</div>

<script type="text/javascript">

    function toEvaluate() {
        var data = $.cookie("cu_com");
        var jsondata = $.parseJSON(data);
        $.ajax({
            url:CGWL_ROOT_URL + '/admin/set/pushComment',
            type:'post',
            data:{visiter_id:jsondata.visiter_id},
            success:function(res){
                if(res.code == 0){
                    var str = '';
                    str += "<div class='push-evaluation'>已推送评价</div>"
                    $(".conversation").append(str);
                    var div = document.getElementById("wrap");
                    div.scrollTop = div.scrollHeight;
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });
    }
    
var display_offline_user = 0;
 
    function saveinfo(){
        var data = $.cookie("cu_com");
        var jsondata = $.parseJSON(data);
        var visiter_name=$("#visiter_name").val();
        var connects=$('#connect').val();
        var comments=$("#comment").val();
        $.ajax({
          url:CGWL_ROOT_URL+'/admin/manager/saveVisiter',
          type:'post',
          data:{visiter_name:visiter_name,connect:connects,comment:comments,visiter_id:jsondata.visiter_id},
          success:function(res){
            if(res.code == 0){
                getchat();
                $('#v'+jsondata.channel+' .c_name').html(visiter_name);
            }
          }
        });
        
    }
    
    function show(obj){
        
        $(obj).find('i').removeClass("mysize");
    }

    function hide(obj){
        $(obj).find('i').addClass("mysize");
    }
    
 
    function show(){
        let text = $('.manager-reply').text();
        if(text == '管理快捷回复') {
            $('.manager-reply').text('退出管理')
        }else {
            $('.manager-reply').text('管理快捷回复')
        }
        $('.del-reply').toggle();
    }

    function clearList() {
        layer.open({
            type: 1,
            area: ['360px', '180'],
            title:'',
            content: '<div style="text-align:center;margin: 50px 0 30px;font-size:14px;">确认清空当前会话列表？</div>',
            btn: ['确定', '取消'],
            yes:function(res){
                  $.ajax({
                    url:CGWL_ROOT_URL+"/admin/set/clear",
                    type: "post",
                    data: {
                        id: "{$arr['service_id']}"
                    },
                    success: function (res) {
                        if (res.code ==0) {
                            layer.msg(res.msg,{icon:2,offset:'20px'});
                            layer.closeAll();
                            $('.clear-btn').hide();
                            location.reload();
                        }
                    }
                });
            }
        });
    }


    function addreply(){
        $('.del-reply').hide();
        $('.manager-reply').text('管理快捷回复')
      var html='<form class="layui-form reply-form" style="margin-top:20px;">';
          html+='<div class="layui-form-item"><label class="layui-form-label">标签</label>';
          html+='<div class="layui-input-block"><input id="tag" type="text" class="layui-input" style="width:552px" /></div></div>';
          html+='<div class="layui-form-item layui-form-text"><label class="layui-form-label">快捷用语</label>';
          html+='<div class="layui-input-block"><textarea id="word" name="content" class="layui-textarea" style="height:160px;width:552px"></textarea></div></div>'
          html+='</form>';

        layer.open({
            type:1,
            title:'添加快捷回复',
            area: ['600px', '415px'],
            content: html,
            btn: ['保存', '取消'],
            yes:function(res){
                  $.ajax({
                    url:CGWL_ROOT_URL+"/admin/manager/addword",
                    type: "post",
                    data: {word: $("#word").val(),tag:$("#tag").val()},
                    success: function (res) {
                        if (res.code ==0) {
                            layer.msg(res.msg, {icon: 1,time:2000,end:function () {
                              var tag=$("#tag").val();

                                 var str ='<div style="position:relative" id="reply'+res.data.id+'">';
                                 str+='<a class="del-reply" style="display:none;" href="javascript:close('+res.data.id+')"><img src="'+CGWL_ROOT_URL+'/assets/images/admin/B/delete.png"></img></a>';
                                 str+='<a class="reply-text" href="javascript:showon('+"'"+res.data.word+"'"+')">'+tag+'</a>';
                                 str+='<span class="reply-border"></span><span class="reply-about">'+res.data.word+'</span></div>';
                                 $("#quit_reply").prepend(str);
                                 layer.closeAll();
                            }});
                        }
                    }
                });
            }
           
        });
    }

    function close(id){
        $.ajax({
            url:CGWL_ROOT_URL+'/admin/manager/delreply',
            type:'post',
            data:{id:id},
            success:function(res){
                if(res.code ==0){
                    layer.msg(res.msg,{icon:1,end:function(){
                        
                         $("#reply"+id).remove();
                    }});
                }
            }
        })
    }


    function showon(str){
      
      $("#text_in").val(str);
      $("#text_in").focus();
    }



    function getOs() {
        var OsObject = "";

        if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
            return "Firefox";
        }
    }

 function showDiv(){
       
       $("#fuceng").toggleClass('hide');
    }


    $(function (){

    $("#showinfo").on('click',function(){

        showDiv();

        $(document).one("click", function () {
        
         $("#fuceng").addClass('hide');

        }); 
        event.stopPropagation();//阻止事件向上冒泡
    });

   $("#fuceng").click(function (event) 
    {
        event.stopPropagation();//阻止事件向上冒泡
        
    });
 });
   


   

    function choosetype(obj){
        $(obj).addClass('selected-li');
        $(obj).siblings().removeClass('selected-li')
        var type =$(obj).attr('name');
        $.cookie('type',type);
        $("#fuceng").addClass('hide');

        types();
    }


    //获取qq截图的图片
    (function () {
        var imgReader = function (item) {
            var blob = item.getAsFile(),
                reader = new FileReader();
            // 读取文件后将其显示在网页中
            reader.onload = function (e) {
                var msg = '';
                msg += "<img onclick='getbig(this)'  src='" + e.target.result + "'>";


                    var sdata = $.cookie('cu_com');
                    if (sdata) {
                        var json = $.parseJSON(sdata);
                        var img = json.avater;
                    }

                    var sid = $('#channel').text();
                    var se = $("#chatmsg_submit").attr('name');
                    var customer = $("#customer").text();
                    var pic = $("#se_avatar").attr('src');
                    var time;

                    if($.cookie("time") == ""){
                        var myDate = new Date();
                        let hours = myDate.getHours();
                        let minutes = myDate.getMinutes();
                        if(hours < 10 ) {
                            minutes = '0'+minutes.toString();
                        }
                        if(minutes < 10 ) {
                            minutes = '0'+minutes.toString();
                        }
                            time = hours+":"+minutes;
                        var timestamp = Date.parse(new Date());
                        $.cookie("time",timestamp/1000);

                    }else{

                        var timestamp = Date.parse(new Date());

                        var lasttime =$.cookie("time");
                        if((timestamp/1000 - lasttime) >30){
                            var myDate =new Date(timestamp);
                            let hours = myDate.getHours();
                            let minutes = myDate.getMinutes();
                            if(hours < 10 ) {
                                minutes = '0'+minutes.toString();
                            }
                            if(minutes < 10 ) {
                                minutes = '0'+minutes.toString();
                            }
                                time = hours+":"+minutes;
                        }else{
                            time ="";
                        }

                        $.cookie("time",timestamp/1000);

                    }
                    var str = '';
                    str += '<li class="chatmsg""><div class="showtime">' + time + '</div>';
                    str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                    str += "<div class='outer-right'><div class='service' style='padding:0;border-radius:0;max-height:100px'>";
                    str += "<pre>" + msg + "</pre>";
                    str += "</div></div>";
                    str += "</li>";

                    $(".conversation").append(str);
                    $("#text_in").empty();

                    var div = document.getElementById("wrap");
                    div.scrollTop = div.scrollHeight;
                    setTimeout(function(){
                        $('.chatmsg').css({
                            height: 'auto'
                        });
                    },0)
                    $.ajax({
                        url:CGWL_ROOT_URL+"/admin/set/chats",
                        type: "post",
                        data: {visiter_id:sid,content: msg, avatar: img}
                    });
                    
                
            };
            // 读取文件
            reader.readAsDataURL(blob);
        };
        document.getElementById('text_in').addEventListener('paste', function (e) {
            // 添加到事件对象中的访问系统剪贴板的接口
            var clipboardData = e.clipboardData,
                i = 0,
                items, item, types;

            if (clipboardData) {
                items = clipboardData.items;
                if (!items) {
                    return;
                }
                item = items[0];
                // 保存在剪贴板中的数据类型
                types = clipboardData.types || [];
                for (; i < types.length; i++) {
                    if (types[i] === 'Files') {
                        item = items[i];
                        break;
                    }
                }
                // 判断是否为图片数据
                if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                    imgReader(item);
                }
            }
        });
    })();

  
    // 视频通话
    var getvideo =function(){

        var sid = $('#channel').text();
        var pic = $("#se_avatar").attr('src');

        var times = (new Date()).valueOf();
        var se = $("#se").text();
        //申请
        $.ajax({
            url:CGWL_ROOT_URL+'/admin/set/apply',
            type: 'post',
            data: {id: sid,channel: times,avatar:pic,name:se},
            success:function(res){
                if(res.code !=0){
                    layer.msg(res.msg,{icon:2,offset:'20px'});
                }else{
                   
                    var str='';
                    str+='<div class="videos">';
                    str+='<video id="localVideo" autoplay></video>';
                    str+='<video id="remoteVideo" autoplay class="hidden"></video></div>';


                      layer.open({
                          type:1
                          ,title: '视频'
                          ,shade:0
                          ,closeBtn:1
                          ,area: ['440px', '378px']
                          ,content:str
                          ,end:function(){

                           
                             mediaStreamTrack.getTracks().forEach(function (track) {
                                track.stop();
                            });
            
                          }
                    });
                      
                      
                     try{
                         connenctVide(times);
                     }catch(e){
                         console.log(e);
                         return;
                     }

                }
            }

        });
        
      
    }




    //
    var gethistory=function(){

       var sdata = $.cookie("cu_com");
       var jsondata = $.parseJSON(sdata);
       var vid =jsondata.visiter_id;
        layer.open({
            type: 2,
            title: '该用户所有历史消息',
            area: ['600px', '500px'],
            content: CGWL_ROOT_URL+'/admin/index/history?visiter_id='+vid
        });

    }

    var getaudio =function(){

          //音频先加载
                var audio_context;
                var recorder;
                var wavBlob;
                //创建音频
                try {
                    // webkit shim
                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
                    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
                    window.URL = window.URL || window.webkitURL;

                    audio_context = new AudioContext;

                    if (!navigator.getUserMedia) {
                        console.log('语音创建失败');
                    }
                    ;
                } catch (e) {
                    console.log(e);
                    return;
                }
                navigator.getUserMedia({audio: true}, function (stream) {
                    var input = audio_context.createMediaStreamSource(stream);
                    recorder = new Recorder(input);

                    var falg = window.location.protocol;
                    if (falg == 'https:') {
                        recorder && recorder.record();

                        //示范一个公告层
                        layui.use(['jquery', 'layer'], function () {
                            var layer = layui.layer;

                            layer.msg('录音中...', {
                                icon: 16
                                , shade: 0.01
                                , skin: 'layui-layer-lan'
                                , time: 0 //20s后自动关闭
                                , btn: ['发送', '取消']
                                , yes: function (index, layero) {
                                    //按钮【按钮一】的回调
                                    recorder && recorder.stop();
                                    recorder && recorder.exportWAV(function (blob) {
                                        wavBlob = blob;
                                        var fd = new FormData();
                                        var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                        fd.append('wavName', wavName);
                                        fd.append('file', wavBlob);

                                        var xhr = new XMLHttpRequest();
                                        xhr.onreadystatechange = function () {
                                            if (xhr.readyState == 4 && xhr.status == 200) {
                                                jsonObject = JSON.parse(xhr.responseText);

                                                voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="'+jsonObject.data.src+'"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';

                                                    var sid = $('#channel').text();
                                                    var pic = $("#se_avatar").attr('src');
                                                    var time;

                                                    var sdata = $.cookie('cu_com');

                                                    if (sdata) {
                                                        var json = $.parseJSON(sdata);
                                                        var img = json.avater;

                                                    }

                                                    if($.cookie("time") == ""){
                                                        var myDate = new Date();
                                                        let hours = myDate.getHours();
                                                        let minutes = myDate.getMinutes();
                                                        if(hours < 10 ) {
                                                            minutes = '0'+minutes.toString();
                                                        }
                                                        if(minutes < 10 ) {
                                                            minutes = '0'+minutes.toString();
                                                        }
                                                            time = hours+":"+minutes;
                                                        var timestamp = Date.parse(new Date());
                                                        $.cookie("time",timestamp/1000);

                                                    }else{

                                                        var timestamp = Date.parse(new Date());

                                                        var lasttime =$.cookie("time");
                                                        if((timestamp/1000 - lasttime) >30){
                                                            var myDate =new Date(timestamp*1000);
                                                            let hours = myDate.getHours();
                                                            let minutes = myDate.getMinutes();
                                                            if(hours < 10 ) {
                                                                minutes = '0'+minutes.toString();
                                                            }
                                                            if(minutes < 10 ) {
                                                                minutes = '0'+minutes.toString();
                                                            }
                                                                time = hours+":"+minutes;
                                                        }else{
                                                            time ="";
                                                        }

                                                        $.cookie("time",timestamp/1000);
                                                    }
                                                var str = '';
                                                    str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                                    str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                                    str += "<div class='outer-right'><div class='service'>";
                                                    str += "<pre>" +  voicemessage + "</pre>";
                                                    str += "</div></div>";
                                                    str += "</li>";

                                                    $(".conversation").append(str);
                                                    $("#text_in").empty();

                                                    var div = document.getElementById("wrap");
                                                    div.scrollTop = div.scrollHeight;
                                                    $(".chatmsg").css({
                                                        height: 'auto'
                                                    });
                                                    $.ajax({
                                                        url:CGWL_ROOT_URL+"/admin/set/chats",
                                                        type: "post",
                                                        data: {visiter_id:sid,content:  voicemessage, avatar: img}
                                                    });
                                            }
                                        };
                                        xhr.open('POST', '/admin/event/uploadVoice');
                                        xhr.send(fd);
                                    });
                                    recorder.clear();
                                    layer.close(index);
                                }
                                , btn2: function (index, layero) {
                                    //按钮【按钮二】的回调
                                    recorder && recorder.stop();
                                    recorder.clear();
                                    audio_context.close();
                                    layer.close(index);
                                }
                            });

                        });
                    } else {
                        
                            layer.msg('音频输入只支持https协议！');
                        
                    }


                }, function (e) {
                     layer.msg(e);
                });


    }

var getstate =function(obj){
       
       var c=obj.children[0];
 
       var state=$(obj).attr('data');
   
       if(state == 'play'){
         c.play();
         $(obj).attr('data','pause');
         $(obj).find('i').html("&#xe651;");
       
       }else if(state == 'pause'){
          c.pause();
         $(obj).attr('data','play');
          $(obj).find('i').html("&#xe652;");
       }

        c.addEventListener('ended', function () {  
         $(obj).attr('data','play');
         $(obj).find('i').html("&#xe652;");
        
       }, false);
    }

    var getswitch =function(){

    var sdata = $.cookie("cu_com");
    var jsondata = $.parseJSON(sdata);
    var sid = jsondata.visiter_id;

    var se = $("#se").text();

      layer.open({
            type: 2,
            title: '转接客服列表',
            area: ['400px', '420px'],
            shade: false,
            content: CGWL_ROOT_URL+'/admin/index/service?visiter_id='+sid+'&name='+se
        });
    }


  

</script>
<script type="text/javascript" src="__script__/admin/chat.js?v=1.3"></script>
{include file="public/footer"/}