const { ipcRenderer } = require("electron");
class Index {
    constructor() {
        this.color = "";
        this.size = "13px";
        this.background = "";
        // 获取本地存储的数据
        this.UserInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.socket = io("ws://127.0.0.1:3000");
        this.socketEmit();
        this.bindEvent()

    }

    socketEmit() {
        // 将本地存储的数据传给后端
        this.socket.emit("UserLogin", this.UserInfo)

        //将用户在线数发给后端
        this.socket.emit("getOnlineUser", this.UserInfo)

        //监听后端传来的PushMessage
        this.socket.on("PushMessage", (arg) => {
            this.sendMessage(arg, "") //再次调用sendMessage 把arg 和一个空数组传过去 当那边type为空时就是消息显示在左边
        })
        // 监听抖动
        this.socket.on("PushShake", (arg) => {
            ipcRenderer.send("startShake")
        })
        //监听后端传来的PushOnlineUser 
        this.socket.on("PushOnlineUser", (arg) => {
            $(".content_right .title").text(`群成员 ${arg.length}`)
            $(".content_right ul").empty() //先将父容器的容易清空再添加
            arg.forEach(v => {
                $(".content_right ul").append(`
                    <li>
                        <div class="user">
                            <img src="${v.img}" alt="">
                            <span>${v.name}</span>
                        </div>
                        ${
                            v.type == 1 
                            ? `<i class="iconfont icon-eye"></i>`
                            : v.type == 2
                              ? `<i class="iconfont icon-gif"></i>`
                              : ''
                        }
                    </li>
                `)
            });
        })




        //监听SystemMessage 向群里面添加arg
        this.socket.on("SystemMessage", (arg) => {
            $(".content_left").append(`
            <li class="system">
                <span>${arg}</span>
            </li>
            `)
        })
    }



    
    bindEvent() {
        var self = this;
        //将头部的头像 名字 房间号更改
        $(".header_left img").attr("src", this.UserInfo.img)
        $(".header_left span").text(this.UserInfo.name)
        $(".header_text").text(this.UserInfo.room)


        //获取输入框的点击事件
        $(".footer_input").keydown((e) => {
            if (e.keyCode == 13 || e.keyCode == 108) {
                e.preventDefault();//清空浏览器的属性
                this.UserInfo.content = `<div  style="border-radius: 4px;padding: 5px 10px;background:${this.background}; color: ${this.color}; font-size: ${this.size};">${$(".footer_input").html()}</div>` //为UserInfo添加个字段 里面存放在输入框输入的值
                $(".footer_input").html("") //之后将输入框给清空
                this.socket.emit("sendMessage", this.UserInfo) //将sendMessage传给后端 需要它把消息推送给其他人
                this.sendMessage(this.UserInfo); //调用sendMessage方法将this.UserInfo传过去
            }
        })

        //获取弹窗li的点击事件并且给添加active属性用.siblings()将除自己外所有父容器的删除
        $(".menu_footer li").click(function() {
            $(this).addClass("active").siblings().removeClass("active")
            // 用对象加eq取到每一项的下标对其添加和删除active
            $(".menu_content div").eq($(this).index()).addClass("active").siblings().removeClass("active")
            //并将标题栏的文本给替换
            $(".menu_title").text($(this).text())
        })

        // 用循环向表情栏添加表情
        for (var i = 0; i <= 274; i++ ) {
            $(".smiling").append(`
                <img class="smiling_img" src="./img/icon/${i}fix@2x.png" alt="">
            `)
        }
        // 用循环向动图栏添加动图
        for (var i = 0; i <= 12; i++ ) {
            $(".gif").append(`
                <img class="gif_img" src="./img/gif/${i}.gif" alt="">
            `)
        }
        // 添加到输入框的时候用.clone()创建个副本添加
        $(".gif img").click(function() {
            $(".footer_input").append($(this).clone())
        })
        // 鼠标对表情悬浮变成动图移除变成原来的图片
        $(".smiling img").hover(
            function() {
                $(this).attr({
                    src: `./img/icon/${$(this).index()}@2x.gif`
                })
            },
            function() {
                $(this).attr({
                    src: `./img/icon/${$(this).index()}fix@2x.png`
                })
            }
        );
            // 添加到输入框的时候用.clone()创建个副本添加
        $(".smiling img").click(function() {
            $(".footer_input").append($(this).clone())
        });
        // 对输入框上面的图片添加点击事件 
        // 如果li标签包含active 也就是已经激活的状态那么就是使弹窗隐藏并且移除所有的active
        $(".footer_menu .aaa").click(function() {
            if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
                $(".footer_topmenu").hide()
                $(".menu_footer li").eq($(this).index()).removeClass("active")
            //   否则就是显示弹窗并且继续点击事件
            } else {
                $(".footer_topmenu").show()
                $(".menu_footer li").eq($(this).index()).click()
            }
        })

         //监听input方法 
        $(".font input").on("input", function () {
            self.color = $(this).val()
        })
          //监听select方法 
        $(".font select").on("change", function () {
            self.size = $(this).val()
        })
          //监听qipao input方法 
        $(".qipao input").on("input", function () {
            self.background = $(this).val()
        })

        $(".icon-zhendong").click(function () {
            self.socket.emit("SetShake", self.UserInfo)
        })
       
        
    }
//创建sendMessage接收this.UserInfo为data
    sendMessage(data,type = "right") {
        $(".content_left").append(`
            <li class="${type}">
                <img class="avth" src="${data.img}" alt="">
                <div class="message">
                    <div class="name">${data.name}</div>
                    <div class="message_text">${data.content}</div>
                </div>
            </li>
        `)
    }


}

new Index();