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

var $ = require('yoho-jquery'),
    config = require('./socket-config'),
    socketChat = require('./socket-chat'),
    uuid = require('uuid');

require('bootstrap');
require('../common');

config.conversationMessage.userId = 15575902;  // todo userId 暂时写死

var cM = config.conversationMessage;




/**
 * 切换显示
 */
function switchTab(e) {
    var tag = $(e.target);

    if (tag.hasClass('active')) return;

    var actOrder = tag.hasClass('order');

    if (actOrder) {
        $('.right-head .tab.order').toggleClass('active');
        $('.right-head .tab.qa').toggleClass('active');
        $('.right-body' + '.order').show();
        $('.right-body' + '.qa').hide();
        $('.right-footer' + '.qa').hide();
    } else {
        $('.right-head .tab.order').toggleClass('active');
        $('.right-head .tab.qa').toggleClass('active');
        $('.right-body' + '.order').hide();
        $('.right-body' + '.qa').show();
        $('.right-footer' + '.qa').show();
    }

}

/**
 * 打星评论
 * @param e
 */
function starComment(e) {
    var tag = $(e.target);
    var index = tag.index();
    var list = $('.make-eval .stars .star');

    var el;
    for (var i = 0, len = list.length; i < len; i++) {
        el = $(list[i]);
        el.index() <= index && el.addClass('positive');
        el.index() > index && el.removeClass('positive');
    }

    var starText = {
        0: '非常不满意',
        1: '不满意',
        2: '一般',
        3: '满意',
        4: '非常满意'
    };

    var textEl = $('.make-eval .star-text');
    textEl.text(starText[index]);

}

/**
 * 选择不满意的类型
 * @param e
 */
function typeComment(e) {
    $(e.target).toggleClass('chosen');
}

/**
 * 消息编辑框功能区
 * @param e
 */
function dispatchUtil(e) {
    var cTa = $(e.currentTarget),
        index = cTa.index(),
        comp = $('.emoji-component');

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

            var isNone = comp.css('display') === 'none';

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

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

        2: function() {
            $('#makeEvaluation').modal({
                show: true
            });
        },

        3: function() {
            connectService();
        }
    };

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

}

/**
 * 设置
 * @param e
 */
