class Log {
  constructor() {
    this.userinfo = {}
    this.renderImg();
    this.submitLogin();
    this.golableOn();
  }

  renderImg() {
    var userchioose = "./img/1.jpg"
    for (var i = 1;i<11;i++) {
      if (i == 3 || i == 4 || i == 5) {
        $(".modal-body").append(`<img src="./img/${i}.gif" alt="">`)
      } else {
        $(".modal-body").append(`<img class="${i==1?'active': ''}" src="./img/${i}.jpg" alt="">`)
      }
    }

    $(".modal-body img").click(function (){
      $(this).addClass('active').siblings().removeClass("active");
      console.log($(this).attr("src"))
      userchioose = $(this).attr("src");
    });

    $(".submit").click(function () {
      $(".header img").attr("src", userchioose)
      $('#myModal').modal('hide', 'fit')
    })
  }

  golableOn() {
    io.socket.on('UserNameExist', () => {
      new $.zui.Messager('用户名已存在，请重新输入', {
        icon: 'heart',
        placement: 'top-right', // 定义显示位置
        type: 'danger'
      }).show();
    });

    io.socket.on('LoginSuccess', () => {
      console.log(this.userinfo);
      localStorage.setItem("userinfo", JSON.stringify(this.userinfo))
      location.href = "index.html";
    })
  }

  submitLogin() {
    $(".login").click(() => {
      var room = $(".header input[type=number]")
      var username = $(".header input[type=text]");
      if (room.val().length == 0 || username.val().length ==0) {
        new $.zui.Messager('房间号和用户名不能为空', {
          icon: 'heart',
          placement: 'top-right', // 定义显示位置
          type: 'danger'
        }).show();
      } else {
        this.userinfo = {
          roomid: room.val(),
          username: username.val(),
          img: $(".header img").attr("src")
        };
        io.socket.emit('login', this.userinfo);


      }
    });
  }

}

new Log();