class Login {
    constructor() {
        this.ImgList = [
            '1.jpg','2.jpg','3.gif','4.gif','5.gif',
            '6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'
        ];
        this.UserChiooseImg = "1.jpg"
        this.RenderUserImg()
        this.bindClickEnterRoom()
        this.onSocket()
    }


    RenderUserImg() {
        this.ImgList.forEach((v,i)=>{
            $(".chiooseUserImg").append(`
                <li class="${i == 0 ? 'active' : ''}">
                    <img src="../img/${v}" alt="">
                </li>
            `);
        });

        // 绑定选中事件
        var li = $(".chiooseUserImg li");
        var self = this;
        li.on("click", function() {
            // 切换激活样式
            $(this).addClass("active").siblings().removeClass("active");
            // 获取你点击li的下标
            var index = $(this).index();
            // 将用户选中的图片保存到 UserChiooseImg
            self.UserChiooseImg = self.ImgList[index];
        });

        $(".setUserImage").on("click", () => {
            $(".login img").attr("src", `../img/${this.UserChiooseImg}`)
            $('#chiooseImg').modal('hide')
        })
    }

    bindClickEnterRoom() {
        $(".icon-tubiaozhizuomoban").on("click", () => {
            var name = $(".name").val();
            var room = $(".room").val();

            if (name.length == 0) {
                new $.zui.Messager('用户名不能为空！', {
                    icon: 'exclamation-sign',
                    type: 'danger'
                }).show();
            } else {
                ws.socket.emit("UserLogin", {
                    name: name,
                    url: this.UserChiooseImg,
                    room: room
                });
            }
        })
    }

    onSocket() {
        // 如果用户已存在
        ws.socket.on("UserAlready", res => {
            new $.zui.Messager(res, {
                icon: 'exclamation-sign',
                type: 'danger'
            }).show();
        })

        ws.socket.on("LoginSuccess", (res) => {
           localStorage.setItem("UserInfo", JSON.stringify(res))
           go("index.html")
        })
    }
}

new Login();