/**
 * 在线客服客户页
 *
 * @author: liqi <qi.li@yoho.cn>
 * @date: 2016/10/21
 */

'use strict';

var $ = require('yoho-jquery'),
    view = require('./view'),
    broswer = require('./broswer'),
    util = require('./utility'),
    send = require('./socket/send'),
    edit = require('./socket/edit'),
    ClipPaste = require('./clip-paste'),
    serviceApi = require('./service-api'),
    receive = require('./socket/receive'),
    socketChat = require('./socket/chat'),
    socketConf = require('./socket/config'),
    processInfo = require('./view').processInfo;

var allRTs,
    endTime,
    originConf,
    encryptedUid,
    socketConfCM,
    assetsPrefix,
    $html = $('html'),
    $window = $(window),
    $document = $(document),
    $msgList = $('.msg-list'),
    $msgEdit = $('.msg-edit'),
    $leaveMsg = $('#leaveMsg'),
    $close = $('.header .close'),
    $sendOrder = $('.send-order'),
    $sendImgInput = $('#sendImg'),
    $history = $('.about-his.has-his'),
    $msgArea = $('.msg-edit .msg-area'),
    $rightHeadTab = $('.right-head .tab'),
    $encryptedUid = $('input[name=encryptedUid]'),
    $assetsPrefix = $('input[name=assetsPrefix]'),
    $panelMainBody = $('.panel-main .main-body');

var tipTpl = require('hbs/service/tip.hbs'),
    csTpl = require('hbs/service/cs-msg.hbs'),
    cusTpl = require('hbs/service/cus-msg.hbs'),
    robotTpl = require('hbs/service/robot-msg.hbs');

require('bootstrap');
require('../common');
require('blueimp-file-upload/js/jquery.iframe-transport');
require('blueimp-file-upload/js/jquery.fileupload');
require('blueimp-file-upload/js/jquery.fileupload-process');
require('blueimp-file-upload/js/jquery.fileupload-validate');

allRTs = socketConf.recType;
encryptedUid = $encryptedUid.val();
assetsPrefix = $assetsPrefix.val();
socketConfCM = socketConf.conversationMessage;
socketConfCM.encryptedUid = encryptedUid;
processInfo.encryptedUid = encryptedUid;

// 原始配置信息用于重新连线
originConf = JSON.parse(JSON.stringify(socketConf));

