$(function(){
    //Socket.IO 连接
    var socket = io.connect('http://'+document.domain+':9010',{
        "transports":['websocket', 'polling']
    });
    var uuid = '';

    function insert_client_html(msg){
        var time = dateFormat();
        if(msg.time){
            time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.time));
        }
        if(!msg.chat_type){
            msg.chat_type = 'text';
        }
        var tpl = '<div class="msg-box">'+
                    '<div  class="msg-client">'+
                    '<div  class="date">' + time + ' 我' + '</div>';

        if(msg.chat_type == "text"){
            tpl += '<div class="bubble rich-text-bubble">'+
                        '<span class="arrow"></span>'+
                        '<div class="text">' + msg.content + '</div>'+
                        '<span class="status icon"></span>'+
                    '</div>';
        }else if(msg.chat_type == "image"){
            tpl += ' <div class="msg-client-img">' +
                '       <a href="'+ msg.image +'"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">'+
                '       </a>' +
                '    </div>';
        }

        tpl += '</div>'+
                '</div>';
        $(".msg-container").append(tpl);
    }

    function insert_agent_html(msg){
        var time = dateFormat();
        if(msg.time){
            time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.time));
        }
        if(!msg.chat_type){
            msg.chat_type = 'text';
        }
        var tpl = '<div class="msg-box">'+
                        '<div class="msg-agent">'+
                        '<div class="agent-avatar">'+
                            '<img src="https://s3-qcloud.meiqia.com/pics.meiqia.bucket/avatars/20170929/972a7c64426ed82da1de67ac3f16bd07.png">'+ 
                        '</div>'+
                        '<div class="date">' + time + ' 客服' + '</div>';

        if(msg.chat_type == "text"){
            tpl += '<div class="bubble rich-text-bubble">'+
                        '<span class="arrow-bg"></span>'+
                        '<span class="arrow"></span>'+
                        '<div class="text">' + msg.content + '</div>'+
                    '</div>';
        }else if(msg.chat_type == "image"){
            tpl += ' <div class="msg-agent-img">' +
                '       <a href="'+ msg.image +'"target="_blank">' +
                '           <img src="' + msg.image + '" alt="photo">'+
                '       </a>' +
                '    </div>';
        }
        tpl += '</div>'+
            '</div>';
        $(".msg-container").append(tpl);
    }

    //聊天窗口自动滚到底
    function scrollToBottom() {
        var div = document.getElementById('msg-container');
        div.scrollTop = div.scrollHeight;
    }

    //获取最新的五条数据
    function get_message(uid) {
        $.get('/message?uid='+uid,function (data) {
            if(data.code == 200){
                data.data.reverse().forEach(function (msg) {
                    if(msg.from_uid == uid){
                        insert_client_html(msg);
                    }else{
                        insert_agent_html(msg);
                    }

                    scrollToBottom();
                });
            }
        });
    }


    const gongHao = 10001;
    $("#btnSend").click(function(){
        var msg = $("#textarea").val();
        if(msg){
            var msg_sender = {
                "type":'private',
                "uid":gongHao,
                "content":msg,
                "from_uid":uuid,
                "chat_type":'text'
            };
            socket.emit('message', msg_sender);
            insert_client_html(msg_sender);
            scrollToBottom();
            $("#textarea").val('');
        }
    });

    $(".picture-upload").click(function () {
        var uploader = Qiniu.uploader({
            runtimes: 'html5,flash,html4',      // 上传模式，依次退化
            browse_button: 'pickfiles',         // 上传选择的点选按钮，必需
            uptoken_url: '/uptoken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
            get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
            domain: 'http://kefuimg.chinameyer.com/',     // bucket域名，下载资源时用到，必需
            container: 'btn-uploader',             // 上传区域DOM ID，默认是browser_button的父元素
            max_file_size: '10mb',             // 最大文件体积限制
            flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash，相对路径
            max_retries: 3,                     // 上传失败最大重试次数
            dragdrop: false,                     // 开启可拖曳上传
            drop_element: 'btn-uploader',          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
            chunk_size: '4mb',                  // 分块上传时，每块的体积
            auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
            unique_names: true,
            filters : {
                max_file_size : '10mb',
                prevent_duplicates: true,
                // Specify what files to browse for
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png,bmp"}, // 限定jpg,gif,png后缀上传
                ]
            },
            init: {
                'FilesAdded': function(up, files) {
                    plupload.each(files, function(file) {
                        // 文件添加进队列后，处理相关的事情
                    });
                },
                'BeforeUpload': function(up, file) {
                    // 每个文件上传前，处理相关的事情
                },
                'UploadProgress': function(up, file) {
                    // 每个文件上传时，处理相关的事情
                },
                'FileUploaded': function(up, file, info) {
                    // 查看简单反馈
                     var domain = up.getOption('domain');
                     var res = JSON.parse(info);
                     var sourceLink = domain +"/"+ res.key;

                    var msg_sender = {
                        "type":'private',
                        "uid":'chat-kefu-admin',
                        "content":'图片消息',
                        "from_uid":uuid,
                        "chat_type":'image',
                        "image":sourceLink
                    };
                    socket.emit('message', msg_sender);
                    insert_client_html(msg_sender);
                    scrollToBottom();


                },
                'Error': function(up, err, errTip) {
                    //上传出错时，处理相关的事情
                    $.toast("上传失败");
                },
                'UploadComplete': function() {
                    //队列文件处理完毕后，处理相关的事情
                }
            }
        });

    });

    $(".emoji-list li").click(function () {
        var content = $("#textarea").val();
        $("#textarea").val(content + " " +$(this).html()+ " " );
        $(".emoji-list").toggle();
    });

    $(".emoji-send").click(function () {
        $(".emoji-list").toggle();
    });

    //连接服务器
    socket.on('connect', function () {
        //uuid = 'chat'+ guid();
        let uuid_store_key = 'kf_c_uuid';
        uuid = localStorage.getItem(uuid_store_key);
        if(!uuid){
            uuid = (new Fingerprint()).get();
            localStorage.setItem(uuid_store_key,uuid);//save uuid to ls
        }
        console.log('连接成功...'+uuid);

        var ip = $("#keleyivisitorip").text();
        var msg = {
            "uid" : uuid,
            "ip" : ip,
            "gongHao":gongHao,
            type:'c'
        };
        socket.emit('login', msg);
        get_message(uuid);
    });

    // /* 后端推送来消息时
    //     msg:
    //         type 消息类型 image,text
    //         content 消息
    // */
    socket.on('message', function(msg){
        insert_agent_html(msg);
        scrollToBottom();
    });
    socket.on('log',function (msg) {
        console.log(msg);
    })


});