function setEmoji(e) {
    var emojiText,
        emojiCode,
        tag = $(e.target),
        area = $('.msg-area'),
        val = area.val(),
        emojiId = tag.data('id'),
        comp = $('.emoji-component');

    var emojiMap = [
        {file: "100", text: "/微笑", code: "/::)"},
        {file: "101", text: "/撇嘴", code: "/::~"},
        {file: "102", text: "/色",  code: "/::B"},
        {file: "103", text: "/发呆", code: "/::|"},
        {file: "104", text: "/得意", code: "/:8-)"},
        {file: "105", text: "/流泪", code: "/::<"},
        {file: "106", text: "/害羞", code: "/::$"},
        {file: "107", text: "/闭嘴", code: "/::X"},
        {file: "108", text: "/睡", code: "/::Z"},
        {file: "109", text: "/大哭", code: "/::'("},
        {file: "110", text: "/尴尬", code: "/::-|"},
        {file: "111", text: "/发怒", code: "/::@"},
        {file: "112", text: "/调皮", code: "/::P"},
        {file: "113", text: "/呲牙", code: "/::D"},
        {file: "114", text: "/惊讶", code: "/::O"},
        {file: "115", text: "/难过", code: "/::("},
        {file: "116", text: "/酷", code: "/::+"},
        {file: "117", text: "/冷汗", code: "/:--b"},
        {file: "118", text: "/抓狂", code: "/::Q"},
        {file: "119", text: "/吐", code: "/::T"},
        {file: "120", text: "/偷笑", code: "/:,@P"},
        {file: "121", text: "/愉快", code: "/:,@-D"},
        {file: "122", text: "/白眼", code: "/::d"},
        {file: "123", text: "/傲慢", code: "/:,@o"},
        {file: "124", text: "/饥饿", code: "/::g"},
        {file: "125", text: "/困", code: "/:|-)"},
        {file: "126", text: "/惊恐", code: "/::!"},
        {file: "127", text: "/流汗", code: "/::L"},
        {file: "128", text: "/憨笑", code: "/::>"},
        {file: "129", text: "/悠闲", code: "/::,@"},
        {file: "130", text: "/奋斗", code: "/:,@f"},
        {file: "131", text: "/咒骂", code: "/::-S"},
        {file: "132", text: "/疑问", code: "/:?"},
        {file: "133", text: "/嘘", code: "/:,@x"},
        {file: "134", text: "/晕", code: "/:,@@"},
        {file: "135", text: "/疯了", code: "/::8"},
        {file: "136", text: "/衰", code: "/:,@!"},
        {file: "137", text: "/骷髅", code: "/:!!!"},
        {file: "138", text: "/敲打", code: "/:xx"},
        {file: "139", text: "/再见", code: "/:bye"},
        {file: "140", text: "/擦汗", code: "/:wipe"},
        {file: "141", text: "/抠鼻", code: "/:dig"},
        {file: "142", text: "/鼓掌", code: "/:handclap"},
        {file: "143", text: "/糗大了", code: "/:&-("},
        {file: "144", text: "/坏笑", code: "/:B-)"},
        {file: "145", text: "/左哼哼", code: "/:<@"},
        {file: "146", text: "/右哼哼", code: "/:@>"},
        {file: "147", text: "/哈欠", code: "/::-O"},
        {file: "148", text: "/鄙视", code: "/:>-|"},
        {file: "149", text: "/委屈", code: "/:P-("},
        {file: "150", text: "/快哭了", code: "/::'|"},
        {file: "151", text: "/阴险", code: "/:X-)"},
        {file: "152", text: "/亲亲", code: "/::*"},
        {file: "153", text: "/吓", code: "/:@x"},
        {file: "154", text: "/可怜", code: "/:8*"},
        {file: "155", text: "/菜刀", code: "/:pd"},
        {file: "156", text: "/西瓜", code: "/:<W>"},
        {file: "157", text: "/啤酒", code: "/:beer"},
        {file: "158", text: "/篮球", code: "/:basketb"},
        {file: "159", text: "/乒乓", code: "/:oo"},
        {file: "160", text: "/咖啡", code: "/:coffee"},
        {file: "161", text: "/饭", code: "/:eat"},
        {file: "162", text: "/猪头", code: "/:pig"},
        {file: "163", text: "/玫瑰", code: "/:rose"},
        {file: "164", text: "/凋谢", code: "/:fade"},
        {file: "165", text: "/嘴唇", code: "/:showlove"},
        {file: "166", text: "/爱心", code: "/:heart"},
        {file: "167", text: "/心碎", code: "/:break"},
        {file: "168", text: "/蛋糕", code: "/:cake"},
        {file: "169", text: "/闪电", code: "/:li"},
        {file: "170", text: "/炸弹", code: "/:bome"},
        {file: "171", text: "/刀", code: "/:kn"},
        {file: "172", text: "/足球", code: "/:footb"},
        {file: "173", text: "/瓢虫", code: "/:ladybug"},
        {file: "174", text: "/便便", code: "/:shit"},
        {file: "175", text: "/月亮", code: "/:moon"},
        {file: "176", text: "/太阳", code: "/:sun"},
        {file: "177", text: "/礼物", code: "/:gift"},
        {file: "178", text: "/拥抱", code: "/:hug"},
        {file: "179", text: "/强", code: "/:strong"},
        {file: "180", text: "/弱", code: "/:weak"},
        {file: "181", text: "/握手", code: "/:share"},
        {file: "182", text: "/胜利", code: "/:v"},
        {file: "183", text: "/抱拳", code: "/:@)"},
        {file: "184", text: "/勾引", code: "/:jj"},
        {file: "185", text: "/拳头", code: "/:@@"},
        {file: "186", text: "/差劲", code: "/:bad"},
        {file: "187", text: "/爱你", code: "/:lvu"},
        {file: "188", text: "/NO", code: "/:no"},
        {file: "189", text: "/OK", code: "/:ok"},
        {file: "190", text: "/爱情", code: "/:love"},
        {file: "191", text: "/飞吻", code: "/:<L>"},
        {file: "192", text: "/跳跳", code: "/:jump"},
        {file: "193", text: "/发抖", code: "/:shake"},
        {file: "194", text: "/怄火", code: "/:<O>"},
        {file: "195", text: "/转圈", code: "/:circle"},
        {file: "196", text: "/磕头", code: "/:kotow"},
        {file: "197", text: "/回头", code: "/:turn"},
        {file: "198", text: "/跳绳", code: "/:skip"},
        {file: "199", text: "/投降", code: "/:oY"},
        {file: "200", text: "/激动", code: "/:#-O"},
        {file: "201", text: "/乱舞", code: "/:hiphot"},
        {file: "202", text: "/献吻", code: "/:kiss"},
        {file: "203", text: "/左太极", code: "/:<&"},
        {file: "204", text: "/右太极", code: "/:&>"}
    ];

    for(var i = 0,len = emojiMap.length; i < len; i++) {
        if(emojiMap[i].file === emojiId.toString()) {
            emojiText = emojiMap[i].text;
            emojiCode = emojiMap[i].code;
        }
    }

    var start,
        end,
        newVal;

    if (cursorPo) {
        start = val.substring(0, cursorPo),
            end = val.substring(cursorPo),
            newVal = [start, emojiText, end].join('');
    } else {
        newVal = [val, emojiText].join('');
    }

    comp.hide();
    area.val(newVal);
    cursorPo += emojiText.length;

    var textDom = $('.msg-area')[0];
    var pos = cursorPo ? cursorPo : newVal.length;
    setCursorPosition(textDom, pos);
}

