// 客服的id
var kf_id = 0;
var kf_name = '';
// 是否点击显示表情的标志
var flag = 1;
// 发送锁  标识
var sendLock = 0;
// 是否显示默认的聊天记录
var commChat = 1;
// 两个时间段的消息相隔时间
var msg_time = 2;
var heartTime = 20 * 1000;

var lockReconnect = false; //避免重复连接

var socket;

// 连接服务器
if (config != undefined && config.socket != undefined) {
    showloading(true);
    var url = config.socket + ':' + config.port;
    createWebSocket(url);
    lockInput();
}

function createWebSocket(url) {
    try {
        socket = new WebSocket(url);
        eventHandle();
    } catch (e) {
        reconnect(url);
    }
}

function reconnect(url) {
    if (lockReconnect) return;
    lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    setTimeout(function () {
        console.log('重连..')
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

function eventHandle() {
    // 监听关闭
    socket.onclose = function () {
        console.log('连接关闭')
        reconnect(url);
    };

    // 监听错误
    socket.onerror = function (err) {
        showSystem({ content: '连接失败' });
        document.getElementById('title').innerText = '连接失败';
    };

    // 建立连接
    socket.onopen = function (res) {
        console.log('连接成功');
        showloading(false);
        var login_data = '{"path":"api/userInit","param":{"type":"user","kf_type":2,"user_id":"' +
            config.uid + '","user_name":"' + config.name + '","avatar_url":"' +
            config.avatar + '","group_id":"' + config.group + '","data":"" },"access_token":"123456"}'
        socket.send(login_data);
        //心跳检测重置
        heartCheck.reset().start();
        // 解锁
        unlockInput();
    };

    // 监听消息
    socket.onmessage = function (res) {
        var data = eval("(" + res.data + ")");
        switch (data['message_type']) {
            // 分配到客服
            case 'connect':
                kf_id = data.data.kf_id;
                kf_name = data.data.kf_name;
                var is_online = data.data.is_online == 2 ? "<font style='font-size:8px'>(离线)</font>" : "<font style='font-size:8px; display: none;'>(离线)</font>";
                showSystem({ content: '客服 ' + data.data.kf_name + ' 为您服务' });
                document.getElementById('title').innerHTML = '与 ' + kf_name + ' 交流中' + is_online;
                if (1 == commChat) {
                    showChatLog();
                }
                unlockInput();
                break;
            // 排队等待
            case 'wait':
                lockInput();
                document.getElementById('title').innerHTML = '请稍后再来';
                showSystem(data.data);
                break;
            // 监测聊天数据
            case 'text':
                var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
                if (chekc_msg) return;
                showMsg(data.data, data.data.content);
                break;
            case 'img':
                var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
                if (chekc_msg) return;
                var content = data.data.content
                showMsg(data.data, content, 'img');
                break;
            // 转接
            case 'relinkMessage':
                commChat = 2;
                document.getElementById('title').innerHTML = '正在转接中...';
                break;
            // 客服下线
            case 'kf_offline':
                $('#title').children('font').show();
                break;
            // 客服上线
            case 'kf_online':
                // 添加离线
                $('#title').children('font').hide();
                break;
        }
        heartCheck.reset().start();
    };
}

// 图片 文件上传
layui.use(['upload'], function () {
    var upload = layui.upload;

    // 执行实例
    var uploadInstImg = upload.render({
        elem: '#up-image' // 绑定元素
        , accept: 'images'
        , exts: 'jpg|jpeg|png|gif'
        , url: '/index/upload/uploadImg' // 上传接口
        , done: function (res) {

            sendMsg('img[' + res.data.src + ']');
        }
        , error: function () {
            // 请求异常回调
        }
    });

    $('.layui-upload-file').hide();
});

$(function () {

    // 监听输入改变发送按钮
    $("#msg").bind('input porpertychange', function () {

        if ($("#msg").val().length > 0) {
            $(".layim-send").removeClass('layui-disabled');
        } else {
            $(".layim-send").addClass('layui-disabled');
        }
    });

    // 点击发送
    $("#send").click(function () {
        sendMsg();
    });

    // 点击表情
    $('#up-face').click(function (e) {
        e.stopPropagation();
        if (1 == flag) {
            showFaces();
            $('#face-box').show();
            flag = 2;
        } else {
            $('#face-box').hide();
            flag = 1;
        }
    });

    // 监听点击旁边关闭表情
    document.addEventListener("click", function () {
        if (2 == flag) {
            document.getElementById('face-box').style.display = 'none';
            flag = 1;
        }
    });
});

// 发送消息
function sendMsg(sendMsg) {
    if (1 == sendLock) {
        return false;
    }

    var msg = (typeof (sendMsg) == 'undefined') ? $('#msg').val() : sendMsg;
    if ('' == msg) {
        return false;
    }

    var msg_id = uuid();
    var _html = $("#chat-list").html();
    var time = getTime();
    var content = replaceContent(msg);
    let content_type = '';
    // 检测是否显示时间
    var next_time = $("#chat-list").find('span').last().text();
    var check_time = checkMegTime(next_time, time, msg_time);
    if (check_time) {
        _html += '<li class="layim-chat-system"><span>' + time + '</span></li>';
    }
    _html += '<li class="layim-chat-li layim-chat-mine">';
    _html += '<div class="layim-chat-user">';
    _html += '<img src="' + config.avatar + '"><cite>我</cite></div>';
    _html += '<div class="layim-chat-text">' + content + ' </div></li>';

    $('#chat-list').html(_html);
    if (msg.indexOf('img[') != -1) {
        content_type = 'img'
    }
    msg = getCutout(msg);
    // 发送消息
    socket.send(JSON.stringify({
        path: "api/chat",
        param: {
            "type": "user",
            "to_id": kf_id,
            "to_name": kf_name,
            "group_id": "1",
            "content": msg,
            "content_type": content_type,
            "msg_id": msg_id,
            "from_name": config.name,
            "from_id": config.user_id,
            "from_avatar": config.avatar,
            "data": ""
        },
        "access_token": "123456",
    }));

    // 储存我发出的信息
    var key = kf_id + '-' + config.uid;
    if (typeof (Storage) !== "undefined") {
        var localMsg = getCache(key);
        if (localMsg == null || localMsg.length == 0) {
            localMsg = [];
        }
        localMsg.push({ type: 'mine', name: '我', time: time, content: content, avatar: config.avatar });

        cacheChat({ key: key, data: localMsg });
    }

    $('#msg').val('');
    $(".layim-send").addClass('layui-disabled');

    // 滚动条自动定位到最底端
    wordBottom();
}

// 展示发送来的消息
function showMsg(info, content, img, flag) {
    var _html = $("#chat-list").html();
    let index = content.indexOf('[')
    if (index !== -1) {
        content = content.slice(0, index) + 'face' + content.slice(index)
    }
    content = replaceContent(content);

    // 检测是否显示时间
    var next_time = $("#chat-list").find('span').last().text();
    var check_time = checkMegTime(next_time, info.time, msg_time);
    if (check_time) {
        _html += `<li class="layim-chat-system" id='${info.msg_id}'><span>` + info.time + `</span></li>`;
    }
    // _html += '<li class="layim-chat-system"><span>' + info.time + '</span></li>';
    _html += '<li class="layim-chat-li">';
    _html += '<div class="layim-chat-user">';
    _html += '<img src="' + info.avatar + '"><cite>' + info.name + '</cite></div>';
    if (img == 'img') {
        var type = 'img'
        _html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="' + content + '" width="100px" height="100px"></div></li>';
    } else {
        var type = 'text'
        _html += '<div class="layim-chat-text">' + content + '</div></li>';
    }

    $('#chat-list').html(_html);

    // 滚动条自动定位到最底端
    wordBottom();

    // 储存我收到的信息
    var key = kf_id + '-' + config.uid;
    if (typeof (Storage) !== "undefined" && typeof (flag) == "undefined") {
        var localMsg = getCache(key);
        if (localMsg == null || localMsg.length == 0) {
            localMsg = [];
        }
        localMsg.push({ type: 'other', name: info.name, time: info.time, content: content, avatar: info.avatar, message_type: type });

        cacheChat({ key: key, data: localMsg });
    }
}


// 缓存聊天数据 [本地存储策略]
function cacheChat(obj) {
    if (typeof (Storage) !== "undefined") {
        localStorage.setItem(obj.key, JSON.stringify(obj.data));
    }
}

// 从本地缓存中，拿出数据
function getCache(key) {
    return JSON.parse(localStorage.getItem(key));
}

// 对话框定位到最底端
function wordBottom() {
    // 滚动条自动定位到最底端
    var box = $(".layim-chat-main");
    box.scrollTop(box[0].scrollHeight);
}

// 锁住输入框
function lockInput() {
    sendLock = 1;
    document.getElementById('msg').setAttribute('readonly', 'readonly');
}

// 解锁输入框
function unlockInput() {
    sendLock = 0;
    document.getElementById('msg').removeAttribute('readonly');
}

// 展示表情数据
function showFaces() {
    var alt = getFacesIcon();
    var _html = '<ul class="layui-layim-face" style="position: absolute;bottom: 0;height: 100px;background-color: white;">'
    var len = alt.length;
    for (var index = 0; index < len; index++) {
        _html += '<li title="' + alt[index] + '" onclick="checkFace(this)"><img src="/static/customer/images/face/' + index + '.png" /></li>';
    }
    _html += '</ul>';

    document.getElementById('face-box').innerHTML = _html;
}

// 选择表情
function checkFace(obj) {
    var msg = document.getElementById('msg').value;
    document.getElementById('msg').value = msg + ' face' + obj.title + ' ';
    document.getElementById('face-box').style.display = 'none';
    $(".layim-send").removeClass('layui-disabled');
    flag = 1;
}

// 系统消息
function showSystem(info) {

    $("#chat-list").append('<li class="layim-chat-system"><span>' + info.content + '</span></li>');
}

// 展示本地聊天缓存
function showChatLog() {

    var chatLog = getCache(kf_id + '-' + config.uid);
    if (chatLog == null || chatLog.length == 0) {
        return;
    }

    var _html = '';
    var len = chatLog.length;
    for (var i = 0; i < len; i++) {
        var item = chatLog[i];
        if ('mine' == item.type) {
            // 检测上次聊天时间
            var check_time = false;
            if (i > 1) {
                var check_time = checkMegTime(chatLog[i - 1].time, item.time, msg_time);
            }

            if (check_time) {
                _html += '<li class="layim-chat-system"><span>' + item.time + '</span></li>';
            }
            _html += '<li class="layim-chat-li layim-chat-mine">';
            _html += '<div class="layim-chat-user">';
            _html += '<img src="' + item.avatar + '"><cite>' + item.name + '</cite></div>';
            _html += '<div class="layim-chat-text">' + item.content + ' </div></li>';

        } else if ('other' == item.type) {

            _html += '<li class="layim-chat-system"><span>' + item.time + '</span></li>';
            _html += '<li class="layim-chat-li">';
            _html += '<div class="layim-chat-user">';
            _html += '<img src="' + item.avatar + '"><cite>' + item.name + '</cite></div>';
            if (item.message_type == 'img') {
                _html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="' + item.content + '" width="100px" height="100px"></div></li>';
            } else {
                _html += '<div class="layim-chat-text">' + item.content + '</div></li>';
            }
        }
    }

    document.getElementById('chat-list').innerHTML = _html;

    // 滚动条自动定位到最底端

    wordBottom();
}

// 退出
function loginOut() {
    window.history.go(-1);
}

/**
 * 检测消息是否重复
 * @param {*} uid 用户id
 * @param {*} msg_id 消息id
 */
function checkMsgIsRepeat(msg_id) {
    if (!msg_id) return false;
    var dom = $('chat-list').find('#' + msg_id);
    if (!dom || dom.length == 0) return false;
    return true;
}

// 加载loading
function showloading(t) {
    if (t) { //如果是true则显示loading
        loading = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
    } else { //如果是false则关闭loading
        layer.closeAll('loading');
    }
}

//心跳检测
var heartCheck = {
    timeout: heartTime,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function () {
        var self = this;
        this.timeoutObj = setTimeout(function () {
            //发送心跳
            socket.send(JSON.stringify({
                path: 'ping',
                param: { 'type': 'user' }
            }));
            self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置，说明后端主动断开了
                reconnect(wsUrl);
            }, self.timeout);
        }, this.timeout);
    }
};

// 显示大图
function showBigPic(obj) {
    // console.log(obj);
    var src = obj.src;
    layer.photos({
        photos: {
            data: [{
                "alt": "大图模式",
                "src": src
            }]
        },
        shade: 0.5,
        closeBtn: 2,
        anim: 0,
        resize: false,
        success: function (layero, index) {

        }
    });
}