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.renderDouTu();
    this.fontSet()
    this.renderDouDong();
  }

  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();
    })
  }
  renderDouTu() {
    for (var i = 0; i <= 12; i++) {
      $(".dt").append(`
      <li>
          <img src="./img/gif/${i}.gif" alt="">
      </li>
      `)
    };
    var a = this;
    $(".dt li img").click(function () {
      a.innerEmoji($(this).attr("src"))
    });

    $(".icon-GIF").click(function () {
      $(".dt").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来说，参数不可省略
    }
  }

  renderDouDong(){
    $(".icon-doudong-shake").click(function () {
      $('body').addClass('active');
      setTimeout(()=>{
        $('body').removeClass('active')
      },1000);
    })
  }

  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();