/**
 * 设置光标位置
 * @param textDom
 * @param pos
 */
function setCursorPosition(textDom, pos) {
    if (textDom.setSelectionRange) {
        // chrome and firefox support
        textDom.setSelectionRange(pos, pos);
        textDom.focus();
    } else if (textDom.createTextRange) {
        // IE support
        var range = textDom.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

/**
 * enter提交 enter+ctrl换行
 * @param e
 */
function msgEnterAction(e) {
    var code = e.keyCode,
        ctrlLike = e.ctrlKey || e.metaKey;

    if (code !== 13) return;

    if (!ctrlLike) {
        e.preventDefault();
        _sendMessage(e);
    } else {
        var tag = $(e.target),
            pos = tag.getCursorPosition(),
            val = tag.val(),
            start = val.substring(0, pos),
            end = val.substring(pos),
            newVal = [start, '\n', end].join('');

        tag.val(newVal);

        setCursorPosition(tag[0], pos + 1);
    }
}

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

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

}

/**
 * 发送订单
 */
function sendOrderInfo(e) {
    var tag = $(e.currentTarget),
        info = tag.data('info');
}

/**
 * 连线客服
 * @param
 */
function connectService() {
    cM.type = 2;
    socketChat.send(JSON.stringify(cM));

}

/**
 * 处理收到消息
 * @private
 */
function _getMessage(received) {
    console.log('客户收到消息！', received);

    var recType = received.type,
        message = received.message,
        msgType = message.type,
        allTypes = config.receivedType;

    // 请求人工/接入人工成功/接入人工失败
    var tipTpl;

    if (recType === 2) {
        switch(msgType) {
            case 0: // 0是没上班
                tipTpl = `<div class="list-item">
                                <p class="push-tip">
                                    <span class="tip">${message.content}</span>
                                </p>
                        </div>`;
                break;
            case 1:  // 1是需要排队
                tipTpl = `<div class="list-item">
                                <p class="push-tip">
                                    <span class="tip">${message.content}您也可以选择<a class="leave-msg">留言</a>！</span>
                                </p>
                        </div>`;
                break;
            case 2: // 2是接入人工成功
                tipTpl = `<div class="list-item">
                                <p class="push-tip">
                                    <span class="tip">${message.content}</span>
                                </p>
                        </div>`;
                break;
        }
    }

    // 待重构
    if(recType === 3 || recType === 103 || recType === 10003) {

        message.newContent = message.newContent.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
        message.content = message.content.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
        if(recType === 3) {
            tipTpl = `<div class="list-item host">
                    <img src="/img/service/cus-avatar.png" class="avatar">
                    <div class="item-detail">
                        <span class="time">18823562175 10:14:37</span>
                        <div class="msg-bubble">
                            <div>${message.newContent}</div>
                        </div>
                    </div>
                </div>`
        }

        if(recType === 103) {

            tipTpl = `<div class="list-item guest">
                    <img src="/img/service/agent-avatar.png" class="avatar">
                    <div class="item-detail">
                        <span class="time">客服机器人 10:14:37</span>
                        <div class="msg-bubble">
                            <div>${message.newContent}</div>
                        </div>
                    </div>
                </div>`
        }

        if(recType === 10003) {

            tipTpl = `<div class="list-item guest">
                    <img src="/img/service/agent-avatar.png" class="avatar">
                    <div class="item-detail">
                        <span class="time">客服助手 10:14:37</span>
                        <div class="msg-bubble">
                            <div>${message.newContent}</div>
                        </div>
                    </div>
                </div>`
        }
    }

    if(recType === 999999999) {
        tipTpl = `<div class="list-item">
                    <p class="push-tip">
                        <span class="tip">${message.content}<a class="red-tip reconnect">连线客服</a></span>
                    </p>
                </div>`;
    }

    $('.msg-list').append(tipTpl);

    $('.panel-main .main-body').scrollTop($('.panel-main .main-body')[0].scrollHeight);
}

/**
 * 处理发送消息
 * @private
 */
function _sendMessage(e, msgType) {
    var tag = $('.msg-area'),
        msg = tag.val().trim();

    if (!msg) return;
    cM.type = 3;
    cM.message.content = msg;
    cM.message.type = msgType || 1;
    cM.uuid = uuid.v4(); // 用于标示当条消息
    socketChat.send(JSON.stringify(Object.assign(cM)));
    tag.val('');
}

socketChat.init(Object.assign(config, {

    onOpen: function (e) {
        console.log('websocket opened!')
    },

    onMessage: function (e) {
        var jsonString = e.data;
        var received = JSON.parse(jsonString);

        cM.conversationId = received.conversationId;
        _getMessage(received);
    },

    onClose: function() {
        console.log('websocket closed!')
    }

}));

// 调整窗口位置
$(window).on('resize', function() {
    var vh = $(this).height(),
        vw = $(this).width();

    $('.chat-panel').css({
        width: vw - (vh - (70 + 950) / 1.7),
        'margin-left': (vh - (70 + 950) / 1.7) / 2
    }).show();
}).trigger('resize');

// 获取鼠标位置
$.fn.getCursorPosition = function() {
    var el = $(this).get(0);
    var pos = 0;

    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;

        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    return pos;
};


// // 图片上传
// $('#sendImg').fileupload({
//     dataType: 'json',
//     url: 'test',
//     done: function(e, data) {
//         $.each(data.result.files, function(index, file) {
//             $('<p/>').text(file.name).appendTo(document.body);
//         });
//     }
// });

// enter提交 ctrl+enter换行
$('.msg-edit .msg-area').on('keydown', msgEnterAction);

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

$('.send-order').on('click', sendOrderInfo);

// 订单信息、常见问题
$('.right-head .tab').click('click', switchTab);

// 星评
$('.make-eval .stars .star').click('click', starComment);

// 选择不满意类型
$('.discontent .dis-row .type').click('click', typeComment);

// 消息编辑框功能区
$('.msg-edit .util .icon').on('click', dispatchUtil);

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

// 连线客服
$('.push-tip .reconnect').on('click', connectService);

// 发送
$('.msg-edit .send').on('click', _sendMessage);

// 记录鼠标位置
var cursorPo;
$('.msg-area').on('blur', function() {
    cursorPo = $(this).getCursorPosition();
});