//*
// 聊天模块
// */


import Ape from "./Ape";
import Loger from "../Loger";
import xdysdk from "libs/xdysdk";
import $ from "jquery";
import ChatFace from "./ChatFace";
import UserList  from "./UserList";
import ChatImg from "./ChatImg";
import UIMagnifyApe from "ape/UIMagnifyApe";
import ClassDataProxy from "proxy/ClassDataProxy";

let loger = Loger.getLoger('PC-Chat');
let classCurInfo;
// 消息模板-老师
const tpl_message_teacher = `<div class="message_client">
    <div class="teaNameBox" >
    <span class="teaName">{name}</span>
</div>
<div style="margin-left: 20px">
    <div class="message triangle-isosceles leftmsg">{message}</div>
    </div>
    </div>`;
// 消息模板-学生
const tpl_message_student = `<div class="message_client">
                                    <div  class="stuNameBox">
                                         <span class="stuName">{name}</span>
                                    </div>
                                    <div style="margin-right: 15px">
                                         <div class="message stutriangle-isosceles rightmsg">{message}</div>
                                    </div>
                             </div>`;

class Chat extends Ape {
  constructor() {
    super();
    this.chatFace;
    this.userList;
    this.addEvent();
    this.init();
  }

  init() {
    this.chatFace = new ChatFace();
    this.userList = new UserList();
    this.chatImg = new ChatImg();
    this.chatImg.callback=this._sendImgMessageHandler.bind(this);

    this.userList.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));
    //布局
    $("#txt_message")[0].value = ''
    //UI按钮点击事件
    $("#btn_send").on("click", this._sendMessageHandler.bind(this));
    //回车键发送聊天消息
    let that = this;

    $("#txt_message").on("keydown", function (e) {
      let curKey = e.which;
      if (ClassDataProxy.isKeypress) {
        if (curKey == 13) that._sendMessageHandler();
      }
    });

    $('.left').on('contextmenu', this._preventDefault.bind(this));
    $('.header').on('contextmenu', this._preventDefault.bind(this));
    //$('.videoWindow').on('contextmenu', this._preventDefault.bind(this));
    $('.middle').on('contextmenu', this._preventDefault.bind(this));
    $('.tabTitle').on('contextmenu', this._preventDefault.bind(this));
    // $('.input-send').on('contextmenu',this._preventDefault.bind(this));
    $('.transmitBox').on('contextmenu', this._preventDefault.bind(this));
    $('.fold').on('contextmenu', this._preventDefault.bind(this));
    $('.rightGap').on('contextmenu', this._preventDefault.bind(this));
    $('.leftGap').on('contextmenu', this._preventDefault.bind(this));
    $('.curClassUserList').on('contextmenu', this._preventDefault.bind(this));
  /*  $("#txt_message").on('focus', function () {
      that._sendImgMessageHandler();
    })*/
  }
  onWindowViewChange() {
    this._emit(UserList.WINDOW_VIEW_CHANGE);
  }

  addEvent() {
    xdysdk.on("chat_receive_message", this._chatReceiveHandler.bind(this));//// 聊天消息处理
    xdysdk.on("class_join_success", this._classJoinSuccess); //监听加入课堂成功

  }

  clear() {
    $("#panel_message").empty();
  }

  _preventDefault(evt) {
    evt.preventDefault();
  }

  _classJoinSuccess(callBackData) {
    classCurInfo = callBackData;
  }

  _chatReceiveHandler(_data) {
    //自己发的消息不需要再次显示，因为自己发送的时候已经直接显示了
    if (_data && _data.fromNodeId == ClassDataProxy.nodeId) {
      loger.log("自己发送的聊天消息不需要再显示", _data);
      return;
    }
    loger.log("显示聊天消息", _data);
    this._showChatMessage(_data);
  }

  //显示内容
  _showChatMessage(_data) {
    if (!_data) {
      loger.warn("聊天信息无效->", _data);
      return;
    }
    loger.log('上传图片成功是显示图片', _data)
    let str = _data.message;

    //msgType为1的时候是图片，其他的按文本消息处理
    if(_data.msgType==1){
      this.showChatImg(_data);
    }else {
      this.showChatMessage(_data);
    }
    /*    let index = str .lastIndexOf(".");
     str  = str .substring(index + 1, str.length);
     let msgValue =str ;
     if(msgValue=="jpg"||msgValue=="png"||msgValue=="gif"||msgValue=="jpeg"||msgValue=="bmp"){
     this.showChatImg(_data);
     }
     else{
     this.showChatMessage(_data);
     }*/

  }

  showChatImg(_data) {

    let tpl = _data.fromNodeId !== classCurInfo.nodeId ? tpl_message_teacher : tpl_message_student;
    let message = '<img class="chatImg" src=' + _data.message + '>';
    let strHTML = this._format(tpl, {
      name: _data.fromName,
      message: message
    });
    $("#panel_message").append(strHTML);
    $("#panel_message")[0].scrollTop = $("#panel_message")[0].scrollHeight;
    $(".chatImg").on('load', this._onLoadImage.bind(this));
    $(".chatImg").on("click", this._expandChatImg.bind(this)); //放大截图
  }

  showChatMessage(_data) {
    let tpl = _data.fromNodeId !== classCurInfo.nodeId ? tpl_message_teacher : tpl_message_student;
    let message = (_data.message + "").replace(/\[img:([^\[:\]]*)\]/ig, function (match, group, index) {
      return '<img src="images/face/' + group + '.png"/>';
    });
    let strHTML = this._format(tpl, {
      name: _data.fromName,
      message: message
    });
    $("#panel_message").append(strHTML);
    $("#panel_message")[0].scrollTop = $("#panel_message")[0].scrollHeight;
  }
  _onLoadImage(){
    $("#panel_message")[0].scrollTop = $("#panel_message")[0].scrollHeight;
  }
  //MouseEvent
  _expandChatImg(evt) {
    UIMagnifyApe.show(evt.target.currentSrc);
  }

  _sendMessageHandler() {
    let msg = $("#txt_message")[0].value;
    if (msg) {
      let parten = /^\s*$/;
      if (parten.test(msg)) {
        loger.log("全是空格");
      } else {
        let msgType=0;////0是文本，1是图片
        xdysdk.api("sendChatMsg", {msgType: msgType, "message": msg, "to": 0});
        $("#txt_message")[0].value = "";

        //自己的直接显示
        let chatData = {};
        chatData.fromNodeId = ClassDataProxy.nodeId;
        chatData.toNodeId = 0;
        chatData.msgType=msgType;
        chatData.message = msg;
        chatData.fromName = ClassDataProxy.userName;
        chatData.fromRole = ClassDataProxy.userRole;
        this._showChatMessage(chatData);
      }
    } else {
      loger.log("发送消息内容不能为空");
    }
    $("#txt_message").focus();
  }

  //图片上传完成后就发送
  _sendImgMessageHandler(_data) {
    if(!_data){
      return;
    }
    let msg =_data.fileName||"";
    if (msg) {
      let parten = /^\s*$/;
      if (parten.test(msg)) {
        loger.log("全是空格");
      } else {
        //let arr=msg.split('.');
        //let len=arr.length;
        //let msgValue =arr[len-1];

        let index=msg.lastIndexOf(".");
        let msgValue=msg.substr(index+1);


        if(msgValue){
          msgValue = msgValue.toLowerCase();
        }
        if (msgValue == "jpg" || msgValue == "png" || msgValue == "gif" || msgValue == "jpeg" || msgValue == "bmp") {
          let msgType=1;////0是文本，1是图片
          let url= _data.url||"";
          xdysdk.api("sendChatMsg", {msgType: msgType, "message":url, "to": 0});
          //$("#txt_message")[0].value = "";
          let chatData = {};
          chatData.fromNodeId = ClassDataProxy.nodeId;
          chatData.toNodeId = 0;
          chatData.msgType=msgType;
          chatData.message = url;
          chatData.fromName = ClassDataProxy.userName;
          chatData.fromRole = ClassDataProxy.userRole;
          this._showChatMessage(chatData);
        }
      }
    } else {
      loger.log("发送消息内容不能为空");
    }
    //$("#txt_message")[0].value == '';
  }

  //工具类
  _format(str, obj) {
    return str.replace(/\{(\w+)\}/g, function (match, group, index) {
      return obj[group];
    });
  };
}
export default Chat;