class Index {
  constructor() {
    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    this.fontSetConfig = {
      fontSize: '22px',
      color: '',
      bgColor: ''
    }
    this.setUserInfo();
    this.golableOn();
    this.sendMessage();
    this.renderBiaoQing();
    this.fontSet()
  }

  golableOn() {
    io.socket.emit("getUserOnline",this.userinfo.roomid);

    io.socket.on('UserOnline', (list) => {
      $(".right_header p").text(list.length)
      $(".right_content").empty();
      list.forEach((v,i) => {
        $(".right_content").append(`
          <div>
              <img src="${v.img}" alt="">
              <p>${v.username}</p>
          </div>
        `)
      })
    });

    io.socket.on('sedMessage', (list) => {
      console.log("其他人收到的消息为: ",list)
      this.renderMessage(list,'left')
    })
  }

  setUserInfo() {
    $(".user img").attr("src", this.userinfo.img);
    $(".user p").text(this.userinfo.username);
    $(".rightlog").text(this.userinfo.roomid);
  }

  sendMessage() {
    $('.shuru').on('keydown', (event) => {
      if(event.keyCode == 13){
        event.preventDefault();
        if ($(".shuru").text().length > 0) {
          var data = Object.assign(this.userinfo, {
            message: `<div style="font-size: 
${this.fontSetConfig.fontSize}; color: ${this.fontSetConfig.color};
background: ${this.fontSetConfig.bgColor};
">
${$(".shuru").html()}
</div>`
          });
          this.renderMessage(data);
          io.socket.emit("getMessage",data);
          $(".shuru").html("")
        }
      }
    });
  }

  renderMessage(data, position = "right") {
    if (position == "right") {
      $(".left_content .chat_message").append(`
        <div class="liaotianmast">
            <div>
                <p>${data.username}</p>
                <span>${data.message}</span>
            </div>
            <img src="${data.img}" width="40" height="40" style="border-radius: 100%;" alt="">
        </div>
      `);
    } else {
      $(".left_content .chat_message").append(`
        <div class="leftlog liaotian">
            <img src="${data.img}" width="40" height="40" style="border-radius: 100%;" alt="">
            <div>
               <p>${data.username}</p>
                <span>${data.message}</span>
            </div>
        </div>
      `)
    };

    $(".left_content").animate({
      scrollTop: $(".chat_message").outerHeight()
    }, 1);
  }


  renderBiaoQing() {
    for (var i = 2;i<=209;i++) {
      $(".bq").append(`
      <li>
          <img src="./img/icon/${i}x.png" alt="">
      </li>
      `)
    };

    $(".bq li img").mouseover(function (){
      var oldImg = $(this).attr("src");

      $(this).attr("src", oldImg.replace("png","gif"))
    });

    $(".bq li img").mouseout(function (){
      var oldImg = $(this).attr("src");
      $(this).attr("src", oldImg.replace("gif","png"))
    });

    var a = this;
    $(".bq li img").click(function () {
      a.innerEmoji($(this).attr("src"))
    });

    $(".icon-xiaolian1").click(function (){
      $(".bq").toggle();
    })
  }

  innerEmoji(src) {
    if (window.getSelection) {
      var sel = window.getSelection();
      var range = sel.getRangeAt(0);
      var img = new Image();
      range.deleteContents()
      img.src = src;
      console.log(range);
      range.insertNode(img);
      range.collapse(false);//对于IE来说，参数不可省略
    }
  }

  fontSet() {
    var self = this;
    $(".fontSize").change(function(){
      self.fontSetConfig.fontSize = $(this).val();
      console.log("self.fontSetConfig: ", self.fontSetConfig)
    });

    $(".fontColor").change(function(){
      self.fontSetConfig.color = $(this).val();
    });

    $(".bgColor").change(function(){
      self.fontSetConfig.bgColor = $(this).val();
    });
  }
}

new Index();