/**
 * wx.send("操作类型|操作状态|其他数值")
 * 操作类型：y 代表速度摇杆
 *         x 代表方向摇杆
 *         o 代表其他操作
 */
class IndexPage {
    constructor() {

        // 自动壁障的开关
        this.obstacleStatus = 
            localStorage.getItem("obstacleStatus") == null 
            ? false
            : JSON.parse(localStorage.getItem("obstacleStatus"))

        // 前大灯的开关    
        this.fronLamp = 
            localStorage.getItem("fronLamp") == null 
            ? false
            : JSON.parse(localStorage.getItem("fronLamp"))

        // 双闪的开关    
        this.doubleStatus = 
            localStorage.getItem("doubleStatus") == null 
            ? false
            : JSON.parse(localStorage.getItem("doubleStatus")) 
            
            
         // 手势跟随的开关    
         this.handStatus = 
            localStorage.getItem("handStatus") == null 
            ? false
            : JSON.parse(localStorage.getItem("handStatus"))    


        this.doubleIntervalId = null;
        this.socket = new WS();
        this.Joystick();
        this.bindActionButton();
    }

    Joystick() {
        // 前进后退摇杆 
        // status：-1 前进  1 后退，0 停止
        // speed：前进后退的速度 0 ~ 255 之间
        var s1 = new Joystick("stick1", "y", (status, speed) => {
            this.socket.ws.send(`y|${status}|${speed}`)
        });

        // 左右转向摇杆 
        // status：3左转  4右转  0 转向恢复原样（直行）
        var s2 = new Joystick("stick2", "x", (status) => {
            this.socket.ws.send(`x|${status}`)
        });
       
        this.socket.onmessage((res) => {
            console.log("res = ",res);
            alert("web收到请求为：")
            alert(JSON.stringify(res))
            res = res.split("|");
            switch (res[0]) {
                case "server":
                    if (res[1] == "y") {
                        $("#stick1").style = "";
                        $("#stick2").style = "";
                        s1.active = false;
                        s1.dragStart = { x: 0, y: 0 };

                        s2.active = false;
                        s2.dragStart = { x: 0, y: 0 };
                    }
                    break;
                case "client":
                
                    break;    
            
                default:
                    break;
            }
        })

    }

    bindActionButton() {

        if (this.obstacleStatus) {
            $(".obstacle_wrap").classList.add("open")
        }

        if (this.fronLamp) {
            $(".icon-zidongdadeng").classList.add("open")
        }

        if (this.doubleStatus) {
            $(".icon-jinggao_o").classList.add("open")
        }

        if (this.handStatus) {
            $(".hand_wrap").classList.add("open")
        }

        // 喇叭开关
        $(".icon-xiaolaba").onclick = () => {
            this.play();
            this.socket.ws.send(`b|buzzer|1`)
        }

         // 手势跟随
         $(".hand_wrap").onclick = () => {
            this.play();
            this.handStatus = !this.handStatus
            $(".hand_wrap").classList.toggle("open")
            localStorage.setItem("handStatus", this.handStatus)
            this.socket.ws.send(`b|openHand|${this.handStatus ? '1' : '0'}`)
        }

        // 前面大灯
        $(".icon-zidongdadeng").onclick = () => {
            this.play();
            this.fronLamp = !this.fronLamp
            $(".icon-zidongdadeng").classList.toggle("open")
            localStorage.setItem("fronLamp", this.fronLamp)
            this.socket.ws.send(`b|fronLamp|${this.fronLamp ? '1' : '0'}`)
        }

        // 双闪
        $(".icon-jinggao_o").onclick = () => {
            this.play();
            this.doubleStatus = !this.doubleStatus
            $(".icon-jinggao_o").classList.toggle("open")
            localStorage.setItem("doubleStatus", this.doubleStatus)
            if (this.doubleStatus) {
                this.doubleIntervalId = setInterval(() => this.socket.ws.send(`b|doubleFlash|1`), 1000)
            } else {
                clearInterval(this.doubleIntervalId)
                this.socket.ws.send(`b|doubleFlash|0`)
            }
        }

        $(".obstacle_wrap").onclick = () => {
            this.play();
            // 1 true, 0 false
            this.obstacleStatus = !this.obstacleStatus
            
            $(".obstacle_wrap").classList.toggle("open")
            localStorage.setItem("obstacleStatus", this.obstacleStatus)
            this.socket.ws.send(`b|obstacle|${this.obstacleStatus ? '1' : '0'}`)
            
        }
    }

    play() {
        $(".actionAudio").play();
    }
}

new IndexPage();