// 页面初始化
function _loadPage() {

    // 客服评价
    var evalView = new view.Evaluate();

    /**
     * 添加新的消息
     */
    function msgAppend(dom) {
        $msgList.append(dom);
        $panelMainBody.scrollTop($panelMainBody[0].scrollHeight);
    }

    /**
     * 系统通知
     * @param tip 具体消息
     */
    function systemTip(tip) {
        var dom;

        dom = tipTpl({
            content: tip
        });

        // 添加消息
        msgAppend(dom);
    }

    /**
     * 断线重连提醒
     */
    function offlineTip(message) {
        var tip;

        if (!message) {
            tip = '您已断线，请重新<a class="red-tip reconnect">连线客服</a>';
            return systemTip(tip);
        }

        message.content = message.content +
            '<a class="red-tip reconnect">连线客服</a>';

        // 系统通知
        systemTip(message.content);
    }

    /**
     * 发送消息前的共通处理
     */
    function beforeSendMsg() {
        var $countdown = $('.countdown');

        $countdown.parents('.list-item').remove();
        util.removeBlinkAlert();
    }

    /**
     * 处理发送消息
     */
    function sendMessage() {
        var $area = $('.msg-area'),
            msg = $area.val().trim();

        beforeSendMsg();

        if (!msg) {
            return;
        }

        send.text(msg);
        $area.val('');
    }

    /**
     * 常见问题
     */
    function toggleAnswer(e) {
        var cTag = $(e.currentTarget),
            parent = cTag.parent(),
            next = cTag.next();

        next.length && next.toggle();
        next.length && parent.toggleClass('has-a');
    }

    /**
     * 正在进行人工会话
     */
    function csChatting(message) {
        // 系统通知
        systemTip(message.newContent);
    }

    /**
     * 留言
     */
    function leaveMsg() {
        var $lm = $('#leaveMsg'),
            $ta = $lm.find('textarea');

        $lm.find('.leave-msg-tip').addClass('hide');
        $ta.val('');
        $lm.modal({
            show: true
        });
    }

    /**
     * 成功进入在线客服
     * @param message 消息对象
     */
    function enterSuccess(message) {
        // 删除重新连线
        $msgList.find('.reconnect').parents('.push-tip').remove();

        // 系统通知
        systemTip(message.content);
        processInfo.savedEval = false;
        processInfo.manual = false;

        // 显示人工客服
        edit.setIcons({
            'manual-service': true
        });
    }

    /**
     * 人工链接
     * @param rec 接收对象
     * @private
     */
    function linkSuccess(rec) {

        var OUT_SERVICE = 0, // 0 没上班
            LINE_UP = 1, // 1 需要排队
            MANUAL_SERVICE = 2, // 2 接入人工
            ADMIN_MANUAL_SERVICE = 3; // 3 管理员分配

        var message = rec.chatMessage;
        var msgType = message.type;

        var dom,
            tipText;

        switch (msgType) {
            case OUT_SERVICE:
                tipText = receive.leaMsgTip(rec);
                dom = tipTpl({
                    content: tipText
                });
                break;

            case LINE_UP:
                tipText = receive.leaMsgTip(rec);
                dom = tipTpl({
                    content: tipText
                });

                // 隐藏人工
                edit.setIcons({
                    'manual-service': false
                });
                break;

            case MANUAL_SERVICE:
                tipText = message.content;
                dom = tipTpl({
                    content: tipText
                });

                // 接入人工客服需要评价
                processInfo.manual = true;
                processInfo.savedEval = false;

                // 显示评价&隐藏人工
                edit.setIcons({
                    emoji: true,
                    image: true,
                    evaluate: true,
                    'manual-service': false
                });
                break;

            case ADMIN_MANUAL_SERVICE:
                tipText = message.content;
                dom = tipTpl({
                    content: tipText
                });

                processInfo.manual = true;

                // 显示评价&隐藏人工
                edit.setIcons({
                    emoji: true,
                    image: true,
                    evaluate: true,
                    'manual-service': false
                });
                break;

            default:
                break;
        }

        // 添加消息
        msgAppend(dom);
    }

    /**
     * 人工接入队列中
     * @param message 内部消息对象
     */
    function inQueue(message) {
        systemTip(message.content);
    }

    /**
     * 处理客户消息
     * @private
     */
    function handleCusMsg(rec, msgType, message) {
        var dom,
            image;

        // 图片添加标签
        if (msgType === 2) {
            dom = cusTpl({
                userHead: rec.userHead,
                userName: rec.userName,
                sendTimeShort: rec.sendTimeShort,
                newContent: message.newContent
            });

            image = new Image();
            image.src = message.content;
            image.onload = function() {
                msgAppend(dom);
            };
        } else if (msgType === 1 || msgType === 10) {
            dom = cusTpl({
                userHead: rec.userHead,
                userName: rec.userName,
                sendTimeShort: rec.sendTimeShort,
                newContent: message.newContent
            });
            msgAppend(dom);
        }
    }

    /**
     * 链接终端倒计时
     * @private
     */
    function breakCountdown(message) {
        var dom,
            tip;

        tip = message.content +
            '<span class="countdown"></span>';

        dom = tipTpl({
            content: tip
        });

        // 消息添加
        msgAppend(dom);
    }

    /**
     * 处理客服消息
     * @private
     */
    function handleCsMsg(rec, msgType, message) {
        var dom,
            image;

        if (msgType === 2) {
            dom = csTpl({
                csHead: rec.csHead,
                csName: rec.csName,
                sendTimeShort: rec.sendTimeShort,
                newContent: message.newContent
            });

            image = new Image();
            image.src = message.content;
            image.onload = function() {
                msgAppend(dom);
            };
        } else if (msgType === 1 || msgType === 10) {
            dom = csTpl({
                csHead: rec.csHead,
                csName: rec.csName,
                sendTimeShort: rec.sendTimeShort,
                newContent: message.newContent
            });

            msgAppend(dom);
        }
    }

    /**
     * 处理收到消息
     */
    function getMessage(rec) {
        var dom,
            recType = rec.type,
            message = rec.chatMessage,
            msgType = message ? message.type : -1,
            isHidden = broswer.tabIsHidden(),
            allTypes = socketConf.recType;

        // 提醒
        isHidden && util.addBlinkAlert();

        // 预处理
        receive.preProcess(rec);

        switch (recType) {
            case allTypes.ENTER:
                enterSuccess(message);
                break;

            case allTypes.LINK_SUCCESS:
                linkSuccess(rec);
                break;

            case allTypes.IN_QUNEUE:
                inQueue(message);
                break;

            case allTypes.CU_SEND:
                handleCusMsg(rec, msgType, message);
                break;

            case allTypes.BREAK_TIME:
                breakCountdown(message);
                break;

            case allTypes.ROBOT_SEND:
                rec.csName = rec.csName || '客服机器人';
                dom = robotTpl({
                    assetsPrefix: assetsPrefix,
                    csName: rec.csName,
                    sendTimeShort: rec.sendTimeShort,
                    newContent: message.newContent
                });
                break;

            case allTypes.CS_SEND:
                handleCsMsg(rec, msgType, message);
                break;

            case allTypes.EVAL_INVITE:
                if (!processInfo.savedEval) {
                    processInfo.promoter = 2;
                    evalView.open();
                }
                break;

            case allTypes.CS_CHATTING:
                csChatting(message);
                break;

            case allTypes.OP_LEAVE:
                socketChat.clear();
                edit.setIcons({
                    emoji: false,
                    image: false
                });
                offlineTip(message);
                break;

            case allTypes.OFFLINE:
                socketChat.clear();
                edit.setIcons({
                    emoji: false,
                    image: false
                });
                offlineTip(message);
                break;

            default:
                break;

        }

        // 添加新消息到消息列表
        dom && msgAppend(dom);
    }

    /**
     * 连接socket
     */
    function connectSocket() {
        var $reconnect,
            $connectFail = $('.connect-fail'),

            // 获取上次会话id
            lastSessionId = window.cookie('sessionId');

        originConf.conversationMessage.sessionId = lastSessionId || 0;
        socketChat.init($.extend(originConf, {
            onMessage: function onMessage(e) {
                var jsonString = e.data,
                    received = JSON.parse(jsonString);


                socketConfCM.conversationId = received.newConversationId !== 0 ?
                    received.newConversationId :
                    received.conversationId;

                // 保存会话id
                window.setCookie('conversationId', socketConfCM.conversationId, {expires: 60 * 15});
                window.setCookie('sessionId', received.sessionId, {expires: 60 * 15});

                getMessage(received);
            },

            onOpen: function() {
                edit.setIcons({
                    evaluate: false,
                    'manual-service': false
                });
            },

            onClose: function() {
                edit.setIcons({
                    emoji: false,
                    image: false,
                    evaluate: false,
                    'manual-service': false
                });
                $reconnect = $msgList.find('.list-item')
                    .last().find('.reconnect');

                if (!$reconnect.length) {
                    socketChat.clear();
                    offlineTip();
                }
            },

            connectFailCb: function() {
                $connectFail.fadeIn();
            },

            socketClosedCb: function() {
                socketChat.clear();
                offlineTip();
            }
        }));
    }

    /**
     * 消息解析
     * @param msgList
     */
    function msgResolve(msgList) {
        var i,
            len,
            item,
            dom = '',
            heightBefore,
            heightAfter;

        msgList = msgList.reverse();
        len = msgList.length;

        if (!len || msgList[0] && endTime === msgList[0].sendTime) {
            processInfo.hasMore = false;
        }

        endTime = msgList[0] && msgList[0].sendTime;

        if (processInfo.hasMore) {
            for (i = 0; i < len; i++) {
                item = msgList[i];
                receive.preProcess(item);

                switch (item.type) {
                    case allRTs.CU_SEND:
                        if (item.chatMessage.type !== 11) {
                            dom += cusTpl({
                                userHead: item.userHead,
                                userName: item.userName,
                                sendTimeShort: item.sendTimeLong,
                                newContent: item.chatMessage.newContent
                            });
                        }
                        break;

                    case allRTs.ROBOT_SEND:
                        item.csName = item.csName || '客服机器人';
                        dom += robotTpl({
                            assetsPrefix: assetsPrefix,
                            csName: item.csName,
                            sendTimeShort: item.sendTimeLong,
                            newContent: item.chatMessage.newContent
                        });
                        break;

                    case allRTs.CS_SEND:
                        dom += csTpl({
                            csHead: item.csHead,
                            csName: item.csName,
                            sendTimeShort: item.sendTimeLong,
                            newContent: item.chatMessage.newContent
                        });
                        break;

                    default:
                        break;
                }

            }

            heightBefore = $msgList.height();
            $msgList.prepend(dom);
            heightAfter = $msgList.height();
            $panelMainBody.scrollTop(heightAfter - heightBefore);

            processInfo.loadingHistory = false;
        }
    }

    /**
     * 获取历史聊天记录
     */
    function fetchHistoryMsg() {
        var msgList = [];
        var data = {
            encryptedUid: encryptedUid
        };

        if (processInfo.loadingHistory) {
            return;
        }
        processInfo.loadingHistory = true;

        if (endTime) {
            data.endTime = endTime;
        }

        serviceApi.history(data)
            .done(function(res) {
                if (res && res.code === 401) {
                    window.onbeforeunload = null;
                    return location.href = '//www.yohobuy.com/signin.html?refer=' +   // eslint-disable-line
                        encodeURIComponent(location.href);
                }

                if (res && res.code === 200) {
                    if (processInfo.hasMore) {
                        msgList = res.data.records || [];
                        msgResolve(msgList);
                    }
                    $history.hide();
                    processInfo.scrollLoad = true;
                } else {
                    processInfo.loadingHistory = false;
                }
            })
            .fail(function() {
                processInfo.loadingHistory = false;
            });
    }

    // 用户信息获取并初始化socket连接
    (function() {
        var param = {
            return_type: 'jsonp',
            method: 'open.passport.get'
        };

        $.getJSON('//www.yohobuy.com/common/passport/?callback=?', param, function(jsonData) {
            if (jsonData.code !== 200) {
                location.href = '//www.yohobuy.com/signin.html?refer=' + encodeURIComponent(location.href);
                return;
            }

            // 点击刷新提示
            window.onbeforeunload = function() {
                return '';
            };

            if (jsonData && jsonData.data && jsonData.data.result !== -1) {

                socketConfCM.userHead = jsonData.data.headIco || '';
                socketConfCM.userName = decodeURIComponent(window.getUser()[0]);

                // 原始配置信息用于重新连线
                originConf = JSON.parse(JSON.stringify(socketConf));

                // 连接
                connectSocket();
            }
        });
    }());

    // 剪切板粘贴发送图片
    new ClipPaste('.msg-area', function(path) {
        send.image(path);
    });

    // tab页title重置
    broswer.tabVisible(util.removeBlinkAlert);

    // 校验留言输入内容
    $leaveMsg.find('textarea').bind('change', function() {
        var $lm = $('#leaveMsg'),
            val = $(this).val();

        if (val === '') {
            $lm.find('.leave-msg-tip').removeClass('hide');
        } else {
            $lm.find('.leave-msg-tip').addClass('hide');
        }
    });

    // 提交留言
    $leaveMsg.find('.submit').click(function() {
        var lMsg = $('#leaveMsg'),
            val = lMsg.find('textarea').val().trim();

        if (val === '') {
            lMsg.find('.leave-msg-tip').removeClass('hide');
            return false;
        }

        serviceApi.leaveMsg({
            content: val,
            encryptedUid: encryptedUid,
            conversationId: socketConfCM.conversationId
        })
            .done(function(res) {
                if (res && res.code === 401) {
                    window.onbeforeunload = null;
                    return location.href = '//www.yohobuy.com/signin.html?refer=' +   // eslint-disable-line
                        encodeURIComponent(location.href);
                }
            })
            .always(function() {
                lMsg.modal('hide');
            });
    });

    // 根节点高度设置
    $html.css({
        height: '100%'
    });

    // enter提交 ctrl+enter换行
    $msgArea.on('keydown', function(e) {
        broswer.ctrlEnter(e, sendMessage);
    });

    // 常见问题
    $('.qa-list .q').on('click', toggleAnswer);

    // 发送订单信息
    $sendOrder.on('click', function() {
        var tag = $(this),
            no = tag.data('no'),
            nm = tag.data('nm'),
            time = tag.data('time'),
            status = tag.data('status');

        var msgContent = ['单号：', no, '金额：', '￥' + nm, '下单时间：', time, '状态：', status];

        send.order(msgContent);
    });

    // 发送图片
    $sendImgInput.fileupload({
        dataType: 'json',
        acceptFileTypes: /(\.|\/)(bmp|gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5M
        url: gDomains.imCs + '/fileManage/uploadFile',  // eslint-disable-line
        progressall: function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('.progress-bar').css('width', progress + '%');
        },
        done: function(e, res) {
            res = res.result;
            if (res && res.code === 200) {
                // 共通处理
                beforeSendMsg();

                // 上传成功后发送图片消息
                send.image(util.autoProtocol(res.data.filePath));
            }
            setTimeout(function() {
                $('.progress-bar').fadeOut();
            }, 500);
        },
        error: function() {
            $('.progress-bar').css('width', 0);
            $('.upload-tip').text('上传失败，请稍后重试').fadeIn();
            setTimeout(function() {
                $('.upload-tip').fadeOut().text('');
            }, 2000);
        }
    }).on('fileuploadprocessalways', function(e, data) {
        var $tip = $('.upload-tip'),
            currentFile = data.files[data.index];

        if (data.files.error && currentFile.error) {
            switch (currentFile.error) {
                case 'File type not allowed':
                    $tip.text('您上传的图片格式不正确').fadeIn();
                    break;

                case 'File is too large':
                    $tip.text('请上传5M以内的图片').fadeIn();
                    break;
                default:
                    break;
            }
            setTimeout(function() {
                $tip.fadeOut().text('');
            }, 2000);
        }
    });

    // 订单信息、常见问题
    $rightHeadTab.on('click', function() {
        var $el = $(this),
            $siblings = $el.siblings(),
            $panRight = $('.panel-right'),
            order = $el.hasClass('order'),
            active = $el.hasClass('active'),
            $qaUse = $panRight.find('.qa-use'),
            $orderUse = $panRight.find('.order-use');

        if (active) {
            return;
        }

        $el.addClass('active');
        $siblings.removeClass('active');

        if (order) {
            $qaUse.hide();
            $orderUse.show();
        } else {
            $qaUse.show();
            $orderUse.hide();
        }
    });

    // 留言
    $msgList.on('click', '.leave-msg', leaveMsg);

    // 消息编辑框功能区
    $msgEdit.find('.util .icon').on('click', function(e) {
        var cTa = $(this),
            index = cTa.index(),
            comp = $('.emoji-component');

        var utilMap = {
            0: function() {
                var isNone,
                    compHeight,
                    topPo = cTa.offset().top,
                    leftPo = cTa.offset().left,
                    cTaHeight = cTa.height();

                isNone = comp.css('display') === 'none';
                comp.css({display: 'inline-block'});
                compHeight = comp.height();
                isNone && comp.css({
                    top: topPo - cTaHeight - compHeight - 5,
                    left: leftPo
                });

                !isNone && comp.hide();
            },

            2: function() {
                evalView.open();
            },

            3: function() {
                send.manual();
            }
        };

        if (index === 1) {
            return;
        }
        utilMap[index](e);
    });

    // 设置表情
    $document.on('click', '.emoji-component .emoji', edit.setEmoji);

    // 表情组件隐藏
    $document.on('click', function(e) {
        var $t = $(e.target),
            comp = $('.emoji-component');

        if (!$t.hasClass('emoji') && !$t.hasClass('emoji-component')) {
            comp.hide();
        }
    });

    // 重新连线
    $document.on('click', '.reconnect', function() {
        $('.connect-fail').hide();

        // 共通处理
        beforeSendMsg();
        connectSocket();
    });

    // 发送
    $msgEdit.find('.send').on('click', sendMessage);

    // 关闭聊天窗口
    $close.click(function() {
        if (processInfo.manual && !processInfo.savedEval) {
            evalView.open(true);
        } else {
            window.close();
        }
    });

    // 失去焦点更新鼠标位置
    $msgArea.on('blur', function() {
        $(this).recordCursor();
    });

    // 消息图片放大显示
    $msgList.on('click', '.msg-bubble img', function(e) {
        var $et = $(e.target),
            $zoom = $('.img-zoom-in'),
            $img = $zoom.find('img'),
            maxH = $window.height() - 100;

        if ($et.attr('src') === '') {
            return false;
        }

        $img.css('max-height', maxH);
        $img.attr('src', $et.attr('src'));
        $zoom.fadeIn();
    });

    $document.on('click', '.img-zoom-in', function() {
        $(this).fadeOut();
    });

    // 显示历史记录
    $history.click(fetchHistoryMsg);

    // 滚动加载更多
    $panelMainBody.scroll(function() {
        var isLoadingArea = $panelMainBody.scrollTop() < 100;

        isLoadingArea &&
        processInfo.scrollLoad &&
        !processInfo.loadingHistory &&
        processInfo.hasMore &&
        fetchHistoryMsg();
    });
}

// 检查支持性
if (util.isSupport()) {
    socketConf.servers.push(gDomains.imSocket); // eslint-disable-line
    _loadPage();
} else {
    $('.un-support').show();
}