class Index {
    constructor() {
        this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"))
        this.onSocket()
        this.bindIconClick()
        this.RenderEmoji()
    }

    onSocket() {

        // 设置用户的头像和名字
        $(".main_header span").text(this.UserInfo.name)
        $(".main_header img").attr("src", `../img/${this.UserInfo.url}`)

        // 显示欢迎信息
        ws.socket.on("WelcomeUser", (res) => {
            $(".height").append(`
                <li class="system">
                    <p>${res}</p>
                </li>
            `);

            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
        })

        // 获取在线用户数量
        ws.socket.on("RoomOnline", (res) => {
            $(".right_list").empty()
            res.forEach(v => {
                $(".right_list").append(`
                    <li>
                        <img alt="" src="../img/${v.url}">
                        <span>${v.name}</span>
                    </li>
                `)
            })

        })

        // 获取后端给的聊天内容，设置到页面上
        ws.socket.on("SetMessage", (res) => {
            $(".height").append(`
                <li>
                    <img class="tx" alt="" src="../img/${res.url}">
                    <div class="r_text">
                        <p>${res.name}</p>
                        <div class="c_text" style="background:${res.back}">
                        ${res.message}
                        </div>
                    </div>
                </li>
            `);
            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
        })

        // 从后端拿到历史记录，然后渲染页面
        ws.socket.on("SetHistory", (res) => {
            res.forEach(v => {
                $(".height").append(`
                        <li class="${v.name == this.UserInfo.name ? 'me_message' : ''}">
                            <img class="tx" alt="" src="../img/${v.url}">
                            <div class="r_text">
                                <p>${v.name}</p>
                                <div class="${v.message.indexOf("<img src=") != -1 ? 'clearQiPao' : ''} c_text" style="background:${v.back}">
                                  ${v.message}
                                </div>
                            </div>
                        </li>
                `);

                $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
            })
        })

        // 开始抖动
        ws.socket.on("StartShake", (res) => {
            $(".main").addClass("startAn")
            setTimeout(function () {
                $(".main").removeClass("startAn")
            }, 3000)
        })

        // 加入房间
        ws.socket.emit("JoinRoom", this.UserInfo)
        // 获取历史聊天记录
        ws.socket.emit("GetHistoryList", this.UserInfo)

        $(document).keydown((event) => {
            if (event.keyCode == 13) {
                event.preventDefault();
                var UserInput = $(".main_input textarea").val();
                // 获取设置的颜色
                var color = $(".main_input textarea").css("color"),
                    size = $(".main_input textarea").css("font-size");
                var styleText = `<span style="color: ${color}; font-size: ${size}">${UserInput}</span>`;
                this.UserInfo.message = styleText;
                this.UserInfo.back = document.querySelector(".qipao_select").style.color



                ws.socket.emit("SendMessage", this.UserInfo)
                $(".height").append(`
                    <li class="me_message">
                        <img class="tx" alt="" src="../img/${this.UserInfo.url}">
                        <div class="r_text">
                            <p>${this.UserInfo.name}</p>
                            <div class="c_text" style="background:${this.UserInfo.back}">
                                ${this.UserInfo.message}
                            </div>
                        </div>
                    </li>
                `);

                $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);

                $(".main_input textarea").val("")
            }
        });
    }

    // 遍历表情 绑定事件
    RenderEmoji() {
        // 遍历表情
        config.emoji.forEach(v => {
            v.forEach(s => {
                $(".emoji").append(`<span>${s}</span>`)
            })
        })
        var slec = this;
        $(".emoji span").on("click", function () {
            slec.innerEmoji($(this).text())
        })

        // 遍历动图
        for (var i = 0; i < config.GifLength; i++) {
            $(".gif").append(`
                <img src="../img/gif/${i}.gif" alt="${i}"/>
            `)
        }
        // 为动图绑定事件
        $(".gif img").on("click", function () {
            slec.UserInfo.message = $(this)[0].outerHTML;
            ws.socket.emit("SendMessage", slec.UserInfo)
            $(".height").append(`
                    <li class="me_message">
                        <img class="tx" alt="" src="../img/${slec.UserInfo.url}">
                        <div class="r_text">
                            <p>${slec.UserInfo.name}</p>
                            <div class="clearQiPao c_text">
                              ${slec.UserInfo.message}
                            </div>
                        </div>
                    </li>
                `);

            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);

            $(".main_input textarea").val("")
        })


        $('.font').click(function(e){
            e.stopPropagation()
        })
        // 选择字体大小
        $('.font select').change(function (e) {
            var data = $(this).val();
            $(".main_input textarea").css("font-size", data)
        });

        // 设置颜色
        $('.font input').bind("input propertychange", function (e) {
            $(".main_input textarea").css("color", $(this).val())
        })

        // 设置颜色
        $('.qipao input').bind("input propertychange", function (e) {
            console.log("11111");
            $(".qipao_select").css("color", $(this).val())
        })


    }

    /**
     * 在光标的指定位置插入字符
     * @param {*} myValue 
     */
    innerEmoji(myValue) {
        var $t = $(".main_input textarea")[0];
        if ($t.selectionStart || $t.selectionStart == "0") {
            var startPos = $t.selectionStart;
            var endPos = $t.selectionEnd;
            var scrollTop = $t.scrollTop;
            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
            $t.focus();
            $t.selectionStart = startPos + myValue.length;
            $t.selectionEnd = startPos + myValue.length;
            $t.scrollTop = scrollTop;
        } else {
            this.value += myValue;
            $t.focus();
        }
    }

    /**
     * 为底部工具栏图标绑定点击事件
     */
    bindIconClick() {
        var self = this;
        var isShowEmoji = false;
        var isShowGif = false;
        $(".tools i").on("click", function () {
            switch ($(this).index()) {
                // 表情 被点击
                case 0:
                    console.log("表情");
                    if (isShowEmoji) {
                        $(".emoji").css({
                            width: 0,
                            height: 0
                        });
                        isShowEmoji = false
                    } else {
                        $(".emoji").css({
                            width: "402px",
                            height: "200px"
                        });
                        isShowEmoji = true
                    }
                    break;
                case 1:
                    console.log("动图");
                    if (isShowGif) {
                        $(".gif").css({
                            width: 0,
                            height: 0
                        });
                        isShowGif = false
                    } else {
                        $(".gif").css({
                            width: "415px",
                            height: "200px"
                        });
                        isShowGif = true
                    }
                    break;
                case 2:
                    console.log("字体");
                    $('.font').toggle()
                    break;
                // 抖动 被点击 
                case 3:
                    console.log("抖动");
                    ws.socket.emit("Shake", self.UserInfo)
                    break;
                case 4:
                    console.log("气泡");
                    $('.qipao').toggle()
                    break;
            }

        })
    }
}

new Index()